ForgeLearn
|$ curl https://forge-ai.dev/api/markdown?path=docs/roadmaps/react
$cat docs/react-learning-roadmap.md
updated Today·10 min read·published

React Learning Roadmap

◆React◆Roadmap◆All Levels🎯Free Tools
Introduction

Your complete learning path for React — from component basics through hooks, state management, routing, performance optimization, and advanced patterns. Follow the stages in order or jump to specific topics.

ℹ

info

React builds on JavaScript and TypeScript fundamentals. Complete the JS and TS roadmaps first for the best experience.
Full React Roadmap
1
React Foundations~4 hoursBeginner

Understand React's core mental model — components, JSX, props, and the virtual DOM.

$
React Overview

Introduction to React, core concepts, project structure, and why React's component model works

$
Components

Functional components, composition patterns, fragments, props, and children

2
Hooks & State~6 hoursBeginner

Master React's hooks for state management, side effects, and performance optimization.

$
Hooks Deep Dive

useState, useEffect, useRef, useMemo, useCallback, useReducer, and custom hook patterns

$
State Management

Local state vs global state, useReducer, Context API, Zustand, and Redux Toolkit

3
Forms & Data~5 hoursIntermediate

Handle user input, validate forms, and fetch data efficiently from APIs.

$
Forms

Controlled vs uncontrolled components, validation, react-hook-form, and form libraries

$
Data Fetching

SWR, TanStack Query, SSR data fetching patterns, caching strategies, and error handling

4
Routing & Navigation~3 hoursIntermediate

Build multi-page applications with client-side routing and nested layouts.

$
Routing

React Router, file-based routing, nested layouts, route parameters, and navigation guards

5
Performance & Patterns~5 hoursAdvanced

Optimize rendering, apply advanced patterns, and write comprehensive tests.

$
Performance

React.memo, useMemo, useCallback, lazy loading, virtualization, and profiling bottlenecks

$
Patterns

Higher-order components, compound components, render props, custom hooks, and container/presentational

$
Testing

React Testing Library, Jest, component tests, user event simulation, and snapshot testing

$Blueprint — Engineering Documentation·Section ID: RES-08·Revision: 1.0

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join SlackJoin DiscordKaundal VIP
Follow