React Introduction
What React is, the problem it solves, how it updates the screen, and how to write your very first component.
4 chapters1 code exercises6 quiz questions14 min
React Tutorials
Learn React step by step, from your first component to performance tuning and testing. Every tutorial is split into short chapters, has code you can edit and run in the browser, and finishes with a quiz so you can check what stuck.
Beginner
Start here if React is new to youLearn React from zero: what React is, how JSX works, how to build components, pass props, hold state, handle events, and render lists and forms.
JSX in React
How JSX works, how to put JavaScript values inside markup, how attributes differ from HTML, and how fragments let you return several elements.
4 chapters1 code exercises7 quiz questions14 min
Components and Props
Split a UI into components, pass data down with props, use children for composition, and understand why props are read only.
4 chapters1 code exercises7 quiz questions15 min
State with useState
Add memory to a component with useState, understand why updates are asynchronous and batched, and learn the rules for updating objects and arrays.
4 chapters2 code exercises8 quiz questions16 min
Events and Conditional Rendering
Handle clicks, keys and form submissions with React's synthetic events, then show and hide parts of the UI based on state.
4 chapters2 code exercises7 quiz questions14 min
Lists, Keys and Forms
Render collections with map, choose keys that will not bite you, and build controlled forms with validation and submission.
4 chapters1 code exercises8 quiz questions16 min
Intermediate
Hooks, effects and shared stateGo deeper into React with effects, refs, context, reducers, custom hooks and the composition patterns real applications are built from.
Side Effects with useEffect
Synchronise a component with the outside world: how effects run, what the dependency array really means, why cleanup matters, and when not to use an effect at all.
4 chapters1 code exercises8 quiz questions18 min
Refs with useRef
Hold values that survive renders without causing them, reach into DOM nodes when you must, and forward refs through your own components.
4 chapters1 code exercises7 quiz questions15 min
Context and Shared State
Stop threading props through layers that do not need them. Create a context, provide a value, consume it with useContext, and avoid the performance traps.
4 chapters1 code exercises7 quiz questions15 min
useReducer and Complex State
Move tangled state transitions into one reducer function, design clear actions, and know when a reducer beats several useState calls or a state library.
4 chapters1 code exercises8 quiz questions16 min
Custom Hooks
Extract stateful logic into functions you can reuse, learn the rules that make a function a hook, and build the handful of hooks every project ends up needing.
4 chapters1 code exercises7 quiz questions15 min
Component Patterns
The patterns experienced React developers reach for: composition, compound components, render props, higher order components, and the APIs that support them.
4 chapters1 code exercises7 quiz questions15 min
Advanced
Performance, concurrency and production concernsMaster memoization, Suspense and transitions, error boundaries, portals, TypeScript with React, and testing components the way users use them.
React Performance
Find out what is actually slow before optimising, then use memo, useMemo, useCallback and list virtualisation deliberately rather than by reflex.
4 chapters1 code exercises8 quiz questions18 min
Suspense and Transitions
Declare loading states with Suspense, keep the interface responsive with transitions and deferred values, and lazy load components without jank.
4 chapters1 code exercises8 quiz questions17 min
Error Boundaries
Stop one broken component taking down the whole app: write an error boundary, understand exactly what it can and cannot catch, and design sensible recovery.
4 chapters1 code exercises8 quiz questions14 min
Portals and Rendering Control
Render outside the DOM hierarchy with portals, build accessible modals, and understand what Strict Mode is really checking.
4 chapters1 code exercises8 quiz questions14 min
React with TypeScript
Type props, children, events, hooks and refs the way experienced React teams do, and learn which patterns to avoid.
4 chapters1 code exercises8 quiz questions16 min
Testing React Components
Write tests that survive refactors: query the way users do, simulate real interaction, handle async updates, and know what is worth mocking.
4 chapters1 code exercises8 quiz questions16 min