Course 04 · Framework
React
Describe it once. Let it re-render.
Components, state and effects — the model behind most interfaces built today.
0 of 20 lessons finished — nothing yet
The syllabus
20 lessons,
in the order they build on each other.
Why React exists
The problem it solves, what it is not, and the one idea the rest depends on.
Starting a project
Vite, the file layout, how a component reaches the page, and the dev server.
JSX
Markup in JavaScript: expressions, attributes, fragments and the rules that differ from HTML.
Components and props
Writing a component, passing data down, children, and composition over configuration.
Conditional rendering
Showing things sometimes, without leaving a stray 0 on the page.
Lists and keys
Rendering arrays, choosing a key that is stable, filtering and empty states.
State
useState, updating from the previous value, and what belongs in state at all.
Events
Handlers, arguments, the synthetic event, and not calling the function too early.
Forms
Controlled inputs, a form object, validation and submitting.
Lifting state up
One owner for each piece of state, and children that only report events.
Effects
useEffect, dependencies, cleanup, and the many cases where you do not need one.
Fetching data
Loading and error states, cancelling, and why this gets moved to a library.
Refs
Reaching a DOM node, keeping a value between renders, and forwarding a ref.
Re-renders and memo
What actually causes a re-render, useMemo, useCallback, and measuring first.
useReducer
State with rules, actions, and when it beats several useState calls.
Context
Sharing state without threading props, and the re-render cost of doing it badly.
Custom hooks
Extracting stateful logic, the rules of hooks, and naming them so they read well.
Structuring an app
Folders, component size, shared UI, and where the logic should live.
Routing
Client-side routes, links, parameters and a not-found page.
Testing a component
Testing what the user sees, queries by role, and what is not worth testing.
Keep going
The other courses.
HTML
The document, the elements and the meaning behind them. Everything else on the web is layered on top of this.
CSS
Selectors, the box model, layout with flexbox and grid, and motion that has a reason to move.
JavaScript
Values, functions, the DOM, events and asynchronous work — written so you can debug it later.