🧩

JSX

BasicsThe React syntax for declaring UI structure inside JavaScript

JSX is the syntax React uses to describe UI structure inside JavaScript. Browsers do not read it directly. Build tools transform it into the object structure React uses during rendering.

▶Architecture Diagram

🔍 Structure

📦State / Props

🧠JS Expressions

🧩JSX

🧱React Element

🖼️Rendered UI

Dashed line animations indicate the flow direction of data or requests

Why do you need it?

If you build UI only with raw DOM APIs, the structure becomes hard to read. If you build it with string templates, data substitution and conditional layout quickly become fragile. As screens become more dynamic, teams need one place where structure and values stay connected.

Why did this approach emerge?

Early frontend code often separated templates from JavaScript because that looked cleaner at first. But interactive applications made markup depend heavily on conditions, loops, and local values. React leaned into that pressure and treated UI structure as something that belongs inside JavaScript, with JSX as its writing style.

How does it work inside?

When a component runs, JSX evaluates into a tree description of the UI. Tag-like syntax describes elements, and expressions inside curly braces calculate the values placed into that structure. React then uses this result as the input for rendering.

In Code

Combining tags and expressions

<Button
  disabled={isSaving}
  variant={isPrimary ? "primary" : "secondary"}
>
  {label}
</Button>

JSX keeps tag-like structure, props, and embedded expressions in one place so the UI shape and the values driving it stay readable together, even when the markup spans several lines.

Choosing different branches inline

{isLoggedIn ? (
  <Dashboard>
    <RecentActivity items={items} />
  </Dashboard>
) : (
  <LoginScreen
    title="Log in again"
    onSubmit={handleLogin}
  />
)}

Because conditions live inside the JSX flow, you can read which UI tree appears for each state directly in the render path.

What is it often confused with?

JSX and components appear together, but they are not the same thing. JSX is the syntax for writing UI. A component is the reusable unit that returns JSX.

Commonly Compared Concepts

🧱

Component

React's basic unit for dividing UI into isolated responsibilities

JSX is the syntax for writing UI, while a component is the reusable unit that returns it. Syntax and design unit are different concerns.

When should you use it?

In practice, almost all React UI code is written with JSX because most screens depend on state and props. But when conditions and calculations become too dense inline, it is usually a sign to extract a smaller component or move logic just above the return.

Writing component markup close to the logic that drives itBranching UI based on state in the same render flowRendering lists by mapping arrays into UI itemsComposing parent and child components naturally