JSX

JSX is a syntax extension for JavaScript that allows developers to write HTML-like markup directly inside JavaScript code. Introduced by Facebook in 2013 alongside the React library, JSX is not a separate language with its own runtime — it is a syntax that gets compiled (most often by Babel or the TypeScript compiler) into ordinary JavaScript function calls that construct UI element descriptions.

Although strictly speaking JSX is a syntax extension rather than a standalone language, it has become so pervasive in modern web development — through React, React Native, Preact, SolidJS, and countless tooling integrations — that it occupies a unique place in the programming language landscape.

History & Origins

JSX was created at Facebook to support React, the company’s then-new approach to building user interfaces. React’s core idea was to describe UIs as pure functions of state, with components returning element trees. The team needed a way to express those trees that felt natural to developers familiar with HTML, while still being just JavaScript underneath.

Jordan Walke, the original author of React, designed JSX so that markup-like expressions could live inside JavaScript files without escaping into separate template files. React (and JSX) were open-sourced at JSConf US in May 2013. The initial reaction was famously mixed — many developers were uncomfortable with mixing markup and logic — but the model proved remarkably productive and gradually won over the broader community.

A Familiar Inspiration

JSX visually resembles XML and HTML, but its closest spiritual ancestor in the JavaScript world is E4X (ECMAScript for XML), an earlier and now-abandoned standard that allowed XML literals inside JavaScript. JSX is intentionally simpler: it does not define semantics for the markup itself; it only specifies how the syntax maps to plain JavaScript function calls.

Design Philosophy

JSX is built around a few deliberate design choices:

• Sugar over substance: JSX is purely syntactic sugar. <Button color="blue">Hi</Button> compiles to a function call such as React.createElement(Button, { color: "blue" }, "Hi") (or, with the new JSX transform, _jsx(Button, { color: "blue", children: "Hi" })).
• Markup co-located with logic: Components combine structure, behavior, and (often) styling in a single file, organized around units of UI rather than file types.
• Expressions, not templates: Anything inside { ... } is a regular JavaScript expression — there is no separate template DSL with its own control flow.
• Library-agnostic: While invented for React, JSX is not tied to React’s runtime. Preact, SolidJS, Hyperapp, and others use the same syntax with different transforms.

Key Features

Element Syntax

JSX expressions look like HTML/XML:

1

const greeting = <h1 className="title">Hello, World!</h1>;

Capitalized names refer to JavaScript components; lowercase names are treated as built-in host elements (DOM tags in React, native components in React Native).

Embedded Expressions

Curly braces embed any JavaScript expression:

1
2

const name = "Ada";
const greeting = <h1>Hello, {name.toUpperCase()}!</h1>;

Attributes (Props)

Attributes become props on the resulting element. Strings use quotes; other values use braces:

1

<img src={user.avatarUrl} alt={user.name} width={64} />

Children

Elements can contain text, expressions, or other elements as children:

1
2
3
4
5

<ul>
  {items.map(item => (
    <li key={item.id}>{item.label}</li>
  ))}
</ul>

Fragments

When you need to return multiple sibling elements without a wrapper, JSX fragments use empty tags:

1
2
3
4
5
6
7

return (
  <>
    <Header />
    <Main />
    <Footer />
  </>
);

Spread Attributes

JSX supports object spread for props:

1

<Button {...buttonProps} disabled />

How JSX Compiles

A snippet like:

1

const element = <Greeting name="World" />;

is transformed by Babel or tsc into something like:

1
2
3
4
5
6

// Classic transform
const element = React.createElement(Greeting, { name: "World" });

// Automatic (React 17+) transform
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx(Greeting, { name: "World" });

The transform itself is configurable. The TypeScript compiler exposes options such as react, react-jsx, react-jsxdev, and preserve via the jsx setting in tsconfig.json, and tools like esbuild, SWC, and Bun all implement their own fast JSX transforms.

Evolution

Several milestones have shaped JSX over the years:

• Babel as the universal transpiler: After Babel emerged in 2015, JSX support became broadly available and standardized across tooling.
• TypeScript adoption (TSX): TypeScript’s .tsx file extension brought static typing to JSX, including typed props, generic components, and type-checked children.
• Fragments and improved diagnostics: React 16 era brought fragments, error boundaries, and better JSX-related error messages.
• The new JSX transform (2020): React 17 introduced an automatic runtime so files no longer need import React from "react" just to use JSX — a quiet but widely felt improvement.
• Server Components and the React Compiler: Recent React versions push more work to build time and the server, with JSX continuing to be the source format.

JSX Beyond React

JSX is no longer just a React technology:

• Preact uses JSX with a tiny React-compatible runtime.
• SolidJS compiles JSX into highly optimized fine-grained reactive code rather than a virtual DOM diff.
• Hyperapp, Inferno, and similar libraries use JSX with their own runtimes.
• MDX combines Markdown and JSX so authors can embed components inside prose.
• Vue supports JSX as an alternative to its template syntax for users who prefer it.

This portability is possible precisely because JSX defines only syntax — each library plugs in its own element factory.

Tooling and Ecosystem

JSX has world-class tooling, largely inherited from the broader JavaScript ecosystem:

• Compilers: Babel, TypeScript, SWC, esbuild, Bun, and others all transform JSX.
• Linters and formatters: ESLint with eslint-plugin-react, plus Prettier, understand JSX deeply.
• Editors: VS Code, WebStorm, and others provide rich JSX support — autocomplete, refactoring, and inline type checking via TSX.
• Frameworks: Next.js, Remix, Gatsby, Astro, Expo (for React Native), and many others build on JSX.

Current Relevance

JSX is one of the dominant ways to author user interfaces on the web. With React continuing to be one of the most widely used UI libraries, and with React Native extending its reach to mobile, JSX has become a de facto lingua franca for component-based UI development. Even competing reactive libraries have largely adopted JSX rather than invent their own template languages.

The combination of JSX with TypeScript (TSX) is now standard in many large codebases, providing a typed, declarative way to describe UIs that scales from small widgets to applications with millions of lines of code.

Why It Matters

JSX matters because it reframed how front-end developers think about UI:

• It collapsed the artificial wall between markup and logic, making components — not files — the unit of composition.
• It demonstrated that a small syntax extension over an existing language could have a profound effect on developer experience, without requiring a new runtime.
• It seeded an entire generation of component frameworks and tooling, from React Native to MDX to Server Components.

For a “syntax extension” with no runtime of its own, JSX has had an outsized influence on the practice of modern software development.