JSX

JavaScript XML

Pronunciation: jay-es-EKS

Updated October 3, 20262 min read

In short

JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.

What is JSX?

JSX was introduced with React in 2013. Instead of building elements with function calls, you write <h1 className="title">Hello, {name}</h1> directly in a JavaScript file. Curly braces drop back into JavaScript, so any expression, such as a variable, a calculation or a function call, can appear inside the markup.

Browsers don't understand JSX. A compiler such as Babel, TypeScript, esbuild or SWC turns each tag into an ordinary function call that creates an element object: originally React.createElement, and today usually a function from React's JSX runtime. The .tsx extension is the same syntax in TypeScript files, with type checking for every prop.

Because JSX is JavaScript, lists and conditions use ordinary code: items.map(...) to render a list, && or the ternary operator to show something conditionally. Some names differ from HTML because they are JavaScript properties: className instead of class, htmlFor instead of for, and event handlers in camelCase such as onClick.

A common misconception is that JSX is HTML inside JavaScript, or that it only works with React. It is a syntax for creating objects, so expressions are escaped automatically, which protects against many XSS attacks, and libraries such as Preact and Solid also use JSX with their own runtimes.

Key takeaways

JSX lets you write HTML-like markup inside JavaScript.
It was introduced with React in 2013.
A compiler turns each tag into a function call; TSX is the TypeScript form.
Curly braces embed any JavaScript expression in the markup.
Attributes follow JavaScript names, such as className and onClick.

Example

JSX and what it compiles tojsx

function ProductList({ products, onBuy }) {
  return (
    <ul className="products">
      {products.length === 0 && <li>No products yet</li>}
      {products.map((p) => (
        <li key={p.id}>
          {p.name}: {p.price.toFixed(2)} €
          <button onClick={() => onBuy(p.id)}>Buy</button>
        </li>
      ))}
    </ul>
  );
}

// <h1 className="title">Hi</h1>  compiles roughly to:
// jsx("h1", { className: "title", children: "Hi" })

Readers ask

Is JSX required to use React?

No. You can call React's element functions directly, but JSX is much easier to read and is what almost every React project uses.

What is the difference between JSX and TSX?

TSX is JSX in a TypeScript file. The syntax is the same, and TypeScript also checks the props passed to each component.

Why does JSX use className instead of class?

Because JSX compiles to JavaScript, where class is a reserved word, and React follows the DOM property names, such as className and htmlFor, rather than the HTML attribute names.

JSX