Learning Redux

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>
)

ReactDOM escapes all values embedded in JSX before rendering. This means that it is totally safe to ...