React Learning Roadmap

Three Scrimba courses map onto the react.dev outline: the free Learn React (opens in a new tab) (review, 15.1 hours), Pro-only Advanced React (opens in a new tab) (review, 18.8 hours), and the free React 19 update (about 69 minutes). This roadmap lines each one up against the matching section of react.dev, quick start through escape hatches, so you read a concept and type it in the same sitting.

Rules of React: Components and hooks must be pure, same inputs, same output. Props and state are immutable, never mutate them directly. See react.dev/reference/rules for the full rules.

1. Quick start

Goal: build your first component, understand JSX, and handle basic state.

Concept	Official docs	Scrimba lesson
Thinking in React	Read docs	Intro to React (opens in a new tab)
Your first component	Read docs	Custom Components (opens in a new tab)
Import/export	Read docs	Organizing Components (opens in a new tab)
JSX	Read docs	JSX (opens in a new tab)

Section 1, Static pages (2.4 hrs, 29 scrims), builds a one-page ReactFacts site.

2. Describing the UI

Goal: master the fundamentals of rendering.

Props pass data between components: Props Part 1 (opens in a new tab)
Conditional rendering shows or hides elements based on state: Conditional Rendering (opens in a new tab)
Rendering lists displays array data with .map(): Mapping Components (opens in a new tab)

3. Adding interactivity

Goal: make your app respond to user input.

This is where state comes in, React's core concept. Section 3, React State (5.2 hrs, 58 scrims), is the longest: nine lessons on forms and the Chef Claude project on the Claude API.

Concept	Explanation	Scrimba lesson
Events	Handling clicks, form submits, etc.	Event Listeners (opens in a new tab)
State	Data that changes over time.	useState Hook (opens in a new tab)
State updates	Changing complex state objects.	Complex State (Objects) (opens in a new tab)

4. Managing state

Goal: handle complex data flows across your application.

As your app grows, passing props down gets unwieldy and you need better ways to manage state.

Passing data deeply avoids prop drilling with Context: Context API (opens in a new tab)
Scaling up with useReducer for complex state logic is covered in Advanced React (opens in a new tab) (review)

Advanced React's Reusability module (5 hrs, 68 scrims) builds a component library with compound components, context, and custom hooks.

5. Escape hatches

Goal: synchronize with external systems, APIs, the DOM.

This is mainly useEffect and useRef. Learn React section 4, Side Effects (108 min, 22 scrims), builds the Meme Generator before the two capstones, Tenzies and Assembly: Endgame.

Effects run code when components mount, update, or unmount: useEffect (opens in a new tab), Async / API Calls (opens in a new tab)

Advanced React (opens in a new tab) (review) picks up from here: 18.8 hours, six modules, 239 scrims on reusability, VanLife routing, performance, Supabase, auth, and TypeScript in React.

6. React 19 and what's next

Goal: learn the newest features, Server Components and Actions.

React 19 changes how you handle data mutations and server-client communication: Actions handle form submissions automatically, useActionState manages pending states, and Server Components render on the server for performance.

What's New in React 19 (opens in a new tab) (review) is free, about 69 minutes, 15 scrims: one form rebuilt with the action prop, useActionState, useOptimistic, and useFormStatus, then use(). Server Components are absent from the course; see the Next.js roadmap for those.

Master React with Scrimba Pro

Get access to Advanced React, React Router, and the full Frontend Career Path.

Use our partner link to get 20% off the Pro plan.

Claim 20% off Scrimba Pro

1. Quick start​

2. Describing the UI​

3. Adding interactivity​

4. Managing state​

5. Escape hatches​

6. React 19 and what's next​

Related Scrimba courses​