Describe Elements with JSX
JSX is an alternative syntax for React.createElement that doesn’t introduce any new functionality, but makes the code easier to read.
You may be used to describing the user interface in separate template files. React developers came up with an unorthodox solution: a new syntax to describe user interfaces inside JavaScript files. Instead of writing React.createElement by hand, you write the element description in a syntax that’s almost identical to HTML, called JSX. Then, before the application runs, you process your source with a tool called Babel to replace JSX with React.createElement.
When compared to templates, the advantage to this approach is that there are fewer special rules to learn than with a separate template language, and error messages tend to be easier to interpret. The trade-off is that you need a build step to prepare your code for production. To get started fast, right now we’ll use an in-browser Babel transform: it’s too slow for production use and may sometimes lead to odd runtime errors, but it’s enough to practice the syntax.
Let’s convert our Adder component to use JSX instead of React.createElement. Modify your code so it looks like this:
| | function Adder({ n1, n2 }) { |
| | const sum = n1 + n2; |
| | return <h1>{sum}</h1>; |
| | } |
In this version, we return an <h1> element, as if we’d written it in HTML. We then output the value of the sum inside the <h1> element by surrounding the variable name with braces. You can mix the result of any JavaScript expression into the generated markup by enclosing the JavaScript expression in braces.
Once you convert Adder to JSX, the application won’t work anymore because the browser can’t interpret JSX. We’ll use the Babel standalone transformer to translate on the fly JSX into React.createElement calls. Open index.html. Insert a link to Babel’s standalone transpiler right above your own code, and then change your code’s type to text/babel:
| | <script src="https://unpkg.com/react@15/dist/react.js"></script> |
| | <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> |
| » | <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> |
| » | <script type="text/babel" src="Adder.js"></script> |
In Chrome, Babel standalone doesn’t work if you open index.html as a local file. You need to serve index.html from a local web server. A solution that works on every platform where Chrome runs is to install the Web Server for Chrome extension.[5] After installing the extension in Chrome, select the directory containing index.html as the directory to serve and navigate to the URL displayed by the Web Server extension.
Open index.html in your browser, and the text displays again. If something doesn’t work, check that you included Babel before your own code and that you’ve changed the type attribute to “text/babel” on the <script> tag for your own code; otherwise, Babel won’t convert it.
Now that everything is back into working order, let’s also use JSX in ReactDOM.render. Convert the React.createElement call inside ReactDOM.render.
Enclose the component name in angle brackets, as if it were a custom HTML element. Capitalize component names, or else React will try to create them directly in the DOM, even if no HTML element with that name exists. Set the prop values as if they were HTML attributes, but surround each prop with braces instead of quotes to prevent React from interpreting them as strings instead of numbers. Your code should look like the following:
| | ReactDOM.render(<Adder n1={2} n2={4} />, document.getElementById('app')); |
You’ll use JSX for the rest of the book. The in-browser conversion runs too slowly for production apps, so in Chapter 3, Create a Production Build, you’ll convert your source code to valid JavaScript before deploying the application. For now, we’ll use the in-browser transform so you can keep focusing on React.
Let’s review all we learned so far. React.createElement generates a description of the UI. It can use either strings or a component. Strings describe single HTML elements. Components combine multiple elements and describe a piece of UI as a function of data. It is like a pipe that swallows data and outputs a representation of the UI:
| | Data --> Component --> Element |
React.createElement accepts either a string that defines plain HTML elements, or a component. By passing a component to React.createElement, you can combine components into more complex elements until you’ve built the whole interface. You can replace React.createElement with JSX. Even though JSX looks like HTML, Babel eventually converts everything to React.createElement calls. Babel assumes elements that start with a lowercase define regular HTML elements, and elements that start with a capital are based on components.
ReactDOM.render takes this description of the UI and constructs the actual DOM nodes:
| | Element --> Renderer --> UI |
React then ensures that the interface stays up to date as the data in props changes.
Now that we’ve got the basics down, we can build more complex applications.