Learn React with TypeScript 3

JSX

As mentioned in the previous section, JSX looks a bit like HTML. We can have JSX in our JavaScript (or TypeScript) code, as we did in the last section in our render function. JSX isn't valid JavaScript though—we need a preprocessor step to convert it into JavaScript.

We're going to use an online Babel REPL to play with JSX:

1. Open a browser, go to https://babeljs.io/repl, and enter the following JSX in the left-hand pane:

<span>This is where our title should go</span>

The following appears in the right-hand pane, which is what our JSX has compiled down to:

React.createElement(  "span",  null,  "This is where our title should go");

We can see that it compiles down to a call to React.createElement, which has three parameters:

• The element ...