JSX and Components

A React 7,897 application is a tree of functions that return descriptions of a user interface. The descriptions are written in JSX, a syntax extension that puts markup-shaped expressions directly in JavaScript; the functions are called components. Everything later in this chapter — state, effects, context, routing, a Redux 3,824 store — exists to decide when a component runs and what data it sees when it does.

JSX is neither HTML nor a template language. It is sugar over ordinary function calls, so every rule it imposes follows from JavaScript rather than from the DOM: that is why an attribute is className, why a list item needs a key, and why two elements cannot sit side by side without a wrapper.

The examples here run React 19.3.0 from a CDN with Babel 41,624 compiling JSX in the browser, so each is one file you can paste into an editor and open; a Vite 25,978 project (Creating a Project with Vite) compiles ahead of time to the same output.

Subsections