JSX comes with the full power of JavaScript. You can put any JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program.

className vs class

Although it looks nearly identical to html there are a few differences. A major one is that you must use className instead of class. This is due to class being reserved in JavaScript and since we're technically writing JavaScript not html there are a few quirks.

variables

You can use variables in a jsx template by referencing them in curly braces. Most types will be automatically converted to strings before rendering with the notable exception of booleans and non-array objects.

import "./App.css";

function App() {
  const title = 'Welcome to the new blog';
  const likes = 50;

  return (
    <div className="App">
      <div className="content">
        <h1>{ title }</h1>
        <p>Liked { likes } times</p>
      </div>
    </div>
  );
}

export default App;

inline style

For inline styles, you need to pass an object to the style property where the keys are the css keys (but camelCased):

<nav className="navbar">
  <h1>The Dojo Blog</h1>
  <div className="links">
    <a href="/">Home</a>
    <a href="/create" style={{
      color: "white",
      backgroundColor: "#f1356d",
      borderRadius: "8px"
    }}>New Blog</a>
  </div>
</nav>

functions