React roadmap
Build interfaces from components, manage state deliberately, and ship React apps that stay easy to change.
At a glance
- Stages6
- Steps23
- Core steps15
- Optional or alternative8
- Linked courses1
How to use this roadmap
Work through the stages in order. Core steps are the ones everyone on this path needs; optional steps add depth when you have time, and alternatives are other ways to the same skill, so pick one. Steps with a course link to a free course from LearnerMap Academy.
Members of LearnerMap Academy can mark each step as learning, done or skipped, and see how far along the path they are.
Before you start
Modern JavaScript
CoreBe fluent with arrow functions, destructuring, spread, modules and promises.
Modules and tooling
CoreKnow how imports resolve and how a dev server and bundler fit together.
TypeScript basics
OptionalType props and state to catch mistakes as you type.
Components
JSX
CoreWrite markup inside JavaScript and embed expressions in it.
Props
CorePass data into components and keep them reusable.
Conditions and lists
CoreShow different output for different data, and render collections with stable keys.
Pure components
CoreKeep rendering free of side effects so output depends only on inputs.
Interactivity and state
Responding to events
CoreAttach handlers and update the interface when people act.
State
CoreGive a component memory, and understand when and why it re-renders.
Sharing state
CoreLift state to the closest common parent and pass it down.
Reducers
OptionalMove complex update logic into a single function of actions.
Context
OptionalProvide values deep in the tree without threading props through every level.
Effects and data
Effects
CoreSynchronise with systems outside React, and recognise when you do not need an effect at all.
Custom hooks
CoreShare stateful logic between components by extracting it into a hook.
Data-fetching libraries
AlternativeLet a library handle caching, retries and background refresh of server data.
Suspense
OptionalShow a fallback while part of the tree waits for code or data.
Building apps
Routing
CoreMap URLs to screens with nested layouts and links.
Forms
CoreHandle controlled inputs, submission and validation messages.
Full-stack frameworks
AlternativeUse a framework that adds routing, data loading and server rendering.
Accessible components
OptionalKeep focus, labels and keyboard support right as components grow.
Quality
Testing components
CoreTest what people see and do, not implementation details.
Rules of React
CoreFollow the rules that keep components predictable and hooks correct.
Performance
OptionalMeasure first, then skip unnecessary work with memoisation or the compiler.
Learning with LearnerMap Academy
LearnerMap Academy runs its learning on LearnerMap, a free platform for organisations. Every course here is free for members of LearnerMap Academy: sign in with the email address LearnerMap Academy knows you by, or with a passkey, and the course opens in your own plan.
Your plan holds at most 3 courses in progress at a time, so you finish what you start before pulling in the next one. Lessons open in order, your progress is saved as you complete each one, and every course ends with a quiz; passing it adds a certificate to your record.
Not a member yet? Ask LearnerMap Academy to invite you. Lesson content, quizzes and everyone’s progress stay private to members; these public pages show only what LearnerMap Academy chose to publish.