First steps with React

In the previous section, you learned how to create simple HTML elements with React, through React.createElement. Toward the end, you learned how to do the same thing with JSX.

In this section, you are going to learn more about creating simple as well as more advanced React components.

Creating a simple React element

Just like other JavaScript values, you can store React elements in a variable/constant:

const greeting = <h1>hello world!</h1>

If you have JSX code that spans across multiple lines, you can wrap it in ( and ) brackets, as follows:

const greeting = (
  <h1>
    hello world!
  </h1>
)

There is something else that makes JSX special—you can embed JavaScript expressions in JSX by wrapping them in curly brackets {}. That way, you can display variables/constants, evaluate functions, show their result, and so on. Let's display a name constant instead of world:

const name = 'dan'
const greeting = (
  <h1>
    hello {name}!
  </h1>
)

Note...