Start here: the React learning roadmap
Quick answer: You are reading react.dev (or Next.js docs) and want hands-on reps in the same sitting. This roadmap maps each major docs area to specific Scrimba scrims—interactive screencasts where you edit the code in the player—so “read the concept” and “type it” stay connected.
We may earn a commission if you join Scrimba through our links.
This roadmap connects the official React documentation to Scrimba’s interactive lessons. Each block below matches a major docs area—quick start, describing UI, interactivity, state, escape hatches, and React 19—so you can read on react.dev and practice in the browser. Use it for React alone or alongside Next.js.
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.
Who This Is For
Learners following the React or Next.js roadmap.
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 |
| Your First Component | Read Docs | Custom Components |
| Import/Export | Read Docs | Organizing Components |
| JSX | Read Docs | JSX |
Learn React (Free)
FreeThe comprehensive free course that covers all these Quick Start topics and more.
View on Scrimba (opens in a new tab)2. Describing the UI
Goal: Master the fundamentals of rendering.
- Props: Learn how to pass data between components — Scrimba Lesson: Props Part 1
- Conditional Rendering: Show/hide elements based on state — Scrimba Lesson: Conditional Rendering
- Rendering Lists: Display data from arrays (using
.map()) — Scrimba Lesson: Mapping Components
3. Adding Interactivity
Goal: Make your app respond to user input.
This is where state comes in—React's most important concept.
| Concept | Explanation | Scrimba Lesson |
|---|---|---|
| Events | Handling clicks, form submits, etc. | Event Listeners |
| State | Data that changes over time. | useState Hook |
| State Updates | Changing complex state objects. | Complex State (Objects) |
4. Managing State
Goal: Handle complex data flows across your application.
As your app grows, you need better ways to manage state than just passing props down.
- Passing Data Deeply: Avoid "prop drilling" with Context — Scrimba Lesson: Context API
- Scaling Up: Manage complex state logic with
useReducer— covered in Advanced React
5. Escape Hatches
Goal: Synchronize with external systems (APIs, DOM).
This is primarily about useEffect and useRef.
- Effects: Run code when components mount/update/unmount — Scrimba Lesson: useEffect, Scrimba Lesson: Async / API Calls
Advanced React (Pro)
ProMaster useEffect, custom hooks, and performance optimization.
View on Scrimba (opens in a new tab)6. React 19 & The Future
Goal: Learn the newest features like Server Components and Actions.
React 19 introduces major changes to how we handle data mutations and server-client communication.
- Actions: Handle form submissions automatically.
useActionState: Manage pending states easily.- Server Components: Render components on the server for performance.
Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Related Scrimba Courses
- Learn React Course
- Advanced React Course
- Frontend Developer Path
- Practice React Hooks
- Practice React Projects
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.