Component

Components are the LEGO bricks of modern web development. Every page you see is built from smaller, reusable pieces snapped together.

Why Components?

Without components, you'd copy-paste the same HTML for every button, card, and form on your site. With components:

• Write once, use everywhere — One button component used across 50 pages
• Consistency — Every button looks and behaves the same
• Maintenance — Change the component once, it updates everywhere
• Organization — Break complex UIs into manageable pieces

Component Anatomy

function ProductCard({ name, price, image }) {
  return (
    <div className="card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>${price}</p>
      <button>Add to Cart</button>
    </div>
  )
}

A component is just a function that returns UI.

Component Composition

Pages are built by nesting components:

Page
├── Header
│   ├── Logo
│   ├── Navigation
│   └── UserMenu
├── ProductGrid
│   ├── ProductCard
│   ├── ProductCard
│   └── ProductCard
└── Footer

Components and AI

Components are AI's bread and butter. Effective prompts:

• "Create a pricing table component with three tiers"
• "Build a user avatar component that shows initials when no image exists"
• "Make a notification toast component with success, error, and warning variants"

AI generates clean, reusable components — your job is describing what you need and reviewing the output.