JSX is a syntax extension to JavaScript. JSX may remind you of a template language, but it comes with the full power of JavaScript.

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

Source:

“Introducing JSX –.” React, reactjs.org/docs/introducing-jsx.html