What Is JSX?

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

By using JSX one can write the following JSX/JavaScript code:

  1. var nav = (
  2.     <ul id="nav">
  3.       <li><a href="#">Home</a></li>
  4.       <li><a href="#">About</a></li>
  5.       <li><a href="#">Clients</a></li>
  6.       <li><a href="#">Contact Us</a></li>
  7.     </ul>
  8. );

And Babel will transform it into this:

  1. var nav = React.createElement(
  2.    "ul",
  3.    { id: "nav" },
  4.    React.createElement(
  5.       "li",
  6.       null,
  7.       React.createElement(
  8.          "a",
  9.          { href: "#" },
  10.          "Home"
  11.       )
  12.    ),
  13.    React.createElement(
  14.       "li",
  15.       null,
  16.       React.createElement(
  17.          "a",
  18.          { href: "#" },
  19.          "About"
  20.       )
  21.    ),
  22.    React.createElement(
  23.       "li",
  24.       null,
  25.       React.createElement(
  26.          "a",
  27.          { href: "#" },
  28.          "Clients"
  29.       )
  30.    ),
  31.    React.createElement(
  32.       "li",
  33.       null,
  34.       React.createElement(
  35.          "a",
  36.          { href: "#" },
  37.          "Contact Us"
  38.       )
  39.    )
  40. );

You can think of JSX as a shorthand for calling React.createElement().

The idea of mixing HTML and JavaScript in the same file can be a rather contentious topic. Ignore the debate. Use it if you find it helpful. If not, write the React code required to create React nodes. Your choice. My opinion is that JSX provides a concise and familiar syntax for defining a tree structure with attributes that does not require learning a templating language or leaving JavaScript. Both of which can be a win when building large applications.

It should be obvious but JSX is easier to read and write over large pyramids of JavaScript function calls or object literals (e.g., contrast the two code samples in this section). Additionally the React team clearly believes JSX is better suited for defining UI’s than a traditional templating (e.g., Handlebars) solution:

markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome. We’ve found that the best solution for this problem is to generate HTML and component trees directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs.

Notes

  • Don’t think of JSX as a template but instead as a special/alternative JS syntax that has to be compiled. I.e., JSX is simply converting XML-like markup into JavaScript.
  • The Babel tool is a subjective selection from the React team for transforming ES* code and JSX syntax to ES5 code. You can learn more about Babel at http://babeljs.io/ or by reading the Babel handbook.
  • The merits of JSX in four bullet points:
    • Less technical people can still understand and modify the required parts. CSS developers and designers will find JSX more familiar than JavaScript alone. I.e., HTML markup, using JSX, looks like HTML markup instead of a pyramid of createElement() function.
    • You can leverage the full power of JavaScript in HTML and avoid learning or using a templating language. JSX is not a templating solution. It is a declarative syntax used to express a tree structure of UI nodes and components.
    • By adding a JSX transformation step you’ll find errors in your HTML you might otherwise miss.
    • JSX promotes the idea of inline styles. Which can be a good thing.
  • Beware of JSX Gotchas.
  • JSX is a separate thing from React itself. JSX does not attempt to comply with any XML or HTML specifications. JSX is designed as an ECMAScript feature and the similarity to XML/HTML is only at the surface (i.e., it looks like XML/HTML so you can just write something familiar). A JSX specification is currently being drafted to by used by anyone as an a XML-like syntax extension to ECMAScript without any defined semantics.
  • In JSX, <foo-bar /> alone is valid while <foo-bar> alone isn’t. You have to close all tags, always.