HomeGroundworkReact

57 chapters · 3 levels · 162 exercises

React

Pick a level and you'll get these sections in the order that makes sense — from what JSX compiles to, through why it re-rendered, to the reconciler underneath and the server boundary above it.

Start Pick your level
0 / 57 read162 exercises4 h 32 min left

Up next

Setup & JSX

JSX is not HTML and it is not a template language — it is a function call wearing a costume.

5 min read2 exercises
Open this chapter

I've got

→ pick a run for tonight

Contents57 chapters

Every chapter, in reading order

Start at the top or jump to what you need. Tick a chapter once you have read it.

Beginner

0/12 read

Start with a component on the page. JSX, props, state and the handful of hooks that cover almost everything you'll build before anything else matters.

  1. B1Project setup & JSXJSX is not HTML and it is not a template language — it is a function call wearing a costume.5 min · 2 exercises
  2. B2Thinking in ReactTurning a picture into a component tree — the step that happens before you type anything.3 min · 3 exercises
  3. B3Components & compositionA component is a function that takes data and returns a description of a screen.4 min · 3 exercises
  4. B4PropsData flows down. A component can read its props and must never write to them.4 min · 3 exercises
  5. B5State with useStateState is memory between renders — and setting it is a request, not an assignment.5 min · 5 exercises
  6. B6Events & conditional renderingPass the function, do not call it — and know why && puts a zero on your page.4 min · 6 exercises
  7. B7Lists with .map() and keysA key is not for you and it is not for performance — it tells React which item is which.4 min · 5 exercises
  8. B8Controlled formsThe input shows what state says, and typing asks state to change.4 min · 5 exercises
  9. B9useEffect basicsFor synchronising with something outside React — and most of the time you do not need it.4 min · 5 exercises
  10. B10Lifting state up & basic stylingWhen two components need the same value, it belongs to the one above both of them.5 min · 2 exercises
  11. B11Guided project: a task boardEvery beginner chapter, in one app built end to end.4 min · 5 exercises
  12. ★The React cheat pageEverything worth having in front of you, on one page.4 min · 2 exercises

Intermediate

0/23 read

You know the hooks. Now learn the machinery underneath: refs, context, routing, memoisation, and the fetching patterns that don't race themselves.

  1. I1useRefA box that survives renders and does not cause them.3 min · 4 exercises
  2. I2Context APIA way to skip the middle layers — not a state manager, and not free.3 min · 5 exercises
  3. I3useReducerWhen the next state depends on the current state and on which thing happened.5 min · 4 exercises
  4. I4Custom hooksSharing stateful logic between components — not sharing the state itself.3 min · 6 exercises
  5. I5Effects in depthStale closures, the dependency array as a contract, and the effects that should not exist.5 min · 4 exercises
  6. I6React RouterThe URL is state your users can bookmark, share and go back to.6 min · 1 exercise
  7. I7State architectureMost React problems are state in the wrong place, in the wrong shape, or duplicated.4 min · 2 exercises
  8. I8Memoisationmemo, useMemo and useCallback are a cache — and a cache you did not measure is a cost.6 min · 4 exercises
  9. I9Error boundaries, portals & keys in depthContaining a crash, escaping the DOM tree, and using keys on purpose.3 min · 4 exercises
  10. I10Data fetching patternsEvery bug in hand-rolled fetching is one of five, and they are all solved problems.4 min · 5 exercises
  11. I11Forms at scaleWhere hand-rolled state stops paying, and what a form library actually buys you.3 min · 2 exercises
  12. I12State management librariesWhat a store gives you that context cannot: selectors.5 min · 2 exercises
  13. I13Auth in ReactProtected routes, token refresh, and the redirect that sends people back where they were.3 min · 2 exercises
  14. I14Server state with TanStack QueryTreat API data as a cache you do not own, and most of your state problems disappear.3 min · 4 exercises
  15. I15Testing ReactTest what a user can do. A test that breaks on a refactor was protecting the wrong thing.4 min · 2 exercises
  16. I16TypeScript with ReactProps are a function's parameters, so typing a component is typing a function.5 min · 2 exercises
  17. I17Animation and transitionsCSS first, a library when you need interruption, and the one case React makes hard.6 min · 2 exercises
  18. I18End-to-end testingThe tests that run the real app in a real browser — and why you want few of them.4 min · 1 exercise
  19. I19InternationalisationTranslating strings is the easy third. Plurals, formats and layout direction are the rest.5 min · 2 exercises
  20. I20File uploadsA file input works without any of your code. Progress, drag and drop and large files are what you add.5 min · 2 exercises
  21. I21Real-time UIPolling, Server-Sent Events or a WebSocket: choose the smallest thing that works, then handle the connection dropping.5 min · 2 exercises
  22. I22shadcn/uiNot a component library you install, but components whose source you copy into your project and own.5 min · 2 exercises
  23. ★The React cheat pageEverything worth having in front of you, on one page.4 min · 2 exercises

Advanced

0/24 read

Reconciliation, concurrent rendering, Server Components, and the patterns behind every component library you've ever imported.

  1. A1Reconciliation & FiberRender is a pure, interruptible calculation. Commit is a synchronous mutation. Everything follows from that split.7 min · 2 exercises
  2. A2Concurrent featuresTelling React which updates can wait — so the urgent one never queues behind them.6 min · 2 exercises
  3. A3Suspense & code splittingDeclaring where a loading state lives, instead of threading one through every component.6 min · 2 exercises
  4. A4Server ComponentsComponents that run once, on the server, and ship no JavaScript at all.7 min · 2 exercises
  5. A5Server ActionsA function that runs on the server, called from the client, with no API route in between.6 min · 2 exercises
  6. A6The use() hookReading a promise or a context during render — and the only hook that breaks the rules.5 min · 2 exercises
  7. A7Rendering strategiesWhere the HTML is produced, and when — the decision that shapes everything downstream.6 min · 2 exercises
  8. A8Effect timingFour hooks that all run 'after render', at four different moments.4 min · 2 exercises
  9. A9useSyncExternalStoreThe correct way to read state that lives outside React.5 min · 2 exercises
  10. A10Refs in depthForwarding, imperative handles, and integrating libraries that own their own DOM.4 min · 2 exercises
  11. A11Advanced component patternsThe four shapes behind every component library you have imported.3 min · 5 exercises
  12. A12Performance workMeasure, find the actual cost, fix the structure. Memoisation is the last step, not the first.4 min · 3 exercises
  13. A13AccessibilitySemantics first, keyboard second, ARIA last — and focus management is the part React makes harder.4 min · 4 exercises
  14. A14Design systemsConstraints that make the common thing easy and the inconsistent thing hard.3 min · 2 exercises
  15. A15Advanced TypeScript with ReactMaking the wrong call fail to compile, rather than fail in review.5 min · 2 exercises
  16. A16Architecture at scaleOrganising by feature, drawing boundaries, and the decisions that are hard to reverse.4 min · 2 exercises
  17. A17Custom renderersReact is not a DOM library. The DOM is one target among several.3 min · 2 exercises
  18. A18Migrating and upgradingNobody rewrites a working application. The skill is moving it while it keeps shipping.5 min · 2 exercises
  19. A19Debugging in productionThe bug is on someone else's device, on a network you cannot reproduce.4 min · 2 exercises
  20. A20Reviewing 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.6 min · 2 exercises
  21. A21State machines and XStateWhen a screen has modes, list the modes and the events each one accepts, instead of guessing from booleans.5 min · 2 exercises
  22. A22Feature flagsDeploying code and releasing it are different decisions, and a flag is what separates them.5 min · 2 exercises
  23. A23React interview bankForty-six questions split by level, and twenty output drills.20 min · 2 exercises
  24. ★The React cheat pageEverything worth having in front of you, on one page.4 min · 2 exercises

Practice

Practice React

Every exercise opens in the editor with tests you can run.

46 exercises at Beginner →66 exercises at Intermediate →54 exercises at Advanced →

Straight talk

Three honest notes

  • Hooks rules and stale closures are where most intermediate bugs actually live — they sit right after custom hooks, not off in a footnote.

  • Server Components, Server Actions and the use() hook are 2024+ React — they only make sense once rendering strategies (SSR/SSG/streaming) already do.

  • Accessibility and performance profiling aren't optional at the advanced tier — they're usually what a senior React review actually checks.