PricingLoginStart free
React Academy logo
ReactBeginnerWebMobileLevels A1 → C122 languages

React Academy

Master ReactJS to build dynamic user interfaces with ReactJS Academy. A CoddyKit learning path of 88 short courses and 324 interactive lessons, with a 24/7 AI tutor at your side.

Courses
88
Lessons
324
Interactive steps
3,793
Free to start
Course 1
GET IT ONGoogle PlayDownload on theApp Store

About the mobile app: Learn React: Build Apps →

Curriculum

88 courses in this path

Every course in the React Academy path, in learning order. The first one is free.

1

A13 lessonsFree

Start with React fundamentals: components, declarative UI, and how diffing updates the DOM efficiently. Then set up a project (e.g., Vite), run a dev server, and render your first component.

  1. 1React Kickoff: Concepts & Setup
  2. 2Project Setup: Vite, Layout & Dev Server
  3. 3First Component & Render
Start learning free
2

A13 lessonsPRO

Learn JSX rules: expressions and attributes, returning fragments, rendering lists with keys, simple conditionals, and styling options (CSS modules, inline styles, class helpers).

  1. 1JSX Rules: Expressions, Attributes, Fragments
  2. 2Lists & Keys; Conditional Rendering
  3. 3Styling Options: CSS Modules, Inline Styles, Class Helpers
Start learning freeUnlock with PRO
3

A24 lessonsPRO

Master the React DevTools browser extension to inspect component trees, profile renders, and debug state and props effectively.

  1. 1Installing & Opening React DevTools
  2. 2Inspecting Component Trees & Props
  3. 3Using the Profiler Tab
  4. +1 more
Start learning freeUnlock with PRO
4

A24 lessonsPRO

Create smooth enter, exit, and state-change animations in React using CSS transitions and keyframes — no animation library required.

  1. 1CSS Transitions with React State Changes
  2. 2CSS Keyframe Animations with React
  3. 3useLayoutEffect for Pre-Animation Measurements
  4. +1 more
Start learning freeUnlock with PRO
5

A24 lessonsPRO

Share state between sibling components by lifting it up, and understand when prop drilling becomes a problem worth solving.

  1. 1Lifting State Up: Principles & Examples
  2. 2Prop Drilling: When It Hurts & When It's Fine
  3. 3Sibling Communication Patterns
  4. +1 more
Start learning freeUnlock with PRO
6

A24 lessonsPRO

Persist React state across page reloads using localStorage, handle cross-tab synchronization, and choose the right browser storage API for each use case.

  1. 1Reading and Writing localStorage in React
  2. 2Syncing State with localStorage
  3. 3Handling Storage Events Across Tabs
  4. +1 more
Start learning freeUnlock with PRO
7

A24 lessonsPRO

Build a robust dark mode system using CSS custom properties, React context, and the prefers-color-scheme media query — preventing flash of wrong theme.

  1. 1Detecting System Color Scheme
  2. 2CSS Variables for Theme Switching
  3. 3React Context for Theme State
  4. +1 more
Start learning freeUnlock with PRO
8

A23 lessonsPRO

Pass data with props , set simple defaults via destructuring, compose UIs with children , and prefer composition over inheritance for reusable presentational components.

  1. 1Passing Props & Composition Patterns
  2. 2Props & Composition
  3. 3Reusable Presentational Components
Start learning freeUnlock with PRO
9

A23 lessonsPRO

Master useState and event handling: update state correctly, handle onClick/onChange, and prepare for controlled inputs.

  1. 1useState Basics & Correct Updates
  2. 2Event Handling: onClick & onChange
  3. 3Controlled vs Uncontrolled Inputs (Intro)
Start learning freeUnlock with PRO
10

A23 lessonsPRO

Learn to build controlled forms with multiple inputs, apply basic validation, and handle submissions smoothly in React.

  1. 1Controlled Forms with Multiple Inputs
  2. 2Basic Validation Patterns & Submit Handling
  3. 3Error Messages & Touched/Dirty States (Vanilla)
Start learning freeUnlock with PRO
11

A23 lessonsPRO

Understand client-side routing: how SPAs switch views without full page reloads, basic paths and params, and active navigation states.

  1. 1Client-side Routing Concepts
  2. 2Nested Routes & Route Params
  3. 3Navigation Links & Active States
Start learning freeUnlock with PRO
12

A23 lessonsPRO

Master useRef : persist values across renders without causing re-renders, access DOM nodes, and manage timers safely.

  1. 1Persisting Values Without Re-render
  2. 2Accessing DOM Nodes, Measuring & Focusing
  3. 3Mutable Refs for Timers & IDs
Start learning freeUnlock with PRO
13

A23 lessonsPRO

Keep code clean with ESLint + React rules and auto-format with Prettier . Add scripts and fix issues fast.

  1. 1ESLint + React Rules; Prettier Integration
  2. 2File Naming, Component Boundaries, Prop Naming
  3. 3Env Variables & Config Organization
Start learning freeUnlock with PRO
14

A22 lessonsPRO

Master controlled and uncontrolled inputs: when to pick each, simple ref patterns, and safe defaults.

  1. 1Trade-offs; Ref Patterns; Default Values
  2. 2Prop Getters & State Reducer (Light)
Start learning freeUnlock with PRO
15

B14 lessonsPRO

Learn what StrictMode does, which warnings it surfaces, and coding conventions that make React apps easier to maintain.

  1. 1What StrictMode Does
  2. 2Pure Components & Avoiding Side Effects in Render
  3. 3Key & Ref Best Practices
  4. +1 more
Start learning freeUnlock with PRO
16

B14 lessonsPRO

Render content outside the parent DOM hierarchy using React Portals to build modals, tooltips, and overlays.

  1. 1What Are React Portals?
  2. 2Building a Modal Component with Portals
  3. 3Handling Focus & Keyboard Traps in Modals
  4. +1 more
Start learning freeUnlock with PRO
17

B14 lessonsPRO

Work with props.children, React.Children utilities, and implement flexible slot-based component APIs.

  1. 1props.children Fundamentals
  2. 2React.Children Utilities
  3. 3Named Slots via Object Props
  4. +1 more
Start learning freeUnlock with PRO
18

B14 lessonsPRO

Use uncontrolled inputs with useRef, read file input values, and handle file upload workflows in React.

  1. 1Uncontrolled Inputs with useRef
  2. 2File Input & Reading File Data
  3. 3Drag & Drop File Upload UI
  4. +1 more
Start learning freeUnlock with PRO
19

B14 lessonsPRO

Design Context providers that minimize re-renders using memoization, split contexts, and selector patterns.

  1. 1Splitting Contexts to Limit Re-renders
  2. 2Memoizing Context Values with useMemo
  3. 3Context Selector Pattern
  4. +1 more
Start learning freeUnlock with PRO
20

B14 lessonsPRO

Add multi-language support to React apps using react-i18next, manage translation files, and handle locale switching.

  1. 1Setting Up react-i18next
  2. 2Using the useTranslation Hook
  3. 3Pluralisation & Interpolation
  4. +1 more
Start learning freeUnlock with PRO
21

B14 lessonsPRO

Integrate powerful browser APIs — Clipboard, Geolocation, Notifications, and IntersectionObserver — into React components with proper cleanup and permission handling.

  1. 1Clipboard API: Copy and Paste in React
  2. 2Geolocation API in React Components
  3. 3Notifications API and Permission Handling
  4. +1 more
Start learning freeUnlock with PRO
22

B14 lessonsPRO

Prevent excessive re-renders and API calls by implementing debounce and throttle patterns as reusable React hooks for search, scroll, and resize events.

  1. 1Why Debounce and Throttle Matter in UIs
  2. 2Implementing useDebounce Custom Hook
  3. 3Implementing useThrottle Custom Hook
  4. +1 more
Start learning freeUnlock with PRO
23

B14 lessonsPRO

Build accessible, keyboard-navigable autocomplete and type-ahead components from scratch using React state and refs — no library needed.

  1. 1Controlled Input with Suggestion List
  2. 2Keyboard Navigation in Suggestion Lists
  3. 3Async Suggestions with Debounce
  4. +1 more
Start learning freeUnlock with PRO
24

B14 lessonsPRO

Build performant, flexible forms in React using React Hook Form: registration, validation, error display, and schema integration.

  1. 1Getting Started with React Hook Form
  2. 2Validation Rules & Error Messages
  3. 3Schema Validation with Zod
  4. +1 more
Start learning freeUnlock with PRO
25

B14 lessonsPRO

Use Zustand to manage global state in React apps: stores, actions, selectors, persistence, and devtools integration.

  1. 1Creating Your First Zustand Store
  2. 2Selectors & Preventing Unnecessary Re-renders
  3. 3Persisting State with the Persist Middleware
  4. +1 more
Start learning freeUnlock with PRO
26

B14 lessonsPRO

Go beyond basic routes with nested layouts, loaders, actions, protected routes, and search-param state management.

  1. 1Nested Routes & Outlet Layouts
  2. 2Loaders & Actions (Data Router API)
  3. 3Protected Routes & Auth Guards
  4. +1 more
Start learning freeUnlock with PRO
27

B14 lessonsPRO

Add TypeScript to React projects: type props, events, hooks, context, and generic components with confidence.

  1. 1Typing Props & Component Return Types
  2. 2Typing Events & Refs in TypeScript
  3. 3Generic Components & Utility Types
  4. +1 more
Start learning freeUnlock with PRO
28

B14 lessonsPRO

Build production-grade data tables with sorting, filtering, pagination, and row selection using TanStack Table's powerful headless architecture.

  1. 1TanStack Table Philosophy and Headless Design
  2. 2Defining Columns and Rendering Rows
  3. 3Sorting, Filtering, and Pagination
  4. +1 more
Start learning freeUnlock with PRO
29

B14 lessonsPRO

Manage React state with Jotai's minimal atomic model — composable atoms that derive values, handle async, and integrate perfectly with React Suspense.

  1. 1Atoms: The Unit of State in Jotai
  2. 2Reading and Writing Atoms with useAtom
  3. 3Derived Atoms and Async Atoms
  4. +1 more
Start learning freeUnlock with PRO
30

B14 lessonsPRO

Use SWR's stale-while-revalidate strategy for fast, reliable data fetching with automatic revalidation, mutation, and offline support.

  1. 1SWR Core Concepts: Stale-While-Revalidate
  2. 2useSWR Hook: Fetching, Loading, and Error States
  3. 3Mutation and Optimistic Updates with SWR
  4. +1 more
Start learning freeUnlock with PRO
31

B14 lessonsPRO

Build accessible, touch-friendly drag-and-drop interfaces in React with dnd-kit — sortable lists, kanban boards, and multi-container drag interactions.

  1. 1dnd-kit Architecture and Accessibility-First Design
  2. 2DndContext, useDraggable, and useDroppable
  3. 3SortableContext for Reorderable Lists
  4. +1 more
Start learning freeUnlock with PRO
32

B14 lessonsPRO

Create fluid, spring-physics-based animations in React using react-spring — from simple value transitions to complex gesture-driven interactions.

  1. 1React Spring Core: useSpring Hook
  2. 2Animated Components and Style Interpolation
  3. 3useTrail and useChain for Sequences
  4. +1 more
Start learning freeUnlock with PRO
33

B14 lessonsPRO

Implement real-time data feeds in React using Server-Sent Events and polling strategies — understanding the trade-offs with WebSockets for different use cases.

  1. 1SSE vs WebSockets vs Polling Comparison
  2. 2Consuming SSE Streams in React with EventSource
  3. 3Long Polling Pattern and Reconnection Logic
  4. +1 more
Start learning freeUnlock with PRO
34

B13 lessonsPRO

Understand useEffect : when it runs vs render, how dependency arrays control it, and how to write safe cleanups.

  1. 1Effects vs Render, Dependencies & Cleanup
  2. 2Common Pitfalls: Stale Closures & Missing Deps
  3. 3Fetching Basics in Effects (Abort & Cleanup)
Start learning freeUnlock with PRO
35

B13 lessonsPRO

Design resilient data UIs: handle loading , error , empty , and success states with clear feedback and lightweight skeletons.

  1. 1Loading, Error, Empty States & Skeletons
  2. 2Retry/Backoff Ideas & Request Cancellation
  3. 3Intro to Fetch Helpers (No Heavy Libs)
Start learning freeUnlock with PRO
36

B13 lessonsPRO

Share state across distant components with Context to avoid prop drilling; set up a Provider and read values via useContext .

  1. 1Context Basics & Avoiding Prop Drilling
  2. 2useReducer Basics & Action Patterns
  3. 3Context + Reducer: Simple State Containers
Start learning freeUnlock with PRO
37

B13 lessonsPRO

Extract reusable logic into custom hooks : define clear parameters, return stable values/actions, and keep effects clean.

  1. 1Extracting Logic to Hooks: Parameters & Returns
  2. 2Naming, Memoization & Effect Hygiene
  3. 3Testing Custom Hooks (Preview)
Start learning freeUnlock with PRO
38

B13 lessonsPRO

Build inclusive UIs: use real semantics, clear labels and roles, and manage keyboard focus for smooth navigation.

  1. 1Semantics, Labels, Roles, Focus
  2. 2Keyboard Interactions & Skip Links
  3. 3Testing A11y Basics
Start learning freeUnlock with PRO
39

B14 lessonsPRO

Add fluid animations and transitions to React apps with Framer Motion: motion components, variants, gestures, and layout animations.

  1. 1Motion Components & Basic Animations
  2. 2Variants for Orchestrated Animations
  3. 3Gesture Animations: Hover, Tap & Drag
  4. +1 more
Start learning freeUnlock with PRO
40

B13 lessonsPRO

Catch render-time errors with Error Boundaries, show safe fallbacks, and keep the rest of the app responsive.

  1. 1Error Boundary Components (Class-Based Wrapper)
  2. 2Recovering UI & Reporting Strategies
  3. 3Guarding Effects & Cleanup
Start learning freeUnlock with PRO
41

B13 lessonsPRO

Add lightweight types to React components. Start with props, then extract reusable generics to keep UI code safe and clear.

  1. 1Props Typing & Generics for Reusable Components
  2. 2Event Types, Refs, and Context Typing
  3. 3Migrating Incrementally
Start learning freeUnlock with PRO
42

B13 lessonsPRO

Organize React apps: feature-first folders, small UI primitives vs composite components, hooks and tests co-located, and clear refactoring rules.

  1. 1Feature Folders & UI vs Composite Components
  2. 2Hooks Folder Conventions & Test Co-location
  3. 3Refactoring Guidelines
Start learning freeUnlock with PRO
43

B24 lessonsPRO

Render thousands of list items without performance degradation by using react-window to virtualize DOM output — only rendering what's visible in the viewport.

  1. 1The Large List Rendering Problem
  2. 2FixedSizeList: Rendering Thousands of Items
  3. 3VariableSizeList: Dynamic Row Heights
  4. +1 more
Start learning freeUnlock with PRO
44

B24 lessonsPRO

Handle async operations idiomatically in React with useEffect, useTransition, useDeferredValue, and Suspense.

  1. 1Racing Conditions & Effect Cleanup
  2. 2useTransition for Non-Blocking UI Updates
  3. 3useDeferredValue for Input Debouncing
  4. +1 more
Start learning freeUnlock with PRO
45

B24 lessonsPRO

Understand render props and higher-order components as classic code-reuse patterns before hooks replaced them.

  1. 1Render Props Pattern
  2. 2Higher-Order Components (HOCs) Explained
  3. 3HOC vs Render Props vs Custom Hooks
  4. +1 more
Start learning freeUnlock with PRO
46

B24 lessonsPRO

Understand the subtle but critical difference between useEffect and useLayoutEffect — when each fires relative to the DOM commit — and use each correctly.

  1. 1The Rendering Phase and DOM Commit
  2. 2When useLayoutEffect Runs vs useEffect
  3. 3Measuring DOM Elements with useLayoutEffect
  4. +1 more
Start learning freeUnlock with PRO
47

B24 lessonsPRO

Manage complex app state with Redux Toolkit slices, thunks, and RTK Query for server-state caching and synchronisation.

  1. 1Redux Toolkit Slices & createSlice
  2. 2Async Logic with createAsyncThunk
  3. 3RTK Query: Endpoints & Auto-Caching
  4. +1 more
Start learning freeUnlock with PRO
48

B24 lessonsPRO

Understand React Server Components, the use() hook, Actions, and other React 19 APIs that change how data flows in apps.

  1. 1React Server Components Explained
  2. 2The use() Hook for Async Resources
  3. 3React Actions & useActionState
  4. +1 more
Start learning freeUnlock with PRO
49

B24 lessonsPRO

Manage server state with TanStack Query: fetching, caching, background refetching, mutations, and pagination.

  1. 1Setting Up React Query & QueryClient
  2. 2Caching, Stale Time & Background Refetching
  3. 3Mutations with useMutation
  4. +1 more
Start learning freeUnlock with PRO
50

B24 lessonsPRO

Write integration tests with React Testing Library and end-to-end tests with Playwright to validate real user flows.

  1. 1Integration Testing with React Testing Library
  2. 2Testing Async UI & API Calls with MSW
  3. 3Getting Started with Playwright for React
  4. +1 more
Start learning freeUnlock with PRO
51

B24 lessonsPRO

Document, develop, and test React UI components in isolation using Storybook with CSF3 stories and addons.

  1. 1Setting Up Storybook in a React Project
  2. 2Writing CSF3 Stories
  3. 3Args, Controls & the Actions Addon
  4. +1 more
Start learning freeUnlock with PRO
52

B24 lessonsPRO

Build live-updating React interfaces using WebSockets and libraries like Socket.IO for chat, notifications, and dashboards.

  1. 1WebSocket Fundamentals in the Browser
  2. 2Using Socket.IO with React
  3. 3Building a Real-Time Chat Component
  4. +1 more
Start learning freeUnlock with PRO
53

B24 lessonsPRO

Build fully type-safe APIs without schemas or code generation using tRPC — sharing types between your React frontend and Node.js backend automatically.

  1. 1The Problem tRPC Solves
  2. 2Setting Up tRPC with React and Next.js
  3. 3Queries, Mutations, and Subscriptions
  4. +1 more
Start learning freeUnlock with PRO
54

B24 lessonsPRO

Integrate GraphQL into React applications with Apollo Client — querying, mutating, caching, and keeping UI in sync with server data.

  1. 1GraphQL Fundamentals for React Developers
  2. 2Setting Up Apollo Client in React
  3. 3useQuery and useMutation Hooks
  4. +1 more
Start learning freeUnlock with PRO
55

B24 lessonsPRO

Build fast, responsive UIs that show results immediately before server confirmation — with proper rollback on failure and conflict resolution strategies.

  1. 1What Is Optimistic UI and When to Use It
  2. 2Implementing Optimistic Updates Manually
  3. 3Rollback on Error and Conflict Resolution
  4. +1 more
Start learning freeUnlock with PRO
56

B24 lessonsPRO

Package and publish reusable React component libraries to npm — handling ESM/CJS dual output, peer dependencies, tree shaking, and automated versioning.

  1. 1Bundling with Rollup and tsup for Libraries
  2. 2ESM and CJS Dual Package Output
  3. 3Peer Dependencies and Tree Shaking
  4. +1 more
Start learning freeUnlock with PRO
57

B23 lessonsPRO

Understand React's render vs commit phases, when components update, and when memoization helps.

  1. 1Re-renders vs Commits: When to Optimize
  2. 2React.memo, useMemo, useCallback — In Practice
  3. 3Derived State & Avoiding Extra Renders
Start learning freeUnlock with PRO
58

B23 lessonsPRO

Learn concurrent UI basics with useTransition : keep typing responsive, show a pending hint, and defer non-urgent updates.

  1. 1useTransition for Pending UI (Concurrent Basics)
  2. 2Suspense for Async Boundaries (Concepts)
  3. 3Fallbacks & Splitting Slow Paths
Start learning freeUnlock with PRO
59

B23 lessonsPRO

Load only what you need by code-splitting screens and widgets. Use React.lazy and Suspense to ship faster-feeling apps.

  1. 1React.lazy and Suspense — Lazy Components
  2. 2Route-based & Component-level Splitting
  3. 3Bundles, Cache & Preloading Hints
Start learning freeUnlock with PRO
60

B23 lessonsPRO

Set up tests with Vitest/Jest and React Testing Library ; render components, query by role/label, and run in a jsdom environment.

  1. 1React Testing Library + Vitest/Jest Setup
  2. 2Queries, Events, Assertions — Forms & Async UI
  3. 3Mocking Fetch & Timers
Start learning freeUnlock with PRO
61

B24 lessonsPRO

Build full-stack web apps with Next.js 14+ App Router: file-based routing, layouts, server components, and metadata.

  1. 1App Router File Conventions
  2. 2Server vs Client Components in Next.js
  3. 3Dynamic Routes & Route Groups
  4. +1 more
Start learning freeUnlock with PRO
62

B24 lessonsPRO

Fetch, cache, and revalidate data in Next.js App Router using fetch options, unstable_cache, and on-demand revalidation.

  1. 1fetch() with Cache Options in Next.js
  2. 2unstable_cache & React cache()
  3. 3Incremental Static Regeneration (ISR)
  4. +1 more
Start learning freeUnlock with PRO
63

B24 lessonsPRO

Add authentication to Next.js apps using Auth.js (NextAuth v5): OAuth providers, credentials, sessions, and route protection.

  1. 1Setting Up Auth.js in Next.js App Router
  2. 2Session Management & useSession Hook
  3. 3Credentials Provider & Custom Login
  4. +1 more
Start learning freeUnlock with PRO
64

B24 lessonsPRO

Transfer your React knowledge to mobile by learning React Native primitives, styling, navigation, and native device APIs.

  1. 1React Native Core Components vs Web DOM
  2. 2Styling with StyleSheet API & Flexbox
  3. 3Navigation with Expo Router
  4. +1 more
Start learning freeUnlock with PRO
65

B24 lessonsPRO

Deploy React and Next.js apps to production using Vercel, AWS S3/CloudFront, and Docker containers with CI/CD pipelines.

  1. 1Deploying to Vercel: Zero-Config & Preview URLs
  2. 2Hosting a React SPA on AWS S3 & CloudFront
  3. 3Dockerizing a React/Next.js App
  4. +1 more
Start learning freeUnlock with PRO
66

B24 lessonsPRO

Use React 19 Server Actions and Next.js form actions to handle mutations server-side — eliminating API routes for common form patterns with progressive enhancement.

  1. 1Server Actions in React 19 and Next.js
  2. 2Form Actions: Replacing API Routes for Mutations
  3. 3useActionState and useFormStatus
  4. +1 more
Start learning freeUnlock with PRO
67

B24 lessonsPRO

Harden React applications against XSS, CSRF, and other vulnerabilities — with practical guidance on Content Security Policy, secrets management, and safe rendering.

  1. 1XSS in React: dangerouslySetInnerHTML and Third-Party Scripts
  2. 2CSRF Protection in React and API Setups
  3. 3Content Security Policy for React Apps
  4. +1 more
Start learning freeUnlock with PRO
68

B24 lessonsPRO

Build a scalable design token system that powers multi-theme React component libraries — from token definition through CSS variables, Tailwind integration, and Style Dictionary.

  1. 1What Are Design Tokens and Why They Matter
  2. 2Style Dictionary: Transforming and Generating Tokens
  3. 3Tokens in Tailwind, CSS Variables, and CSS-in-JS
  4. +1 more
Start learning freeUnlock with PRO
69

B24 lessonsPRO

Build cross-platform desktop applications using Electron with a React frontend — covering IPC communication, native APIs, and distribution packaging.

  1. 1Electron Architecture: Main and Renderer Processes
  2. 2Setting Up React with Electron
  3. 3IPC Communication Between Processes
  4. +1 more
Start learning freeUnlock with PRO
70

B23 lessonsPRO

Build compound components: parent provides context, children consume it for flexible APIs.

  1. 1Parent–Child Coordination via Context
  2. 2API Ergonomics with Composition
  3. 3Slots Pattern with Clearly Named Children
Start learning freeUnlock with PRO
71

B23 lessonsPRO

Build large forms with small, robust pieces: field arrays, dynamic sections, and simple validation flows.

  1. 1Field Arrays, Dynamic Forms, Validation Flows
  2. 2Async Validation & Dependent Fields
  3. 3Performance Tricks for Large Forms
Start learning freeUnlock with PRO
72

B23 lessonsPRO

Go beyond basics: nested layouts, conceptual route loaders, and simple prefetching ideas for smoother navigation.

  1. 1Nested Layouts, Loaders (Concept), Prefetching
  2. 2Auth Flows & Protected Routes
  3. 3Scroll Restoration & Not-Found Routes
Start learning freeUnlock with PRO
73

B23 lessonsPRO

Know what belongs to the server cache and what is local UI state. Fetch, refresh, and avoid mixing concerns.

  1. 1Distinguishing Server Data and Local UI State
  2. 2Normalization & Optimistic Updates (Concepts)
  3. 3Sync Patterns Without Heavy Libs
Start learning freeUnlock with PRO
74

B23 lessonsPRO

Create accessible overlays: render with portals, keep focus inside, and support quick close with Escape/backdrop.

  1. 1Portals, Focus Trap, Escape-to-Close
  2. 2Global Overlay Manager (Context + Reducer)
  3. 3Announcements for Accessibility (aria-live)
Start learning freeUnlock with PRO
75

B23 lessonsPRO

Prepare apps for production: dev vs prod builds, source maps, simple environment variables, and small checks to ship confidently.

  1. 1Dev/Prod Builds, Source Maps, Envs
  2. 2Bundle Analysis & Trimming Unused Code
  3. 3Basic CI: Lint → Test → Build
Start learning freeUnlock with PRO
76

C14 lessonsPRO

Master imperative React APIs — expose custom component instance values to parents using forwardRef and useImperativeHandle for scenarios where declarative patterns fall short.

  1. 1forwardRef: Exposing DOM Refs to Parents
  2. 2useImperativeHandle: Custom Instance Values
  3. 3Building an Imperative Component API
  4. +1 more
Start learning freeUnlock with PRO
77

C14 lessonsPRO

Learn React 18's useSyncExternalStore hook — the correct way to synchronize React components with external state sources like browser APIs, global stores, and third-party libraries.

  1. 1The Problem with External Store Subscriptions
  2. 2useSyncExternalStore API and Parameters
  3. 3Subscribing to Browser APIs
  4. +1 more
Start learning freeUnlock with PRO
78

C14 lessonsPRO

Decompose large React frontends into independently deployed micro-frontends using Module Federation and single-spa.

  1. 1Micro-Frontend Concepts & Trade-offs
  2. 2Module Federation with Webpack 5
  3. 3Shared State & Routing Between MFEs
  4. +1 more
Start learning freeUnlock with PRO
79

C14 lessonsPRO

Understand server-side rendering mechanics, hydration, selective hydration, and streaming HTML with React's renderToPipeableStream.

  1. 1How React SSR Works Under the Hood
  2. 2Hydration Errors: Causes & Fixes
  3. 3Selective Hydration & Streaming HTML
  4. +1 more
Start learning freeUnlock with PRO
80

C14 lessonsPRO

Level up React TypeScript skills with discriminated unions, mapped types, conditional types, and type-safe component APIs.

  1. 1Discriminated Unions for Component Variants
  2. 2Conditional & Mapped Types in React
  3. 3Polymorphic Components with 'as' Prop
  4. +1 more
Start learning freeUnlock with PRO
81

C14 lessonsPRO

Measure and improve Core Web Vitals (LCP, INP, CLS) in React apps with profiling tools, bundle analysis, and targeted optimisations.

  1. 1Measuring Core Web Vitals in React Apps
  2. 2Bundle Analysis & Code Splitting Strategy
  3. 3Image & Font Optimisation in React
  4. +1 more
Start learning freeUnlock with PRO
82

C14 lessonsPRO

Organise multiple React apps and shared libraries in a monorepo using Nx with smart task scheduling and affected-based CI.

  1. 1Creating an Nx Monorepo with React Apps
  2. 2Shared Libraries & Internal Packages
  3. 3Nx Affected Commands & Caching
  4. +1 more
Start learning freeUnlock with PRO
83

C14 lessonsPRO

Escape full-page hydration by adopting the Islands Architecture — selectively hydrating only the interactive React components that need it using Astro.

  1. 1The Full Hydration Problem
  2. 2Islands Architecture: Selective Hydration
  3. 3Astro and React Islands Setup
  4. +1 more
Start learning freeUnlock with PRO
84

C14 lessonsPRO

Integrate WebAssembly modules into React applications for computationally intensive tasks — from Rust WASM modules to shared memory and worker threads.

  1. 1What Is WebAssembly and Where React Fits
  2. 2Loading WASM Modules in React
  3. 3Rust to WASM with wasm-pack and React
  4. +1 more
Start learning freeUnlock with PRO
85

C14 lessonsPRO

Serve React applications from the edge with sub-millisecond latency — using Cloudflare Workers, streaming SSR, and edge-native caching strategies.

  1. 1What Is Edge Rendering and Why It Matters
  2. 2React on Cloudflare Workers with Hono
  3. 3Streaming SSR from the Edge
  4. +1 more
Start learning freeUnlock with PRO
86

C14 lessonsPRO

Instrument React applications with OpenTelemetry to collect traces, measure real user performance, and correlate frontend events with backend spans.

  1. 1Frontend Observability: What and Why
  2. 2OpenTelemetry Traces from the Browser
  3. 3Real User Monitoring and Web Vitals
  4. +1 more
Start learning freeUnlock with PRO
87

C14 lessonsPRO

Use React 18 streaming SSR and Suspense to progressively deliver HTML to the browser — improving perceived performance without waiting for all data to load.

  1. 1React 18 Streaming: How renderToPipeableStream Works
  2. 2Suspense Boundaries and Streaming Priority
  3. 3Progressive Hydration with Selective Hydration
  4. +1 more
Start learning freeUnlock with PRO
88

C14 lessonsPRO

Implement Webpack Module Federation to build and deploy React micro-frontends independently — sharing dependencies, state, and routing across remote applications.

  1. 1Module Federation: Dynamic Runtime Imports
  2. 2Configuring Host and Remote React Apps
  3. 3Sharing State and Routing Between Remotes
  4. +1 more
Start learning freeUnlock with PRO
CoddyKit PRO

Unlock all 88 courses in this path, and every other path

AI tutor, certification exam and certificate. Works on web, iOS and Android.

See all plans
Yearly$29.90 / yearAbout $2.49 a monthPay onceLifetime$69.99 onceNo renewals. PRO forever.
Course Overview

Build Real Interfaces with React

React is the JavaScript library that defines how most production UIs are built today — from single-page apps and Next.js sites to cross-platform mobile and desktop applications. This track covers the complete discipline: component architecture, state management, data fetching, performance, testing, and deployment. It is grounded in how React actually works — the reconciler, the fiber model, hooks semantics — not just its surface API.

What You Will Learn

You will start with JSX, props, state, and controlled components, then move into useEffect, useRef, and useReducer. Practical courses cover routing with React Router v6, form handling with React Hook Form, server state with React Query and SWR, global state with Redux Toolkit, Zustand, and Jotai. You will work with TypeScript in React, write integration and E2E tests, build design systems with Storybook, handle real-time UIs over WebSockets, and ship type-safe APIs with tRPC. The path also includes Next.js App Router, server components, server actions, and authentication with NextAuth.js.

The Learning Path

Ninety-five courses run from A1 through C1. The A1 and A2 courses establish React fundamentals, JSX rendering, CSS animations, local storage persistence, and dark mode. B1 courses build confidence with context patterns, i18n, React Spring, Framer Motion, drag-and-drop with dnd-kit, and complex data tables with TanStack Table. B2 courses tackle rendering and memoization, Suspense, code splitting, React Native for React developers, deploying to Vercel and AWS, and Electron for desktop apps. The C1 level finishes with advanced topics: Micro-Frontend Architecture, SSR and Hydration Deep Dive, Module Federation, Islands Architecture with Astro, WebAssembly integration, Edge Rendering with Cloudflare Workers, and OpenTelemetry for frontend observability.

How It Works

Each course is split into short, focused lessons you complete in the built-in code editor with real-time feedback. An AI tutor is available whenever you are stuck on a concept or a failing test. You can work through the track sequentially or jump to the level that matches your current experience.

Tools

Practice with AI, not just read

Supercharge your learning with AI-powered tools and features

AI Code GeneratorGenerate code with AIAI Bug FixFind & fix code errorsPROAI InsightDeep code analysisPROAI ChatChat with AI tutorAsk Super QuestionGet expert-level answersPROCreate LessonAI-powered lesson builderPROStart Certification ExamEarn your certificatePROCode EditorWrite & run codeStart ChallengeTest your skills

How You'll Learn

  1. 01

    Interactive Lessons

    Hands-on coding exercises with real-time feedback

  2. 02

    AI Tutor

    Get instant help from our AI when you're stuck

  3. 03

    Built-in Editor

    Write and run code directly in your browser

  4. 04

    Certificate

    Earn a certificate when you complete the course

Keep exploring

Related learning paths

Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.TypeScript Academy logoTypeScript AcademyEnhance your JavaScript projects with TypeScript through lessons at TypeScript Academy.C# Academy logoC# AcademyMaster C# programming and develop versatile software solutions with C# Academy.Firebase Auth & Realtime Database Apps logoFirebase Auth & Realtime Database AppsMaster Firebase Authentication and Realtime Database to build scalable, secure, and dynam…Design Systems & Component Libraries logoDesign Systems & Component LibrariesMaster the art of creating robust design systems and efficient component libraries to acc…
FAQ

Frequently Asked Questions

Is the React Academy course free?

Yes. You can start the React Academy course for free and complete its interactive lessons at no cost. An optional PRO subscription unlocks advanced AI tools and a shareable certificate.

Do I need prior experience to learn React?

No. The course begins with the fundamentals and gradually moves to more advanced topics, so you can start even with no prior React experience.

How will I learn React on CoddyKit?

You learn by doing. Short interactive lessons pair a clear explanation with a hands-on coding exercise that runs in real time, and a 24/7 AI tutor gives personalized help whenever you get stuck.

Do I get a certificate for completing React Academy?

Yes. PRO learners can take an exam and earn a shareable certificate of completion with a verifiable code for the React Academy course.

Can I learn React on my phone?

Yes. CoddyKit is available on the web and as native iOS and Android apps, so you can learn React on any device and your progress syncs across them.

How much does CoddyKit PRO cost?

The first course of React Academy is free. CoddyKit PRO unlocks every course: $5.90 per week, $7.90 per month, $29.90 per year, or $69.99 once for lifetime access with no renewals.

How long does it take to complete React Academy?

React Academy has 88 courses and 324 lessons. Most lessons take about 5–10 minutes, so the whole path is roughly 38 hours of hands-on practice, at your own pace.

Start React Academy Now

Join thousands of learners mastering programming with AI-powered lessons.

Start learning freeBrowse All Courses