What is JSX in React?

JSX looks like HTML, but it isn't a separate template language — it's syntactic sugar that compiles down to React.createElement() calls, which build a tree of JavaScript objects describing what the UI should look like.

Example

const element = <h1>Hello, {'{'}name{'}'}</h1>;

// compiles roughly to:
const element = React.createElement('h1', null, 'Hello, ', name);

Why React uses JSX

Keeping markup and the logic that renders it in the same file makes components easier to reason about as a single unit, rather than splitting template files from the JavaScript that populates them. JSX requires a build step (via a tool like Babel) to compile it into plain JavaScript before it can run in a browser.

Key JSX rules

• A component must return a single root element (or a Fragment, written as <>...</>)
• JavaScript expressions are embedded using curly braces, like {'{'}variableName{'}'}
• HTML attribute names change slightly — class becomes className, for becomes htmlFor