cf.completefrontend
THE REACT FIELD GUIDE

React

The complete path through React: from your first component and JSX, through state, hooks, and effects, to loading data with Suspense, performance, React on the server, and how React works under the hood. Written for learners who already know JavaScript; each lesson pairs a short explanation with components you can run and change.

89 of 89 lessons available20 modules10 stagesBeginner to expert
Try React in the code editor Solve React problems, with tests Practice React interview questions
Start hereLesson 1.1

Why React?

The problem React solves: keeping the screen in sync with your data, without touching the DOM by hand.

Start the first lesson View in learning path
Welcome to React18 min + experiments

// What you’ll learn

  • UI as a function of data
  • Imperative DOM code vs declarative UI
  • Components you can reuse
  • What React is and isn't

Your progress

View detailed stats
0%completed
0 of 89 lessons
day streak
0
days this week
0
stages done
0/10

Recent activity

View all

Lessons you open and finish, and your quiz scores, show up here.

Next up for you

Quick actions

Recommended for you Based on your progress

The learning path

89 of 89 available

10 stages, in order. Each one builds on the last, from your first component to how React renders and updates the page. Jump to a stage, or search for any topic.

  1. STAGE 1 · BEGINNERGetting started1 module · 5 lessons
  2. STAGE 2 · BEGINNERDescribing the UI2 modules · 9 lessons
  3. STAGE 3 · BEGINNERAdding interactivity1 module · 7 lessons
  4. STAGE 4 · INTERMEDIATEManaging state3 modules · 11 lessons
  5. STAGE 5 · INTERMEDIATERefs, effects and custom hooks3 modules · 11 lessons
  6. STAGE 6 · INTERMEDIATEData, Suspense and concurrency2 modules · 9 lessons
  7. STAGE 7 · ADVANCEDPerformance1 module · 5 lessons
  8. STAGE 8 · ADVANCEDPatterns and the ecosystem2 modules · 9 lessons
  9. STAGE 9 · ADVANCEDReact on the server2 modules · 7 lessons
  10. STAGE 10 · EXPERTUnder the hood3 modules · 16 lessons

89 lessons in 10 stages and 20 modules.

Stage 1 Beginner

Getting started

What React is for, the JavaScript it builds on, a first look at how it works, and your first app.

1 module · 5 lessons

  1. 5 lessons · 1 h 38 min

    Module 1: Welcome to React

    Why React exists, what you need to know first, and how to start a project.

    1. 1.1Why React?18 min
    2. 1.2The JavaScript you need for React20 min
    3. 1.3How React works: a first look18 min
    4. 1.4Setting up a React project20 min
    5. 1.5Your first React app22 min

Stage 2 Beginner

Describing the UI

Components, JSX, props, conditions and lists: how to describe what the screen should show.

2 modules · 9 lessons

  1. 4 lessons · 1 h 27 min

    Module 2: Components and JSX

    Write components, describe markup with JSX, and put JavaScript inside it.

    1. 2.1Your first component20 min
    2. 2.2Writing markup with JSX22 min
    3. 2.3JavaScript in JSX with curly braces20 min
    4. 2.4Passing props to a component25 min
  2. 5 lessons · 1 h 52 min

    Module 3: Conditions, lists and purity

    Show different things in different cases, render lists, and keep rendering predictable.

    1. 3.1Conditional rendering22 min
    2. 3.2Rendering lists24 min
    3. 3.3Keeping components pure22 min
    4. 3.4Your UI as a tree20 min
    5. 3.5Styling components24 min

Stage 3 Beginner

Adding interactivity

Events, state, and how React re-renders: the core of every interactive screen.

1 module · 7 lessons

  1. 7 lessons · 2 h 46 min

    Module 4: Events and state

    Respond to the user and remember things between renders.

    1. 4.1Responding to events24 min
    2. 4.2State: a component's memory24 min
    3. 4.3Render and commit26 min
    4. 4.4State as a snapshot20 min
    5. 4.5Queueing a series of state updates22 min
    6. 4.6Updating objects in state24 min
    7. 4.7Updating arrays in state26 min

Stage 4 Intermediate

Managing state

Structure state well, share it between components, and scale it up with reducers and context.

3 modules · 11 lessons

  1. 4 lessons · 1 h 38 min

    Module 5: Structuring and sharing state

    Decide what goes in state, where it lives, and when it is kept or reset.

    1. 5.1Reacting to input with state24 min
    2. 5.2Choosing the state structure26 min
    3. 5.3Sharing state between components24 min
    4. 5.4Preserving and resetting state24 min
  2. 4 lessons · 1 h 46 min

    Module 6: Reducers and context

    Move complex updates into a reducer and pass data deep without threading props.

    1. 6.1Extracting state logic into a reducer26 min
    2. 6.2Passing data deeply with context26 min
    3. 6.3Scaling up with a reducer and context26 min
    4. 6.4Thinking in React28 min
  3. 3 lessons · 1 h 26 min

    Module 7: Forms

    Inputs, validation, and React 19's form actions.

    1. 7.1Forms and inputs30 min
    2. 7.2Form actions28 min
    3. 7.3Optimistic updates28 min

Stage 5 Intermediate

Refs, effects and custom hooks

Step outside React's data flow when you need to: refs, the DOM, effects, and hooks of your own.

3 modules · 11 lessons

  1. 2 lessons · 54 min

    Module 8: Refs

    Remember values without re-rendering, and reach the DOM when you need to.

    1. 8.1Referencing values with refs26 min
    2. 8.2Manipulating the DOM with refs28 min
  2. 6 lessons · 2 h 55 min

    Module 9: Effects

    Synchronize components with things outside React, and avoid effects you don't need.

    1. 9.1Synchronizing with effects30 min
    2. 9.2You might not need an effect30 min
    3. 9.3The lifecycle of an effect28 min
    4. 9.4Separating events from effects30 min
    5. 9.5Removing effect dependencies32 min
    6. 9.6Layout effects and timing25 min
  3. 3 lessons · 1 h 31 min

    Module 10: Custom hooks

    Hook rules, reusable logic, and subscribing to outside data.

    1. 10.1The rules of hooks25 min
    2. 10.2Reusing logic with custom hooks32 min
    3. 10.3Subscribing to external stores34 min

Stage 6 Intermediate

Data, Suspense and concurrency

Load data, show loading and error states, and keep the UI responsive while React works.

2 modules · 9 lessons

  1. 5 lessons · 2 h 37 min

    Module 11: Loading data

    Fetch data, wait for it with Suspense, and handle errors.

    1. 11.1Fetching data32 min
    2. 11.2Suspense32 min
    3. 11.3The use API28 min
    4. 11.4Error boundaries30 min
    5. 11.5Data fetching libraries35 min
  2. 4 lessons · 2 h 4 min

    Module 12: Concurrent features

    Keep typing and clicking fast while slow updates happen in the background.

    1. 12.1Transitions34 min
    2. 12.2Deferred values30 min
    3. 12.3Hiding and pre-rendering with Activity28 min
    4. 12.4View transitions32 min

Stage 7 Advanced

Performance

Know when React re-renders, measure before optimizing, and let the compiler do the memoizing.

1 module · 5 lessons

  1. 5 lessons · 2 h 42 min

    Module 13: Rendering performance

    Re-renders, memoization, the React Compiler, and the profiler.

    1. 13.1When React re-renders30 min
    2. 13.2memo, useMemo and useCallback32 min
    3. 13.3The React Compiler34 min
    4. 13.4Profiling React apps32 min
    5. 13.5Performance patterns34 min

Stage 8 Advanced

Patterns and the ecosystem

Component patterns, accessibility, and the tools real React apps are built with.

2 modules · 9 lessons

  1. 4 lessons · 2 h 16 min

    Module 14: Component patterns

    Compose components well, render outside the tree, build accessible UI, and read older React code.

    1. 14.1Component composition32 min
    2. 14.2Portals34 min
    3. 14.3Accessible React components34 min
    4. 14.4Class components and older patterns36 min
  2. 5 lessons · 2 h 52 min

    Module 15: The React ecosystem

    Routing, state libraries, project structure, testing, and TypeScript in real React apps.

    1. 15.1Routing35 min
    2. 15.2State management libraries35 min
    3. 15.3Structuring a React project30 min
    4. 15.4Testing React components38 min
    5. 15.5React with TypeScript34 min

Stage 9 Advanced

React on the server

Server rendering, hydration, streaming, Server Components, and what frameworks add.

2 modules · 7 lessons

  1. 4 lessons · 2 h 16 min

    Module 16: Server rendering

    Render on the server, hydrate in the browser, and stream HTML as it's ready.

    1. 16.1Rendering strategies36 min
    2. 16.2Server rendering and hydration35 min
    3. 16.3Streaming server rendering35 min
    4. 16.4Metadata, stylesheets and resource hints30 min
  2. 3 lessons · 1 h 45 min

    Module 17: Server Components

    Components that run only on the server, and functions the client can call.

    1. 17.1Server Components35 min
    2. 17.2Server Functions38 min
    3. 17.3React frameworks32 min

Stage 10 Expert

Under the hood

How React really works, read from its source code on GitHub: elements, fibers, the work loop, hooks, lanes, and the scheduler.

3 modules · 16 lessons

  1. 3 lessons · 1 h 33 min

    Module 18: Elements and fibers

    Find your way around the React repository, and meet the data structures everything else is built on.

    1. 18.1A tour of the React repository30 min
    2. 18.2React elements and the JSX runtime28 min
    3. 18.3Fiber: React's unit of work35 min
  2. 5 lessons · 3 h

    Module 19: Rendering and committing

    Follow an update from setState to the DOM through ReactFiberWorkLoop, beginWork, completeWork and the commit phase.

    1. 19.1The work loop40 min
    2. 19.2Reconciliation and the diffing algorithm36 min
    3. 19.3The commit phase38 min
    4. 19.4How hooks work inside32 min
    5. 19.5What setState really does34 min
  3. 8 lessons · 5 h 28 min

    Module 20: Scheduling, concurrency and beyond

    Lanes, the scheduler, the event system, hydration, Server Components and the compiler, from the inside.

    1. 20.1Lanes: how React prioritizes updates38 min
    2. 20.2The scheduler package36 min
    3. 20.3Concurrent rendering, Suspense and transitions inside42 min
    4. 20.4React's event system40 min
    5. 20.5Hydration inside38 min
    6. 20.6Server Components inside: the Flight protocol42 min
    7. 20.7How the React Compiler works42 min
    8. 20.8Build your own tiny React50 min