React
Intermediate
The declarative, component-based library for building user interfaces. Master JSX, hooks, state, and component lifecycles.
0 / 50 lessons
Lessons
50
Complete to finish this stage
Est. time
21.3h
At a comfortable pace
Difficulty
Intermediate
For complete beginners
Why React Matters
React is the world's most popular UI library, maintaining a declarative virtual DOM model and an expansive ecosystem.
Start learning
Stage progress0%
React lessons
50 lessons · follow them in order for best results.
React PrerequisitesEssential HTML, CSS, and modern JavaScript fundamentals required before learning React.Beginner 25 min React IntroductionUnderstanding what React is, Single Page Applications (SPAs), the virtual DOM, and the ecosystem.Beginner 20 min Creating a React ProjectSetting up modern React applications using Vite with JavaScript and TypeScript, understanding project structure and scripts.Beginner 20 min JSX: JavaScript XMLUnderstanding JSX syntax, embedding JavaScript expressions, JSX rules, fragments, and compilation.Beginner 20 min React ComponentsMastering functional components, component naming, composition, hierarchy, and container vs presentational patterns.Beginner 25 min Props in ReactPassing and reading props, destructuring, default values, passing functions, and the special children prop.Beginner 25 min Conditional RenderingRendering UI conditionally using if statements, ternary operators, logical AND (&&), loading, error, and empty states.Beginner 20 min Rendering Lists & KeysRendering collections with map(), understanding why keys matter, stable unique IDs, and avoiding index as key.Beginner 20 min Event Handling in ReactHandling clicks, form submits, inputs, passing arguments, SyntheticEvent system, and event delegation.Beginner 20 min State & useState HookUnderstanding component state, useState hook, state immutability, batching, and functional state updates.Beginner 25 min Form Handling in ReactControlled vs uncontrolled inputs, handling text, checkboxes, radios, selects, form validation, and resetting.Beginner 25 min Basic Hooks: useState, useEffect, useRefDeep dive into essential React hooks: useState for state, useEffect for side effects, and useRef for DOM refs.Beginner 25 min Component Lifecycle ConceptsUnderstanding mounting, updating, unmounting, re-rendering triggers, and reconciliation.Beginner 20 min Styling React ApplicationsExploring styling approaches in React: Regular CSS, CSS Modules, Tailwind CSS, and component libraries like shadcn/ui.Beginner 25 min Advanced Component ArchitectureMastering compound components, render props, controlled vs uncontrolled abstractions, and feature-based UI patterns.Intermediate 25 min Advanced Hooks: useContext, useReducer, useMemo, useCallbackMastering advanced React hooks: useContext for context, useReducer for complex state, useMemo and useCallback for optimization.Intermediate 25 min Building Custom React HooksExtracting and reusing stateful logic across components: useFetch, useLocalStorage, useDebounce, and useAuth.Intermediate 25 min Data Fetching in ReactWorking with Fetch API and Axios, HTTP methods, headers, status codes, loading skeletons, and error handling.Intermediate 25 min Server State & TanStack QueryMastering TanStack Query (React Query): Queries, mutations, caching, query keys, invalidation, and optimistic updates.Intermediate 25 min Client-Side Routing with React RouterSetting up React Router v6/v7: Routes, dynamic parameters, nested layouts, programmatic navigation, and protected routes.Intermediate 25 min Global State Management: Zustand vs Context vs ReduxComparing global state management solutions: React Context API, Zustand lightweight store, and Redux Toolkit.Intermediate 25 min Authentication & Protected RoutesHandling user authentication, JWTs, HTTP cookies, session state, protected routes, and role-based access control (RBAC).Intermediate 25 min Forms at Scale: React Hook Form & ZodBuilding high-performance, validated forms at scale using React Hook Form, Zod schema validation, and multi-step workflows.Intermediate 25 min TypeScript with ReactTyping component props, events, hooks, generics, API payloads, and utility types in React applications.Intermediate 25 min React Performance OptimizationReconciliation, Virtual DOM optimization, React.memo, lazy loading, code splitting, and bundle analysis.Intermediate 25 min Error Handling & Error BoundariesHandling runtime errors, building React Error Boundaries, displaying fallback UI, and integrating Sentry.Intermediate 20 min Testing React ApplicationsUnit and integration testing with Vitest and React Testing Library, user event simulation, and Playwright E2E.Intermediate 25 min React Accessibility (a11y)WCAG standards, ARIA attributes, keyboard navigation, focus management, screen readers, and automated audits.Intermediate 25 min React Project Architecture at ScaleStructuring enterprise React codebases: Feature-driven folders, API layers, barrel exports, and separation of concerns.Intermediate 25 min React Internals: Fiber & ReconciliationDeep dive into React architecture: Fiber nodes, reconciliation algorithm, render phase vs commit phase, and scheduling.Advanced 30 min React 18+ & 19: Concurrent Rendering & TransitionsConcurrent mode, automatic batching, startTransition, useTransition, useDeferredValue, and React 19 compiler paradigms.Advanced 25 min Modern React APIs: use, Actions, and Form HooksMastering modern React APIs: The use() hook, Server Actions, useActionState, useOptimistic, and useFormStatus.Advanced 25 min Suspense & Async ArchitectureSuspense boundaries, asynchronous component streaming, code splitting, and waterfall elimination.Advanced 25 min Server-Side Rendering (SSR) & HydrationUnderstanding CSR, SSR, SSG, ISR, the hydration process, hydration mismatches, and Streaming HTML.Advanced 30 min Next.js & The React Framework EcosystemNext.js App Router, React Server Components (RSC), Server Actions, routing conventions, and full-stack architecture.Advanced 30 min Advanced State ArchitectureDeconstructing UI state, Server state, URL state, Form state, and Global state across large enterprise architectures.Advanced 25 min Advanced Data Fetching & Real-Time StreamsRequest deduplication, infinite pagination, WebSockets, Server-Sent Events (SSE), and offline-first caching.Advanced 30 min Advanced Performance Profiling & Web WorkersReact DevTools Profiler, flame charts, memory leak diagnostics, Web Workers offloading, and interaction metrics.Advanced 30 min Advanced React Security: XSS, CSRF, CSPSecuring React applications against Cross-Site Scripting (XSS), CSRF, Content Security Policies, and token storage exploits.Advanced 25 min Production React & DevOpsProduction builds, environment variables, CI/CD pipelines, Docker containerization, and Sentry error monitoring.Advanced 30 min Advanced Testing & Mock Service Worker (MSW)Network-level API mocking with MSW, visual regression testing, integration test architecture, and CI automation.Advanced 30 min Building React Design SystemsDesign tokens, Storybook component documentation, Radix UI primitives, shadcn/ui architecture, and npm packaging.Advanced 30 min The Modern React Libraries EcosystemComprehensive overview of top libraries: React Router, TanStack Query, Zustand, React Hook Form, Zod, and Framer Motion.Advanced 25 min Advanced React Design PatternsRender Props, Higher-Order Components (HOCs), State Reducer Pattern, Headless Components, and Provider Inversion.Advanced 30 min React in Monorepos: Turborepo & pnpmManaging multi-app React codebases with Turborepo, pnpm workspaces, shared UI packages, and incremental caching.Advanced 30 min Micro Frontends with React & Module FederationMicro frontend architecture, Webpack/Vite Module Federation, independent deployment lifecycles, and architectural tradeoffs.Advanced 30 min Clean Architecture & Domain-Driven Design in ReactApplying Domain-Driven Design (DDD), Clean Architecture, Dependency Inversion, and Port/Adapter patterns to frontend systems.Advanced 30 min Professional React Engineering & Code ReviewsEngineering standards: PR reviews, ESLint & Prettier rules, Git workflows, debugging practices, and team leadership.Advanced 25 min Real-World React Projects (Levels 1 - 3)Comprehensive project blueprint: 30 hands-on projects categorized across Beginner, Intermediate, and Advanced skill tiers.Advanced 30 min React Skill Levels & Career RoadmapJunior, Mid-Level, and Senior React competencies, recommended learning order, and technical interview preparation.Advanced 25 min