React: Up & Running

Chapter 4. JSX

So far in the book you’ve seen how your user interfaces are defined in the render() functions using calls to React.createElement() and the React.DOM.* family (e.g., React.DOM.span()). One inconvenience with that many function calls is that it’s a little hard to keep up with all the parentheses and curly braces you need to close. There’s an easier way: JSX.

JSX is a separate technology from React and completely optional. As you see, the first three chapters didn’t even use JSX. You can opt into not using JSX at all. But it’s very likely that once you try it, you won’t go back to function calls.

Note

It’s not quite clear what the acronym JSX stands for, but it’s most likely JavaScriptXML or JavaScript Syntax eXtension. The official home of the open-source project is http://facebook.github.io/jsx/.

Hello JSX

Let’s revisit the final “Hello World” example from Chapter 1:

<script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script>
  ReactDOM.render(
    React.DOM.h1(
      {id: "my-heading"},
      React.DOM.span(null,
        React.DOM.em(null, "Hell"),
        "o"
      ),
      " world!"
    ),
    document.getElementById('app')
  );
</script>

There are quite a few function calls in the render() function. Using JSX makes it simpler:

ReactDOM.render(
  <h1 id="my-heading">
    <span><em>Hell</em>o</span> world!
  </h1>,
  document.getElementById('app')
);

This syntax looks just like HTML and you already know HTML. The only thing is, because it’s not valid JavaScript syntax, it cannot run ...