How much React do you already have?

2. B1

   Project setup & JSXJSX is not HTML and it is not a template language — it is a function call wearing a costume.
4. B2

   Thinking in ReactTurning a picture into a component tree — the step that happens before you type anything.
6. B3

   Components & compositionA component is a function that takes data and returns a description of a screen.
8. B4

   PropsData flows down. A component can read its props and must never write to them.
10. B5

    State with useStateState is memory between renders — and setting it is a request, not an assignment.
12. B6

    Events & conditional renderingPass the function, do not call it — and know why && puts a zero on your page.
14. B7

    Lists with .map() and keysA key is not for you and it is not for performance — it tells React which item is which.
16. B8

    Controlled formsThe input shows what state says, and typing asks state to change.
18. B9

    useEffect basicsFor synchronising with something outside React — and most of the time you do not need it.
20. B10

    Lifting state up & basic stylingWhen two components need the same value, it belongs to the one above both of them.
22. B11

    Guided project: a task boardEvery beginner chapter, in one app built end to end.

Checkpointyou can build a small app (forms, a list, a fetch call) from a blank Vite project without copying a tutorial.

2. I1

   useRefA box that survives renders and does not cause them.
4. I2

   Context APIA way to skip the middle layers — not a state manager, and not free.
6. I3

   useReducerWhen the next state depends on the current state and on which thing happened.
8. I4

   Custom hooksSharing stateful logic between components — not sharing the state itself.
10. I5

    Effects in depthStale closures, the dependency array as a contract, and the effects that should not exist.
12. I6

    React RouterThe URL is state your users can bookmark, share and go back to.
14. I7

    State architectureMost React problems are state in the wrong place, in the wrong shape, or duplicated.
16. I8

    Memoisationmemo, useMemo and useCallback are a cache — and a cache you did not measure is a cost.
18. I9

    Error boundaries, portals & keys in depthContaining a crash, escaping the DOM tree, and using keys on purpose.
20. I10

    Data fetching patternsEvery bug in hand-rolled fetching is one of five, and they are all solved problems.
22. I13

    Auth in ReactProtected routes, token refresh, and the redirect that sends people back where they were.
24. I11

    Forms at scaleWhere hand-rolled state stops paying, and what a form library actually buys you.
26. I12

    State management librariesWhat a store gives you that context cannot: selectors.
28. I14

    Server state with TanStack QueryTreat API data as a cache you do not own, and most of your state problems disappear.
30. I15

    Testing ReactTest what a user can do. A test that breaks on a refactor was protecting the wrong thing.
32. I16

    TypeScript with ReactProps are a function's parameters, so typing a component is typing a function.
34. I17

    Animation and transitionsCSS first, a library when you need interruption, and the one case React makes hard.
36. I18

    End-to-end testingThe tests that run the real app in a real browser — and why you want few of them.
38. I19

    InternationalisationTranslating strings is the easy third. Plurals, formats and layout direction are the rest.
40. I20

    File uploadsA file input works without any of your code. Progress, drag and drop and large files are what you add.
42. I21

    Real-time UIPolling, Server-Sent Events or a WebSocket: choose the smallest thing that works, then handle the connection dropping.
44. I22

    shadcn/uiNot a component library you install, but components whose source you copy into your project and own.

Checkpointyou can build a routed, tested app with a real data-fetching library and explain every re-render in it.

2. A1

   Reconciliation & FiberRender is a pure, interruptible calculation. Commit is a synchronous mutation. Everything follows from that split.
4. A2

   Concurrent featuresTelling React which updates can wait — so the urgent one never queues behind them.
6. A3

   Suspense & code splittingDeclaring where a loading state lives, instead of threading one through every component.
8. A4

   Server ComponentsComponents that run once, on the server, and ship no JavaScript at all.
10. A5

    Server ActionsA function that runs on the server, called from the client, with no API route in between.
12. A6

    The use() hookReading a promise or a context during render — and the only hook that breaks the rules.
14. A7

    Rendering strategiesWhere the HTML is produced, and when — the decision that shapes everything downstream.
16. A8

    Effect timingFour hooks that all run 'after render', at four different moments.
18. A9

    useSyncExternalStoreThe correct way to read state that lives outside React.
20. A10

    Refs in depthForwarding, imperative handles, and integrating libraries that own their own DOM.
22. A11

    Advanced component patternsThe four shapes behind every component library you have imported.
24. A12

    Performance workMeasure, find the actual cost, fix the structure. Memoisation is the last step, not the first.
26. A13

    AccessibilitySemantics first, keyboard second, ARIA last — and focus management is the part React makes harder.
28. A14

    Design systemsConstraints that make the common thing easy and the inconsistent thing hard.
30. A15

    Advanced TypeScript with ReactMaking the wrong call fail to compile, rather than fail in review.
32. A16

    Architecture at scaleOrganising by feature, drawing boundaries, and the decisions that are hard to reverse.
34. A17

    Custom renderersReact is not a DOM library. The DOM is one target among several.
36. A18

    Migrating and upgradingNobody rewrites a working application. The skill is moving it while it keeps shipping.
38. A19

    Debugging in productionThe bug is on someone else's device, on a network you cannot reproduce.
40. A20

    Reviewing React, and knowing when not to use itAt this level you are judged on what you notice in someone else's code, and on what you argue against.
42. A21

    State machines and XStateWhen a screen has modes, list the modes and the events each one accepts, instead of guessing from booleans.
44. A22

    Feature flagsDeploying code and releasing it are different decisions, and a flag is what separates them.
46. A23

    React interview bankForty-six questions split by level, and twenty output drills.

Checkpointyou can profile a slow tree in React DevTools, explain the client/server component boundary, and defend a component-library API with tradeoffs.