Understanding JSX
Explore how JSX blends HTML and JavaScript to create dynamic React elements. Understand JSX compilation via Babel and learn to embed JavaScript expressions, enhancing your React frontend development skills.
We'll cover the following...
How to use Babel REPL
In this section, we’re going to understand JSX, which we briefly touched on this in the sections on “Understanding the ASP.NET 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 Babel in the following widget, and enter the following JSX in the left-hand pane:
The following appears in the right-hand pane, which is what our JSX has compiled down to:
...