JSX & Components

JSX is the syntax extension that makes React code readable. It looks like HTML written inside JavaScript, but it is neither — it is a compile-time transformation that converts angle-bracket syntax into React.createElement calls. Understanding what JSX compiles to is the single clearest way to stop being surprised by React’s behavior.

What JSX Actually Is

When you write JSX, a build tool (Vite, Babel, the TypeScript compiler) rewrites it before the browser ever sees it. This transformation is called the “JSX transform.”

// What you write
function Greeting() {
  return <h1 className="title">Hello, world!</h1>;
}

// What the compiler produces (React 17+ automatic transform)
import { jsx as _jsx } from "react/jsx-runtime";
function Greeting() {
  return _jsx("h1", { className: "title", children: "Hello, world!" });
}

Two things to notice: class becomes className (because class is a reserved word in JavaScript), and the result is a plain function call that returns a JavaScript object — a React element — describing what should appear on screen.

Function Components

A React component is a function that accepts a single argument (called props) and returns JSX (or null).

function UserCard({ name, role }: { name: string; role: string }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

Component naming must start with a capital letter. React uses this to distinguish components from native HTML elements. <div> is a string; <UserCard> is a function React will call.

Fragments

Components can only return one root element. When you need siblings without a wrapping <div>, use a fragment.

function Meta() {
  return (
    <>
      <title>My App</title>
      <meta name="description" content="A great app" />
    </>
  );
}

<>...</> is shorthand for <React.Fragment>...</React.Fragment>. Use the long form when you need to pass a key prop (for lists).

Expressions in JSX

Curly braces {} let you drop any JavaScript expression into JSX. Statements (like if or for) don’t work directly — use ternaries or logical operators instead.

function StatusBadge({ isOnline }: { isOnline: boolean }) {
  return (
    <span className={isOnline ? "badge--green" : "badge--gray"}>
      {isOnline ? "Online" : "Offline"}
    </span>
  );
}

Self-Closing Tags

In JSX, any element without children must be self-closed. This applies to HTML void elements as well as components:

// Correct
<input type="text" />
<img src={url} alt="description" />
<MyComponent />

// Syntax error in JSX
<input type="text">

Component Tree

graph TD
  App --> Header
  App --> Main
  App --> Footer
  Main --> UserCard
  Main --> PostList
  PostList --> PostItem
  PostItem --> StatusBadge

Every React application is a tree of components. React renders from the root down, calling each component function to get its JSX, then recursively rendering the components within that JSX.

Further Learning

Search these terms to go deeper:

• “React JSX in depth react.dev” — the official explanation of how JSX transforms work and every JSX rule
• “React.createElement deep dive” — understanding the element object React produces
• “Josh W. Comeau joy of react components” — excellent visual explanations of the component model
• “TypeScript function component typing” — patterns for typing props with FC vs plain function signatures
• “React fragment key prop list” — when and why to use the long-form fragment syntax

JSX & Components

React lets you build UI out of reusable pieces called components, and you describe what they look like with JSX — HTML-looking code written right inside JavaScript. If you know HTML, JSX will feel familiar fast.

A component is just a function

A React component is a function that returns some JSX (the HTML-ish markup):

function UserCard({ name, role }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  )
}

Two must-know rules:

• Component names start with a capital letter (UserCard, not userCard) — that’s how React tells your components apart from plain HTML tags.
• Use className instead of class (because class is a reserved word in JavaScript).

Putting JavaScript inside JSX

Curly braces {} let you drop any JavaScript value into your markup:

function Greeting({ name, isOnline }) {
  return (
    <p>
      Hello, {name}! You are {isOnline ? 'online' : 'offline'}.
    </p>
  )
}

You can put variables, math, or a ternary (condition ? a : b) in the braces — but not full if/for statements.

Returning multiple things

A component must return one top element. If you need siblings without adding an extra <div>, wrap them in an empty <>...</> (a “fragment”):

return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
)

Self-close empty tags

Any tag with no children must close itself with />:

<input type="text" />
<img src={url} alt="photo" />
<UserCard />

Building with components

You build an app by nesting components inside each other, like Lego:

function App() {
  return (
    <div>
      <Header />
      <UserCard name="Alice" role="Admin" />
      <Footer />
    </div>
  )
}

In one sentence

A component is a capitalized function that returns JSX (HTML-like markup), where {} lets you insert JavaScript, className replaces class, and empty tags self-close with />.

Want to go deeper?

Switch to Expert mode above for how JSX compiles to React.createElement, the render tree, and TypeScript prop typing.