JSX. JSX is a syntax extension for JavaScript that allows developers to write HTML-like code directly within their JavaScript code. It is most famously associated with the React (JavaScript library) library, where it is used to declaratively describe user interface components. While JSX resembles a template language, it is compiled into standard JavaScript function calls, typically to React.createElement.

Overview

JSX provides a syntactic sugar for function calls that create DOM elements or React components, making the structure of a user interface more readable and writable. It was introduced by engineers at Facebook, including Jordan Walke, as part of the development of React (JavaScript library). The core idea is to blend the markup defining a component's structure with the logic that controls its behavior, a concept central to the component-based architecture of modern web development. This approach contrasts with traditional methods that separate HTML, CSS, and JavaScript into distinct files, a pattern often enforced by frameworks like Angular (web framework) in its earlier versions.

Syntax and features

The syntax of JSX is intentionally similar to HTML, allowing tags, attributes, and nested elements. However, it operates within JavaScript rules; for example, the `class` attribute is written as `className` to avoid conflicts with the JavaScript reserved word. Expressions can be embedded within curly braces, enabling dynamic content, as seen in constructs like `

Hello, {user.name}!

`. This embedding allows for the integration of JavaScript operators, function calls, and array methods like `map` to render lists. Under the hood, tools like Babel (transcompiler) or TypeScript transpile JSX into calls to a createElement-type function, transforming the declarative syntax into imperative JavaScript objects known as React elements.

Integration with React

JSX is not a requirement for using React (JavaScript library), but it is the overwhelmingly preferred and idiomatic way to write React components. The React library provides the runtime that interprets the JavaScript objects produced from JSX compilation. When a component's state or props change, React uses a virtual DOM diffing algorithm to efficiently update the actual DOM. Major companies like Netflix, Airbnb, and The New York Times have adopted this React and JSX paradigm for building their web applications. The introduction of React Hooks further enhanced the capability to use state and other React features within JSX-based function components.

Alternatives and related technologies

While dominant in the React (JavaScript library) ecosystem, other JavaScript frameworks employ different templating strategies. Vue.js uses a similar but distinct single-file component format with its own template syntax. Svelte (compiler) introduces a compile-time approach that also uses an HTML-like syntax but requires no virtual DOM. For developers preferring pure JavaScript, React offers the `React.createElement` API as a direct alternative to JSX. Other compile-to-JS languages, such as ReasonML (via ReasonReact) or ClojureScript (via Reagent (ClojureScript library)), offer their own syntaxes for defining user interface components that interoperate with the React runtime.

History and development

JSX was created internally at Facebook around 2013 during the development of React (JavaScript library), which was first deployed on the Facebook News Feed. Its public debut came with the open-sourcing of React at the JSConf US in May 2013. The syntax was inspired by earlier technologies like XHP, a PHP extension also developed at Facebook. The ECMAScript specification does not include JSX, so its support relies entirely on preprocessors like Babel (transcompiler) and TypeScript. Over time, its adoption has grown in tandem with React's dominance, influencing the design of tools in the wider JavaScript ecosystem, including build tools like Vite (software) and Next.js.

Category:JavaScript programming language family Category:React (JavaScript library)