When will you use this?

You use this in every component you write from your first app to your tenth year on the job.

• Product pages, login forms, and todo lists all use components, props, and state.
• When a user types in a search box, React state holds the text and filters a list.

Real-world: reusable Toolliyo lesson card

Toolliyo course page shows 40 lessons. One LessonCard component renders title, duration, and progress ring — designers change the card once, all courses update.

Production-style code

function LessonCard({ title, durationMin, completed, onOpen }) {
  return (
    <button type="button" className="lesson-card" onClick={onOpen}>
      <span className="title">{title}</span>
      <span className="meta">{durationMin} min</span>
      {completed ? <span className="done">✓ Done</span> : <span className="todo">Start</span>}
    </button>
  );
}

function CourseOutline({ lessons, onSelect }) {
  return (
    <ul>
      {lessons.map(l => (
        <li key={l.id}>
          <LessonCard {...l} onOpen={() => onSelect(l.id)} />
        </li>
      ))}
    </ul>
  );
}

What happens in production: Component reuse is why Netflix, Toolliyo, and Amazon ship UI updates in days instead of rewriting HTML on every page.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Save" onClick={() => alert('Saved')} />
      <Button label="Cancel" onClick={() => alert('Cancelled')} />
    </div>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Button is defined once and used twice with different props.
• Each component should do one job well.

Do this on your computer

1. Create src/components/Greeting.jsx.
2. Export the function and import it in App.jsx.
3. Use in App.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Components are reusable UI functions. Name them with capital letters: UserCard not userCard. Compose small components into pages.

Common questions