# JSX (JavaScript XML)

URL: https://softwaredictionary.org/terms/jsx
Category: Web Development
Last updated: 2026-10-03
Pronunciation: jay-es-EKS

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 to

```jsx
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" })
```

## Frequently asked questions

**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.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt