JSX

XML-like syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript files. Compiles to function calls, so you can use it with React, Preact, Solid, or custom runtimes. Keeps rendering logic and markup colocated in the same place, making components easier to read and maintain than separate HTML and script files.

Originally introduced with React and now specified in an open ECMAScript extension. Most React codebases use it, and frameworks like Preact, Solid, and Inferno support it. JSX and React are separate: JSX is syntax only, while React is the rendering library. Babel, SWC, and esbuild all support transpilation. TypeScript includes built-in JSX support.

Key capabilities:

• HTML-like tags with stricter rules: single root element, closed tags, camelCase attributes
• JavaScript expressions in curly braces for dynamic values and logic
• Fragments for grouping without extra DOM nodes
• Custom pragma support to target different runtimes beyond React
• Widely supported by bundlers, linters, and editors

Frontend developers use JSX for component UIs in React, Preact, Solid, and similar libraries. Teams building design systems colocate markup with component logic instead of template strings or separate HTML. Works with Vite, webpack, Babel, and TypeScript. MDX extends it to embed JSX in Markdown for docs and content-driven sites.