🧱

Component

BasicsReact's basic unit for dividing UI into isolated responsibilities

A component is the basic unit React uses to build screens. It takes input through props, may keep local state, and returns JSX describing one responsibility in the interface.

▶Architecture Diagram

🔗 Relationship

🏠App

📌Header

📄Content

🔘Button

🌳Component Tree

Dashed line animations indicate the flow direction of data or requests

Why do you need it?

If an entire page is built as one large template or function, even small changes require reading too much unrelated context. Similar UI gets copied, responsibilities blur, and it becomes difficult to see which part of the screen owns which behavior.

Why did this approach emerge?

As web apps moved from mostly static pages to rich dashboards and interactive interfaces, teams needed a way to split UI into smaller pieces. React centered its model around the component tree so screens could be understood as compositions of isolated units.

How does it work inside?

A component typically runs as a function. It reads current props and state, calculates the UI it should show, and returns that result. Parent components place child components inside JSX, so React builds the whole screen as a tree of component relationships.

In Code

Splitting a screen into small named responsibilities

function PageHeader() {
  return (
    <header>
      <h1>Dashboard</h1>
      <button>Create new</button>
    </header>
  );
}

function ActivityList() {
  return <section>Recent activity list</section>;
}

export function DashboardPage() {
  return (
    <>
      <PageHeader />
      <ActivityList />
    </>
  );
}

Once the screen is split into named pieces, the code structure itself explains which responsibility each component owns.

Reusing the same component boundary with different content

function Section({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

export function SettingsPage() {
  return (
    <Section title="Notification settings">
      <NotificationForm />
    </Section>
  );
}

A component is not just copied JSX. It is a reusable responsibility boundary that can receive different inputs and child content.

What is it often confused with?

Components are not the same thing as JSX. JSX is the syntax used inside components. Components are the design boundary used to split, name, and reuse UI responsibilities.

Commonly Compared Concepts

🧩

JSX

The React syntax for declaring UI structure inside JavaScript

A component is a design unit for splitting UI, while JSX is the syntax used inside that unit to describe the structure.

When should you use it?

In practice, component boundaries are strongest when you can describe a component's job in one sentence. Once one component starts owning too many rules and flags, props tend to sprawl and render branches become difficult to maintain.

Building reusable buttons, cards, and form sectionsSplitting a page into header, list, and item responsibilitiesKeeping state and event logic close to the UI that uses itDefining clearer boundaries for team development