React Components

What is a component?

A component is an isolated piece of UI plus behavior.

Types:

• Presentational components (UI-focused)
• Container components (data/logic-focused)
• Layout components (page structure)

Reusable component example

type CardProps = {
  title: string;
  children: React.ReactNode;
};

function Card({ title, children }: CardProps) {
  return (
    <section className="card">
      <h3>{title}</h3>
      <div>{children}</div>
    </section>
  );
}

Composition over inheritance

<Card title="Profile">
  <p>Frontend Engineer</p>
</Card>

Component design tips

• One responsibility per component
• Prefer composition and props
• Keep prop APIs simple and explicit
• Avoid over-abstraction early

Next, we will understand props and state in depth.