What is JSX?

JSX is a way of building React user interfaces that uses the simple syntax of HTML, but adds the functionality and dynamic nature of JavaScript.

In short, it is HTML + JavaScript for structuring our React apps.

Though JSX looks like HTML, under the hood it is actually JavaScript function calls.

If you write a div in JSX, it's actually the equivalent of calling React.createElement().

We can build our user interfaces by manually calling React.createElement, but as we add more elements, it becomes harder and harder to read the structure we have built.

The browser cannot understand JSX itself, so we often use a JavaScript compiler called Babel to convert what looks like HTML into JavaScript function calls that the browser can understand.