React Roadmap
Phase 1:JavaScript Prerequisites
beginner1 weekVariables 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.
beginner1 weekArray 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.
beginner1 weekThe 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.
beginner1 weekAsync 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
beginner1 weekJSX
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.
beginner1 weekComponents
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.
beginner1 weekProps
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.
intermediate1 weekuseState
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.
intermediate2 weeksuseEffect
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
intermediate1 weekReact 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.
intermediate2 weeksFetching 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.
intermediate1 weekForms 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
intermediate1 weekLifting 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.
intermediate1 weekContext 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.
intermediate2 weeksAn 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
intermediate2 weeksReact 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.
advanced1 weekPerformance 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.
advanced2 weeksWhere 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.
Next steps
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.
Other goals