JSX vs HTML vs Vanilla JavaScript

As mentioned above, React projects typically contain lots of JSX code. Most custom components will return JSX code snippets. You can see this in all the examples shared thus far, and you will see in basically every React project you will explore, no matter whether you are using React for the browser or for other platforms like react-native.

But what exactly is this JSX code? How is it different from HTML? And how is it related to vanilla JavaScript?

JSX is a feature that's not part of vanilla JavaScript. What can be confusing, though, is that it's also not directly part of the React library.

Instead, JSX is syntactical sugar that is provided by the build workflow that's part of the overall React project. When you start the development web server via npm start or build the React app for production (i.e., for deployment) via npm run build, you kick off a process that transforms this JSX code back to regular JavaScript instructions...