Understanding JSX
In this section, we're going to understand JSX, which we briefly touched on in Chapter 1, Understanding the ASP.NET 5 React Template. We already know that JSX isn't valid JavaScript and that we need a preprocessor step to convert it into JavaScript. We are going to use the Babel REPL to play with JSX to get an understanding of how it maps to JavaScript by carrying out the following steps:
- Open a browser, go to https://babeljs.io/repl, and enter the following JSX in the left-hand pane:
<span>Q and A</span>
The following appears in the right-hand pane, which is what our JSX has compiled down to:
React.createElement("span", null, "Q and A");
- We can see that it compiles down to a call to
React.createElement
, which has three parameters:- The element type, which can be an HTML tag name (such as
span
), a React component type, or a React fragment type. - An object containing the properties...
- The element type, which can be an HTML tag name (such as