JSX (JavaScript XML)

JSX (JavaScript XML) is a syntax extension to JavaScript that allows HTML-like markup to be written directly inside JavaScript code. JSX was popularised by React and is now widely used in other frameworks (Solid, Preact, Stencil) and by Vue (optionally), even though Vue's default is single-file components.

How it works

JSX is not executed by browsers. A compiler (Babel, TypeScript, esbuild, SWC) transforms JSX into plain JavaScript function calls. <div className="x">hi</div> typically compiles to React.createElement('div', { className: 'x' }, 'hi'), or with the modern "automatic" runtime, to jsx('div', { className: 'x', children: 'hi' }).

Key conventions

• className not class. Because class is a reserved word in JavaScript.
• camelCase event handlers. onClick, onChange, onSubmit.
• Expressions in braces. {value} embeds a JavaScript expression.
• Children. Anything between the opening and closing tags becomes the children prop.
• Fragment shorthand. <>...</> groups elements without an extra DOM node.

Variants

• TSX. JSX inside TypeScript files (.tsx).
• MDX. Markdown + JSX, used for documentation and content sites.
• Vue JSX. Optional JSX syntax in Vue, useful for highly dynamic component composition.