Docs

React

React Complete Roadmap — Beginner to Advanced

> Goal: Master React from fundamentals to production-level patterns, with real-world TypeScript examples at every step. > > How to use: Follow topics in order. Each folder contains a .tsx reference file (commented examples you can drop into any React project) and a README.md explaining the theory. > > Prerequisites: HTML, CSS, JavaScript (ES6+), basic TypeScript. All code is in TypeScript React (.tsx).

Learning Path Overview

Foundations → Hooks → Routing → State Management → Advanced Patterns → Testing → Modern React

Phase	Topics	Estimated Time
Phase 1: Foundations	Setup/JSX, Components, State, Lists, Forms, Styling	1–2 weeks
Phase 2: Hooks Deep Dive	useState/useReducer, useEffect, useRef, useContext, Memoization, Custom Hooks	2–3 weeks
Phase 3: Routing	React Router v6+ (nested, protected, loaders)	3–4 days
Phase 4: State & Data	Zustand, Redux Toolkit, TanStack Query, Data Fetching Patterns	2–3 weeks
Phase 5: Advanced Patterns	Compound Components, HOC, Code Splitting, Error Boundaries, Performance, React+TS	2–3 weeks
Phase 6: Testing	Vitest, React Testing Library, mocking, async testing	1 week
Phase 7: Modern React	Server Components, Concurrent Features, Animations	1 week

Total estimated time: 10–14 weeks (studying ~1–2 hours/day)

Phase 1: React Foundations

01. React Setup & JSX

Vite project setup, project structure walkthrough
JSX syntax, expressions, fragments, JSX vs HTML differences
Rendering rules, conditional expressions in JSX
Prerequisite: JS/TS basics | Difficulty: Beginner

02. Components & Props

Functional components, naming conventions
Props: typing, destructuring, default values, children
Composition vs inheritance, prop spreading
Prerequisite: 01 | Difficulty: Beginner

03. State & Events

useState hook, updater functions, state batching
Event handling, synthetic events, typing events
Lifting state up, controlled components intro
Prerequisite: 02 | Difficulty: Beginner

04. Conditional Rendering & Lists

Ternary, logical &&, early return patterns
Rendering arrays with .map(), key prop rules
Filtering, sorting, nested lists
Prerequisite: 03 | Difficulty: Beginner

05. Forms & Controlled Components

Controlled vs uncontrolled inputs
Handling text, textarea, select, checkbox, radio
Multi-field forms, form validation, form submission
Prerequisite: 03 | Difficulty: Beginner

06. Styling

Inline styles, CSS Modules, Tailwind CSS
Conditional class names, dynamic styling
Styled Components, CSS-in-JS patterns
Prerequisite: 02 | Difficulty: Beginner

Phase 2: Hooks Deep Dive

07. useState & useReducer

useState patterns, lazy initialization, state with objects/arrays
useReducer for complex state, dispatch + action pattern
When to use useState vs useReducer
Prerequisite: 03 | Difficulty: Intermediate

08. useEffect & Lifecycle

Effect timing: mount, update, unmount
Dependency array rules (empty, specific, none)
Data fetching with cleanup (AbortController)
Common pitfalls: stale closures, infinite loops, missing deps
Prerequisite: 07 | Difficulty: Intermediate

09. useRef & forwardRef

DOM refs (focus, scroll, measure)
Mutable refs (previous value, timers, counters)
forwardRef, useImperativeHandle, ref callbacks
Prerequisite: 08 | Difficulty: Intermediate

10. useContext & Context API

createContext, Provider pattern, useContext
Theme switcher, auth context, locale context
Performance: avoiding unnecessary re-renders
When NOT to use context (prop drilling isn't always bad)
Prerequisite: 07 | Difficulty: Intermediate

11. useMemo, useCallback & React.memo

useMemo for expensive computations
useCallback for stable function references
React.memo for skipping re-renders
When to memoize vs when NOT to (premature optimization)
Prerequisite: 08, 10 | Difficulty: Intermediate

12. Custom Hooks

Extracting reusable logic into hooks
useToggle, useFetch, useDebounce, useLocalStorage
useMediaQuery, useOnClickOutside, useIntersectionObserver
Hook composition, testing custom hooks
Prerequisite: 07–11 | Difficulty: Intermediate

Phase 3: Routing & Navigation

13. React Router v6+

BrowserRouter, Routes, Route, Link, NavLink
useNavigate, useParams, useSearchParams, useLocation
Nested routes, layout routes, Outlet
Protected routes (auth guards), route loaders
Prerequisite: 10 | Difficulty: Intermediate

Phase 4: State Management & Data Fetching

14. Zustand

Creating stores, selectors, computed values
Actions, async actions, middleware (persist, devtools)
Slices pattern for large stores
Zustand vs Context vs Redux comparison
Prerequisite: 10, 12 | Difficulty: Intermediate

15. Redux Toolkit

configureStore, createSlice, reducers, actions
createAsyncThunk, extraReducers, loading states
RTK Query: createApi, endpoints, cache tags
Redux DevTools, middleware
Prerequisite: 07 | Difficulty: Intermediate–Advanced

16. TanStack Query (React Query)

QueryClient, QueryClientProvider setup
useQuery: caching, staleTime, refetching, enabled
useMutation: optimistic updates, invalidation
Infinite queries, prefetching, suspense mode
Prerequisite: 08 | Difficulty: Intermediate–Advanced

17. Data Fetching Patterns

fetch API, axios, error handling patterns
Loading/error/empty states, skeleton UI
Race conditions & AbortController
SWR pattern, Suspense for data fetching
Prerequisite: 08, 16 | Difficulty: Intermediate

Phase 5: Advanced Patterns

18. Compound Components & Render Props

Compound component pattern (Tabs, Accordion, Select)
Render props pattern, children as function
Slots pattern, headless component concept
Flexible API design for reusable components
Prerequisite: 10, 12 | Difficulty: Advanced

19. HOC & Code Splitting

Higher-Order Components (withAuth, withLoading)
React.lazy + Suspense for lazy loading
Route-based vs component-based code splitting
Dynamic imports, preloading strategies
Prerequisite: 13 | Difficulty: Advanced

20. Error Boundaries

Error boundary class component (componentDidCatch)
react-error-boundary library (ErrorBoundary, useErrorBoundary)
Fallback UI, retry patterns, error recovery
Logging errors, granular error boundaries
Prerequisite: 08 | Difficulty: Advanced

21. Performance Optimization

React DevTools Profiler, identifying re-renders
Virtualization (react-window, react-virtuoso)
Bundle analysis, tree shaking, lazy loading
Image optimization, web vitals, code splitting review
Prerequisite: 11, 19 | Difficulty: Advanced

22. React + TypeScript Patterns

Typing props, events, refs, state
Generic components, polymorphic components
Discriminated unions for component variants
Utility types: ComponentProps, PropsWithChildren, HTMLAttributes
Type-safe context, typed hooks
Prerequisite: 01–12 | Difficulty: Advanced

Phase 6: Testing

23. Testing React Apps

Vitest setup with React, testing philosophy
React Testing Library: render, screen, queries
fireEvent vs userEvent, async testing (waitFor, findBy)
Mocking: API calls, modules, timers
Testing hooks, snapshot tests, integration tests
Prerequisite: 12 | Difficulty: Intermediate–Advanced

Phase 7: Modern React

24. Server Components & Concurrent Features

React Server Components (RSC) mental model
Client vs Server component boundaries
Suspense boundaries, streaming SSR
useTransition, useDeferredValue, startTransition
Prerequisite: 08, 19 | Difficulty: Advanced

25. Animations & Transitions

CSS transitions & keyframes in React
Framer Motion: animate, variants, AnimatePresence
Gestures, layout animations, scroll-triggered
Exit animations, shared layout, orchestration
Prerequisite: 06 | Difficulty: Intermediate–Advanced

Tips for Success

Build something small after every 3–4 topics — a todo app, a dashboard, a form wizard
Read the .tsx file first — copy examples into a Vite project and experiment
Don't skip hooks (Phase 2) — they are the backbone of modern React
TypeScript is your friend — the type errors catch bugs before runtime
Performance optimization (21) comes LAST — don't optimize before you understand the basics

01 — React Setup & JSX