Components & JSX

Everything in React is a component. A component is a reusable piece of UI that manages its own structure and logic. In this lesson, you'll learn how to create components and write JSX.

What Is a Component?

A React component is a JavaScript function that returns markup. Components let you split your UI into independent, reusable pieces.

function Greeting() {
  return <h1>Hello, world!</h1>;
}

That's it — a function that returns some JSX. React calls this function and renders whatever it returns to the screen.

JSX Is Not HTML

JSX looks like HTML, but it's actually syntactic sugar for JavaScript. The compiler transforms JSX into React.createElement() calls under the hood. There are a few key differences from HTML:

• Use className instead of class
• Use htmlFor instead of for
• Self-closing tags must end with /> (e.g., <img />, <input />)
• All attribute names are camelCase (onClick, tabIndex)

function UserCard() {
  return (
    <div className="card">
      <img src="/avatar.png" alt="User avatar" />
      <label htmlFor="username">Name</label>
      <input id="username" type="text" />
    </div>
  );
}

Embedding JavaScript in JSX

Use curly braces {} to embed any JavaScript expression inside JSX:

function ProfileHeader({ name }: { name: string }) {
  const joinDate = new Date().getFullYear();

  return (
    <header>
      <h1>{name.toUpperCase()}</h1>
      <p>Member since {joinDate}</p>
      <p>{2 + 2} items in cart</p>
    </header>
  );
}

You can use expressions (values, function calls, ternaries) but not statements (if/else blocks, for loops) directly inside {}.

Conditional Rendering

Since you can't use if statements inside JSX, use ternaries or logical &&:

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

function Notification({ count }: { count: number }) {
  return (
    <div>
      <h2>Messages</h2>
      {count > 0 && <span className="badge">{count}</span>}
    </div>
  );
}

Rendering Lists

Use .map() to render arrays. Always provide a unique key prop so React can track which items changed:

function TaskList({ tasks }: { tasks: { id: number; text: string }[] }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

Never use the array index as a key if items can be reordered or deleted — use a stable identifier.

Composition

Components can render other components. This is composition, and it's how you build complex UIs from simple building blocks:

function Avatar({ src, alt }: { src: string; alt: string }) {
  return <img className="w-12 h-12 rounded-full" src={src} alt={alt} />;
}

function UserInfo({ name, avatarUrl }: { name: string; avatarUrl: string }) {
  return (
    <div className="flex items-center gap-3">
      <Avatar src={avatarUrl} alt={name} />
      <span className="font-medium">{name}</span>
    </div>
  );
}

function UserList({ users }: { users: { id: string; name: string; avatar: string }[] }) {
  return (
    <div className="space-y-4">
      {users.map((user) => (
        <UserInfo key={user.id} name={user.name} avatarUrl={user.avatar} />
      ))}
    </div>
  );
}

Each component has one job. Avatar handles the image, UserInfo handles the layout, and UserList handles the list. This makes every piece easy to test, reuse, and modify.

Fragments

When a component needs to return multiple elements without an extra wrapper <div>, use a fragment:

function InfoPair({ label, value }: { label: string; value: string }) {
  return (
    <>
      <dt className="font-bold">{label}</dt>
      <dd>{value}</dd>
    </>
  );
}

Summary

• A React component is a function that returns JSX.
• JSX is JavaScript, not HTML — use className, camelCase attributes, and self-closing tags.
• Embed dynamic values with {}.
• Use ternaries and && for conditional rendering.
• Use .map() with a key prop for lists.
• Compose small components to build complex UIs.