React

Build modern, dynamic user interfaces with React. Learn component-based architecture and master the most popular JavaScript library for front-end development.

Learn React from the ground up — components, props, state, hooks and building interactive UIs — with practical beginner-friendly lessons.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Ready to build real apps? Start with React.

Start with Lesson 1 — Introduction to React. We recommend finishing the JavaScript course first for the best experience.

Lessons in this course

• Introduction to React — What React is, how the component model works, and setting up your first app
• Components and Props — Build reusable UI pieces and pass data between them using props
• State and Lifecycle — Make components dynamic by tracking changing data with state
• useState in Depth — Async, batched state updates — the functional updater and avoiding stale state
• Handling Events — Respond to clicks, key presses, and other user interactions in React
• Conditional Rendering — Show and hide UI with &&, ternaries, and early returns
• Lists & Keys — Render arrays with .map() and why every item needs a stable key
• Hooks (useState, useEffect) — Master the two most important React hooks for state and side effects
• useEffect & the Dependency Array — Side effects, the dependency array, cleanup, and fixing infinite loops
• Data Fetching with useEffect — Fetch data the right way — with loading and error states
• useRef — DOM Refs & Persisting Values — Reference DOM nodes and persist values without causing re-renders
• useContext & the Context API — Share global state and avoid prop-drilling with the Context API
• useReducer — Manage complex state with actions and a reducer
• Custom Hooks — Extract and reuse stateful logic in your own hooks
• useMemo & useCallback — Memoize values and functions for referential stability
• React.memo & Avoiding Re-renders — Skip unnecessary re-renders by memoizing components
• Lifting State Up — Share state between components by moving it to a common parent
• Forms and Controlled Components — Build forms that React controls — inputs, selects, and validation
• Controlled vs Uncontrolled Components — The two ways React handles form inputs — and when to use each
• Lazy Loading & Suspense — Code-split your app with React.lazy and Suspense
• Error Boundaries — Catch render errors and show a fallback UI
• React Router — Add multiple pages and navigation to your React app with React Router
• TypeScript with React — Type your props, state, events, and hooks with TypeScript
• Component Composition & children — Build flexible components with the children prop and composition over configuration
• Portals — Modals & Tooltips — Render outside the parent DOM tree for modals, tooltips, and overlays
• Checkpoint: Build with Hooks — Review & combine useState, useEffect, useRef, useReducer and Context — then a quiz
• Data Fetching with TanStack Query — The modern data layer — queries, caching, and mutations
• React Router: Params, Nested Routes & Loaders — URL params with useParams, nested routes, Outlet, and data loaders
• Forms with React Hook Form + Zod — The current standard for performant forms with schema validation
• Global State with Redux Toolkit — Store, slices, and async thunks the modern Redux way
• Lightweight State with Zustand — Simple, fast global state without the boilerplate
• Checkpoint: A Mini App — Combine state management + data fetching into a real build — then a quiz
• Testing with React Testing Library + Vitest — Write tests that resemble how users actually use your components
• Styling React with Tailwind CSS — The dominant styling approach for modern React apps
• Next.js & the App Router — The leading React framework — file-based routing and server rendering
• React Server Components & Server Actions — The React 19 shift — less JavaScript, direct data access, and form actions
• React 19 Hooks: use(), useActionState & useOptimistic — The newest React primitives for promises, form state, and optimistic UI
• JSX In Depth — How JSX compiles to React.createElement — expressions, attributes, and the rules
• Props & One-Way Data Flow — Pass, destructure, and default props; children; and why data flows one way
• Fragments & Multiple Elements — Return several elements without wrapper-div soup using <></> and keyed fragments
• How React Rendering Works — Render vs commit, the Virtual DOM, reconciliation, and what triggers a re-render
• Styling in React — className vs inline styles, CSS Modules, and conditional classes
• Strict Mode & Double-Render — Why React intentionally double-invokes in dev and how to write effects that survive it
• useLayoutEffect vs useEffect — Measure layout and avoid flicker by running before the browser paints
• Immutable State Updates — Update arrays and objects without mutation so React actually re-renders
• Checkpoint: React Fundamentals — Combine JSX, props, rendering and immutable state in a build — then a quiz
• useId for Stable Unique IDs — Generate SSR-safe IDs for accessible label/input and aria pairings
• useTransition & Responsive UI — Mark non-urgent updates so the UI stays responsive during heavy renders
• useDeferredValue — Let expensive children lag behind a fast input for smooth typing and search
• useSyncExternalStore — Subscribe safely to external stores and browser APIs without tearing
• forwardRef & useImperativeHandle — Pass refs to children and expose an imperative API like focus() or scrollTo()
• Compound Components Pattern — Share implicit state via context for flexible APIs like <Tabs><Tab/></Tabs>
• Render Props Pattern — Share logic with a function-as-child prop — and when custom hooks replace it
• Higher-Order Components (HOCs) — Wrap a component to add behavior — withAuth, withLogging, and prop forwarding
• Checkpoint: Patterns & Modern Hooks — Build a reusable pattern with modern hooks — then a quiz
• Building a Complete React App — Put everything together in a full project with real-world patterns
• useFormStatus & Form State — Read a parent form's pending state from a child with the React 19 useFormStatus hook
• Accessibility in React — Semantic HTML, ARIA, keyboard navigation and focus management for inclusive SPAs
• Animations with Framer Motion — Declarative animations, variants, AnimatePresence and gestures with Framer Motion

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary