Lesson 10.0

Orientation

Artifact: A map of the chapter, the dashboard you'll build, and the Ch 9 ideas you'll lean on

1. The promise

You'll know what this chapter teaches, what you'll have built by the end, and which Ch 9 ideas the rest of the chapter assumes you still own.

2. The mental model

This unit is the table of contents on the inside cover of a thriller. It tells you the chapter titles without spoiling the plot. You leave with a map, not a summary.

React is a library, not a framework. It does one thing: it keeps the screen in sync with your data. Everything else (routing, data fetching, styling, builds) is somebody else's tool. This chapter teaches the one thing React does, and nothing more.

By the end you'll have built a six-component dashboard for a fictional reading tracker. It runs on your machine. It's typed end to end. It re-renders predictably when the data changes.

(SCREENSHOT: the finished dashboard from 10.assign — full window — six components labelled with numbered callouts)

The six components on screen above are:

  1. DashboardHeader — the app title and the user's name.
  2. StatsRow — three stat cards in a row.
  3. BookFilter — a dropdown to filter books by status.
  4. AddBookForm — a form that adds a new book.
  5. BookList — the list of books.
  6. EmptyState — shown when the filtered list is empty.

(DIAGRAM: chapter map for Ch 10 — flowchart — 14 unit boxes leading into the assignment box, grouped by theme: setup, components, props, state, rendering, forms, structure)

3. You do it, with me

There's nothing to install in this unit. Read along.

What this chapter teaches. After Ch 10 you can:

  1. Set up a Vite + React + TypeScript project from the command line.
  2. Write function components that return JSX.
  3. Pass typed props from parent to child.
  4. Use useState to hold component-local state.
  5. Predict when a component will re-render.
  6. Wire event handlers with the right React event types.
  7. Render lists with stable keys.
  8. Build controlled and uncontrolled inputs.
  9. Lift shared state up to the nearest common parent.
  10. Compose components instead of extending them.
  11. Organise components one per file in PascalCase.
  12. Ship a typed six-component dashboard.

The Ch 9 ideas this chapter leans on. Three of them:

  • Function types. Every component is a typed function. If function f(x: string): number doesn't read clearly to you, re-do unit 9.2.
  • Generics. React events use generics: React.MouseEvent<HTMLButtonElement>. If generics still feel hand-wavy, re-do unit 9.4.
  • Narrowing. Component state is often User | null until data loads. If if (user === null) return ... as a narrowing move feels new, re-do unit 9.6.

The two diagrams to carry through. You'll see these twice more in this chapter. They're the pictures the rest of the chapter assumes.

  • The component tree. A parent at the top, children below, data flowing down as props.
  • The re-render flow. A state change at the top, React calling component functions again, then patching the real DOM.

The work cadence. Each unit's code goes on a branch named ch10/<unit-slug>. The assignment is its own branch, ch10/assignment.

(SCREENSHOT: VSCode Source Control panel showing the ch10/orientation branch active — full window — branch indicator highlighted)

(SCREENSHOT: Chrome with React Developer Tools open on a running React app — Components tab visible — full window)

4. What you should be seeing

A clear picture in your head of three things:

  1. The end product. A six-component reading-tracker dashboard, typed, running locally.
  2. The chapter shape. Setup, then components, then props, then state, then rendering, then events, then forms, then structure, then the assignment.
  3. The Ch 9 ideas. Function types, generics, narrowing. All three carry forward.

If you can list those three things without scrolling back up, you're done with this unit.

5. Common stumbles

  • You skip this unit because "orientation sounds optional". Don't. The two diagrams here are the pictures the rest of the chapter assumes you carry.
  • You try to start Ch 10 without finishing Ch 9. The component signatures depend on Ch 9's vocabulary. Go back, finish 9, come here.
  • You read the unit list and panic at the length. Each unit is short. The shape repeats. By unit 10.4 you'll know what comes next before you click into it.

6. You should know

1/16
Next