JSX

JSX is a syntax extension for JavaScript used primarily with React to describe user interfaces. It resembles HTML, but it is not HTML and is compiled into JavaScript expressions. This enables developers to write UI code in a declarative, hierarchical style that mirrors the rendered structure.

During compilation, tools such as Babel transform JSX into JavaScript calls that create element representations. In the classic setup, JSX converts to React.createElement calls; in modern configurations with the automatic runtime, the transformation can rely on a runtime that does not require a React import. The resulting code builds objects with a type, props, and children.

JSX supports embedding JavaScript expressions inside curly braces, allowing dynamic values, conditional rendering, and mapping over arrays. Attributes on JSX elements become properties of the corresponding element, and JSX supports spread attributes to merge props. Self-closing tags are allowed for empty elements, and nesting mirrors the desired UI structure.

There are important differences from HTML. Several attribute names differ, most notably className instead of class and htmlFor instead of for, to avoid conflicts with JavaScript keywords. JSX code is ultimately JavaScript, so it follows the language’s syntax rules and can include any valid JavaScript expressions.

Although JSX is closely associated with React, it is not exclusive to it and can be used with other libraries that support JSX, such as Preact. Tools and type systems, including TypeScript, provide typings for JSX elements. JSX code is typically transpiled and executed, and developers must consider security when rendering dynamic content.