Start Here: The React Learning Roadmap
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
Welcome to the unofficial companion guide to the React documentation.
The official React docs are excellent for reading about concepts, but Scrimba is the best place to practice them. This roadmap maps the official documentation structure to Scrimba's interactive lessons, so you can read a concept and then immediately write code to master it.
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.
- Conditional Rendering: Show/hide elements based on state.
- Rendering Lists: Display data from arrays (using
.map()).
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.
- 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.
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.
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.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.