Study Path Agent Study Path Agent
Generate Your Own
React
166 topics across 7 chapters
Chapter 1
Web & JavaScript Prerequisites
1
Modern JavaScript for React
4 subtopics
2
ES modules (import/export) + bundler mental model
3
Promises + async/await (including error handling)
4
Immutability patterns (objects/arrays) used in React state updates
5
Destructuring, rest/spread, and default values in component code
6
Browser, DOM & HTTP Basics
3 subtopics
7
DOM events + event loop basics (why UI updates feel async)
8
HTTP methods/status codes + CORS basics (frontend perspective)
9
fetch, JSON, cookies vs localStorage/sessionStorage
10
Git & Package Managers
3 subtopics
11
Git basics: branching, PRs, resolving conflicts
12
npm/yarn/pnpm basics: scripts, installing, publishing basics
13
SemVer + lockfiles (why installs differ across machines)
Chapter 2
React Foundations
14
JSX & Rendering Basics
3 subtopics
15
JSX rules, expressions, and common gotchas (className, htmlFor)
16
Fragments, conditional JSX, and returning null
17
Component exports/imports and organizing components
18
Props, children & Composition
3 subtopics
19
Props vs children: building flexible components
20
Composition patterns: slots and “pass components as props”
21
Props destructuring, defaults, and runtime validation patterns
22
State & Event Handling (Basics)
3 subtopics
23
useState basics: initial state, updating, functional updates
24
Event handlers + Synthetic Events (and common patterns)
25
Lifting state up + deriving state from props
26
Lists, Keys & Conditional Rendering
3 subtopics
27
Keys: stable identity, when index keys break UIs
28
Conditional rendering: && vs ternary vs early returns
29
Derived data vs state (avoid duplicating sources of truth)
30
Forms (Basics)
2 subtopics
31
Controlled inputs: onChange, value, and common pitfalls
32
Submit handling + basic client-side validation patterns
33
Rendering Lifecycle Mental Model
3 subtopics
34
Render vs commit vs effects (what happens when)
35
Strict Mode dev behavior (double-invocation) and why it exists
36
Why components re-render (state, props, parent render)
Chapter 3
State, Side Effects & State Management
37
Hooks Deep Dive
4 subtopics
38
useRef: DOM refs vs mutable instance values
39
Custom hooks: extracting reusable behavior cleanly
40
Rules of Hooks + common violations and fixes
41
useMemo/useCallback: when they help vs hurt
42
Effects & Synchronization
4 subtopics
43
Dependency arrays: correctness first, performance second
44
Cleanup functions: subscriptions, timers, and aborting work
45
Avoiding race conditions in async effects (AbortController, guards)
46
Effect vs event-handler: choosing the right mechanism
47
Context API
3 subtopics
48
Creating context + providers + consumption patterns
49
Context performance pitfalls (unnecessary rerenders)
50
Context + reducer for app-wide state (pragmatic approach)
51
useReducer & State Modeling
3 subtopics
52
Reducer patterns: actions, payloads, and normalization
53
Finite state approach: modeling UI states explicitly
54
useReducer for complex forms and multi-step flows
55
Server State & Caching (React Query / SWR)
4 subtopics
56
Queries vs mutations: core concepts and mental model
57
Caching, invalidation, and refetch strategies
58
Optimistic updates and rollback patterns
59
Pagination and infinite queries (UX + performance)
60
Global State Libraries (Overview)
3 subtopics
61
Redux Toolkit basics: slices, thunks, selectors (high-level)
62
Lightweight stores (Zustand/Jotai): when they fit well
63
Choosing state scope: local vs context vs global store
Chapter 4
Real-World App Building
64
Routing (React Router)
3 subtopics
65
Nested routes + shared layouts (common app structures)
66
Route params and URL search params (state in the URL)
67
Route-based code splitting (lazy) and loading states
↗ Server State & Caching (React Query / SWR) (see Chapter 3)
68
Forms & Validation (Real Apps)
3 subtopics
69
Schema validation (Zod/Yup) + mapping errors to UI
70
Form performance: uncontrolled inputs and minimizing rerenders
71
Async validation + handling server-side errors cleanly
72
Authentication & Authorization
3 subtopics
73
Auth flows: sessions vs JWTs (what the frontend must do)
74
Protecting routes + role/permission checks in UI
75
Token storage risks and common mitigation patterns
76
Errors, Loading States & UX Resilience
3 subtopics
77
Error boundaries: when they work and how to structure them
78
Suspense basics: where it fits (and where it doesn’t)
79
Loading skeletons, empty states, and optimistic UI patterns
80
Accessibility (A11y) Essentials
3 subtopics
81
Semantic HTML + ARIA basics (use ARIA only when needed)
82
Keyboard navigation + focus management (modals, menus, forms)
83
A11y testing basics (axe, RTL queries, manual checklist)
Chapter 5
UI, Styling & Accessibility
84
Styling Approaches in React
4 subtopics
85
CSS Modules: scoping styles per component
86
CSS-in-JS (emotion/styled-components): patterns and tradeoffs
87
Tailwind fundamentals: utility patterns for component UIs
88
Managing global styles safely (resets, base styles, tokens)
89
Component Libraries & Headless UI
3 subtopics
90
Material UI (MUI) basics: theming, layout, common components
91
Headless components (Radix/Headless UI): composing your own UI
92
Wrapping third-party components into your design system safely
93
Theming & Design Systems
3 subtopics
94
Design tokens: color, spacing, radius, typography variables
95
Dark mode strategy + theme persistence
96
Consistent typography & spacing scale in component UIs
97
Responsive Layout for Component UIs
2 subtopics
98
Flexbox + Grid patterns for reusable components
99
Media queries/container queries and responsive components
100
Animations & Micro-interactions
3 subtopics
101
CSS transitions/animations: practical UI patterns
102
Framer Motion basics: layout animations and presence
103
Accessible animation: prefers-reduced-motion and avoiding nausea
↗ Accessibility (A11y) Essentials (see Chapter 4)
Chapter 6
Testing, Performance & Production
104
Testing (Unit/Integration) with RTL + Jest/Vitest
3 subtopics
105
Component tests: render, user events, and asserting behavior
106
Mocking network calls with MSW (realistic integration tests)
107
Testing hooks and custom hooks (patterns + pitfalls)
108
End-to-End Testing (Playwright/Cypress)
3 subtopics
109
Write stable E2E tests for critical user flows
110
Test data, selectors, and flake reduction strategies
111
Running E2E tests in CI (parallelism, artifacts, retries)
112
Performance Profiling & Optimization
4 subtopics
113
React DevTools Profiler: finding wasted renders
114
Memoization tradeoffs: React.memo, useMemo, useCallback
115
Virtualization for large lists (react-window/react-virtual)
116
Bundle analysis + code splitting strategies
117
Build, Deploy & CI/CD
3 subtopics
118
Build-time env vars and runtime config strategies
119
CI pipeline basics (e.g., GitHub Actions): test, lint, build
120
Deploying a React app: static hosting and common pitfalls
121
Monitoring, Logging & Error Reporting
3 subtopics
122
Client error reporting (e.g., Sentry): setup and sourcemaps
123
Frontend logging: what to log (and what never to log)
124
Measuring UX: Core Web Vitals and practical dashboards
125
Security Basics for Frontend Apps
3 subtopics
126
XSS prevention: escaping, sanitizing, and safe rendering patterns
127
Content Security Policy (CSP) basics and why it matters
128
Dependency security: audits, updates, and supply-chain awareness
Chapter 7
Tooling & Architecture
129
Project Setup (Vite & Framework Awareness)
4 subtopics
130
Create a new React app with Vite and understand the file layout
131
Environment configuration: .env files, modes, and secrets hygiene
132
SPA vs SSR vs SSG decision guide (when to consider Next.js)
133
Practical folder structures (features vs layers) for scaling codebases
134
TypeScript with React
4 subtopics
135
Typing props, events, and children correctly
136
Generics for reusable components and custom hooks
137
Type-safe Context + useReducer patterns
138
Runtime validation + TS types (e.g., Zod inference)
139
Linting, Formatting & Code Quality
4 subtopics
140
ESLint for React: catching bugs and enforcing consistency
141
Prettier setup + team conventions
142
Import organization + path aliases for maintainability
143
Pre-commit hooks (lint-staged/husky) to prevent broken main branches
144
Component Architecture Patterns
4 subtopics
145
Presentational vs container components (and modern alternatives)
146
Feature-based architecture: collocating UI, hooks, and tests
147
Module boundaries: what should (and shouldn’t) be imported where
148
Design for testability: dependency injection patterns in React apps
149
Reusable Component API Design
4 subtopics
150
Compound components pattern (Tabs/Accordion style APIs)
151
Render props vs hooks: when each pattern is appropriate
152
Controlled vs uncontrolled component APIs (and bridging both)
153
Polymorphic components (“as” prop) and typing them safely
154
Monorepos & Advanced Package Management
4 subtopics
155
Workspaces (pnpm/yarn) basics: linking packages and scripts
156
Shared UI packages: versioning and avoiding breaking consumers
157
Change management (e.g., Changesets) for package publishing
158
Build caching basics (e.g., Turborepo/Nx) and when it’s worth it

Want a personalized study path for any topic?

Generate Your Own Study Path