# React Learning Roadmap > Markdown edition of https://scrimbaguide.tech/docs/learn-react/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/learn-react/ Last updated: 2026-09-23 Three Scrimba courses map onto the react.dev outline: the free [Learn React](https://scrimba.com/learn-react-c0e?via=u42d4986) ([review](https://scrimbaguide.tech/docs/courses/react/learn-react/), 15.1 hours), Pro-only [Advanced React](https://scrimba.com/advanced-react-c02h?via=u42d4986) ([review](https://scrimbaguide.tech/docs/courses/react/advanced-react/), 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](https://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](https://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](https://react.dev/learn/thinking-in-react) | [Intro to React](https://scrimba.com/learn/learnreact/intro-to-react-c0e?via=u42d4986) | | Your first component | [Read docs](https://react.dev/learn/your-first-component) | [Custom Components](https://scrimba.com/learn/learnreact/custom-components-c0b?via=u42d4986) | | Import/export | [Read docs](https://react.dev/learn/importing-and-exporting-components) | [Organizing Components](https://scrimba.com/learn/learnreact/organizing-components-c0d?via=u42d4986) | | JSX | [Read docs](https://react.dev/learn/writing-markup-with-jsx) | [JSX](https://scrimba.com/learn/learnreact/jsx-c0a?via=u42d4986) | 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](https://scrimba.com/learn/learnreact/props-part-1-c0f?via=u42d4986) - Conditional rendering shows or hides elements based on state: [Conditional Rendering](https://scrimba.com/learn/learnreact/conditional-rendering-%26%26-c010?via=u42d4986) - Rendering lists displays array data with `.map()`: [Mapping Components](https://scrimba.com/learn/learnreact/mapping-components-c012?via=u42d4986) ## 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](https://scrimba.com/learn/learnreact/event-listeners-c014?via=u42d4986) | | State | Data that changes over time. | [useState Hook](https://scrimba.com/learn/learnreact/usestate-array-destructuring-c016?via=u42d4986) | | State updates | Changing complex state objects. | [Complex State (Objects)](https://scrimba.com/learn/learnreact/complex-state-objects-c018?via=u42d4986) | ## 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](https://scrimba.com/learn/learnreact/context-provider-c020?via=u42d4986) - Scaling up with `useReducer` for complex state logic is covered in [Advanced React](https://scrimba.com/advanced-react-c02h?via=u42d4986) ([review](https://scrimbaguide.tech/docs/courses/react/advanced-react/)) 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](https://scrimba.com/learn/learnreact/useeffect-syntax-c022?via=u42d4986), [Async / API Calls](https://scrimba.com/learn/learnreact/async-javascript-c024?via=u42d4986) [Advanced React](https://scrimba.com/advanced-react-c02h?via=u42d4986) ([review](https://scrimbaguide.tech/docs/courses/react/advanced-react/)) 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](https://scrimba.com/whats-new-in-react-19-c03d?via=u42d4986) ([review](https://scrimbaguide.tech/docs/courses/react/whats-new-in-react-19/)) 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](https://scrimbaguide.tech/docs/learn-nextjs/) for those. ## Related Scrimba courses - [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) - [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/) - [What's New in React 19](https://scrimbaguide.tech/docs/courses/react/whats-new-in-react-19/) - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) - [Practice React Hooks](https://scrimbaguide.tech/docs/practice/practice-react-hooks/) - [Practice React Projects](https://scrimbaguide.tech/docs/practice/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. **[Claim 20% off Scrimba Pro](https://scrimba.com/our-pricing?via=u42d4986)** ### Related Guides - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) - [React Course Catalog](https://scrimbaguide.tech/docs/courses/react/) - [Scrimba React Learning Path](https://scrimbaguide.tech/blog/scrimba-react-learning-path/)