UI made of LEGO bricks

1Your first component

// a component is a function that returns UI (JSX)
function Welcome() {
  return <h2>Hello from a component!</h2>;
}

// use it like an HTML tag:
<Welcome />

2Components use components

Small pieces combine into bigger ones. This is the whole game — an app is a tree of components:

function Note() {
  return <li>Buy milk</li>;
}

function NoteList() {
  return (
    <ul>
      <Note />
      <Note />
      <Note />
    </ul>
  );
}

function App() {
  return (
    <div>
      <h2>My Notes</h2>
      <NoteList />
    </div>
  );
}

3Why split into components?

• Reuse — write <Note /> once, use it a hundred times.
• Readability — <Header /> <NoteList /> <Footer /> reads like a table of contents.
• Isolation — a bug in Note lives in one small file, not tangled through the whole page.