JSX and Components

JSX describes interface structure inside JavaScript. Components turn that structure into reusable pieces that can be nested into a complete React interface.

JSX describes the interface

JSX is a syntax extension for JavaScript. It looks similar to HTML, but a build tool transforms it into JavaScript that creates React elements. Browsers do not interpret JSX directly.

Structure

Tags describe which elements should appear and how they relate.

Data

Curly braces insert JavaScript values into that structure.

Reuse

Capitalized tags refer to components created by your application.

A JSX value can be stored in a variable and later rendered by React.
const heading = (
  <h1 className="page-title">
    Learn React
  </h1>
);
  • Close every tag.

    Write <img /> and <li>Item</li>. JSX requires an explicit closing tag or self-closing slash.

  • Return one root.

    Wrap sibling elements in a parent or a Fragment, written as <>...</>.

  • Use JavaScript-style property names.

    For example, use className instead of class and htmlFor instead of for.

A Fragment groups siblings without adding another DOM element.
function ProfileSummary() {
  return (
    <>
      <h2>Ada Lovelace</h2>
      <p>Mathematician and writer</p>
    </>
  );
}

JavaScript expressions in JSX

Inside JSX, curly braces switch from markup-like syntax back to JavaScript. Put an expression inside them: code that produces a value, such as a variable, property access, calculation, function call, or conditional expression.

Each pair of braces evaluates an expression and inserts its result.
const user = { name: "Mina", unread: 3 };

const greeting = (
  <section>
    <h2>Hello, {user.name.toUpperCase()}</h2>
    <p>You have {user.unread + 1} messages.</p>
    <img src={user.avatarUrl} alt={`Portrait of ${user.name}`} />
  </section>
);

Statements do not go directly inside JSX braces. An if, for, or variable declaration does not itself produce a value. Calculate what you need before the returned JSX, or use an expression such as condition ? a : b.

Object-valued attributes need one pair of braces for JavaScript and another for the object literal.
<div style={{ color: "tomato", padding: 12 }}>
  Warning
</div>

Components create reusable UI

A React component is a JavaScript function that returns JSX. Its name must begin with a capital letter so React can distinguish it from built-in tags such as <button> and <section>.

Define a component as a function, then render it with JSX tag syntax.
function Avatar() {
  return (
    <img
      src="/images/mina.png"
      alt="Mina smiling"
      width={80}
      height={80}
    />
  );
}

function App() {
  return <Avatar />;
}

Let React call component functions. Use <Avatar />, not Avatar(). JSX keeps component identity visible to React and lets React apply its rendering rules correctly.

Nesting components

Components can render both built-in elements and other components. A parent component combines smaller pieces, while each child owns a focused part of the interface.

ProfileCard nests two custom components, and App nests the completed card.
function Avatar() {
  return <img src="/images/mina.png" alt="Mina smiling" />;
}

function StatusBadge() {
  return <span>Online</span>;
}

function ProfileCard() {
  return (
    <article>
      <Avatar />
      <h2>Mina</h2>
      <StatusBadge />
    </article>
  );
}

function App() {
  return (
    <main>
      <ProfileCard />
    </main>
  );
}

Define components at the top level of a module, not inside another component. You can still nest their rendered output by placing one component's JSX tag inside another component's return value.

Check your understanding

  1. Why does a custom component name begin with a capital letter?
    Show answer

    React treats lowercase JSX tags as built-in HTML elements. A capitalized tag tells React to use the component function in scope.

  2. Can {if (ready) { ... }} appear directly inside JSX?
    Show answer

    No. if is a statement, not an expression. Run it before the JSX or use an expression such as {ready ? <Ready /> : <Loading />}.

  3. Does nesting <Avatar /> inside ProfileCard mean defining Avatar inside the ProfileCard function?
    Show answer

    No. Nesting describes the returned UI tree. Keep both component definitions at module scope, then render <Avatar /> from ProfileCard.