What is JSX and how does it work in React?

Short answer

JSX is a syntax extension for JavaScript that looks like HTML. It compiles to React.createElement() calls and allows you to describe UI components declaratively.

How it works

Babel or a similar transpiler transforms JSX into plain JavaScript function calls. Attributes become props, and nested elements become children. Because JSX is JavaScript, you can embed any expression inside curly braces.

Example

function Greeting({ name }) {
  return <h1 className="title">Hello, {name.toUpperCase()}!</h1>;
}

Compiles roughly to:

function Greeting({ name }) {
  return React.createElement('h1', { className: 'title' }, 'Hello, ', name.toUpperCase(), '!');
}

Why it matters

JSX keeps rendering logic colocated with the UI structure, making components easier to read and refactor. It is not a template language; it is full JavaScript, which means you can use functions, conditionals, and loops directly.