In this section, we're going to understand JSX, which we briefly touched on in Chapter 1, Understanding the ASP.NET Core React Template. We already know that JSX isn't a 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:

1. 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"
);

2. 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...