React Roadmap
React is a JavaScript library, not a full framework, which means you build a mental model in layers: JSX and components first, then state and side effects, then routing, then state management at scale, then performance and testing. This roadmap lays that out in order so you know what to learn when, and why each piece matters before you move to the next. It is aimed at JavaScript-confident developers targeting frontend or full-stack roles. Plan on 3 to 5 months at around 10 hours a week once your JavaScript is solid.
Phase 1: JavaScript Prerequisites
Variables and Functions
let/const, arrow functions, and how scope works. React components are functions, so being fluent here is the baseline for everything that follows.
Array Methods
map, filter, and reduce. You render lists in React with map on almost every screen, so these stop being optional the moment you write your first component.
The DOM
How the browser represents a page as a tree of nodes. React abstracts the DOM away, but understanding what it's abstracting makes React's behaviour make sense instead of feeling like magic.
Async and Promises
async/await, fetch, and how JavaScript handles work that finishes later. Gaps here show up immediately when you load data from an API, which every real app does.
Phase 2: React Core
JSX
The syntax that lets you write markup inside JavaScript. It looks like HTML but it's JavaScript, and understanding that distinction prevents a whole class of beginner confusion.
Components
The unit React is built on. Break a UI into small, reusable function components, then compose them into a tree. This is the core mental model everything else hangs off.
Props
How data flows down from parent to child. Props are read-only, and understanding one-way data flow is what makes React apps predictable to reason about.
useState
Local component state and re-rendering. The moment your UI needs to change in response to a user, you reach for useState. Get this solid before touching anything else.
useEffect
Side effects: fetching data, subscriptions, and syncing with things outside React. The most misused hook, so learn when you actually need it and when you don't.
Phase 3: Routing and Data
React Router
Client-side routing so your app has multiple pages without full reloads. A UI that can't navigate is a demo, not an app; routing is where it starts feeling real.
Fetching Data
Loading data from a REST API with fetch or Axios, and handling loading and error states. Almost every real component displays data that came from somewhere else.
Forms and Inputs
Controlled inputs, form submission, and basic validation. Forms are where user data enters your app, and React's controlled-input pattern trips up a lot of beginners, so it's worth the time.
Phase 4: State Management
Lifting State and useReducer
Move state up to a shared parent, and use useReducer when state updates get complex. These built-in patterns handle more than beginners expect before you reach for a library.
Context API
Share state across the component tree without passing props through every level. Context handles theming, auth, and small-app global state well; know its performance limits before overusing it.
An External Library
Learn one of Zustand or Redux Toolkit for larger apps. Global state problems appear as soon as an app has more than a couple of screens, and employers expect familiarity with at least one library.
Phase 5: Testing and Performance
React Testing Library
Write tests that check what the user sees, not implementation details. Employers want tests, and Testing Library is the standard tool for React, so this is a direct employability signal.
Performance Basics
Lazy loading, code splitting, and the basics of useMemo and useCallback. Performance matters once your component tree grows; knowing when not to optimise matters just as much.
Where to go next: React Native
Once React clicks, React Native lets you reuse the same component model to build real mobile apps. Coursera's Meta React Native course and Full Stack Open's React Native module are both free starting points. This is optional; treat it as a direction, not a requirement.
Keep exploring
Languages in this roadmap
Follow the React learning path
→The same plan step by step, with a specific free course for each stage.
Frontend Developer
→A related track worth a look if you are weighing paths.
TypeScript
→A related track worth a look if you are weighing paths.
Web Developer
→A related track worth a look if you are weighing paths.
Compare all 22 free platforms
→See how the platforms behind these courses stack up side by side.
See all roadmaps
→Browse every career roadmap we have mapped.