Building Components

Components are the building blocks of React apps. Think of them like LEGO pieces - small, reusable, and composable.

Function Components

The simplest way to create a component:

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

Component Rules

• Name starts with capital letter: Button, not button
• Return JSX: Must return exactly one root element
• Pure functions: Given the same inputs, always return the same output

Composition

Components can contain other components:

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

This is how you build complex UIs from simple pieces!

Try creating and composing components below: