Skip to content
aviral gupta
Get in touch

// LEARN · LANGUAGES & FRAMEWORKS

React

A practical React course from a first component to reducers, effects, forms with Actions, Suspense and Server Components. Every example is run and checked against React 19.3.

Level: Beginner to advanced · For: Developers who know basic JavaScript and want to build user interfaces with React, from a first component to a production app.

Start the course

Syllabus

Beginner

Complete

After this level you can

  • Build a UI from small components with JSX, props, conditional rendering and lists with stable keys
  • Add interactivity with event handlers and state, and explain why state is a snapshot and how updates are batched
  • Update objects and arrays in state immutably
  • Create a local React project with Vite and inspect it with React Developer Tools
  • Plan a UI with Thinking in React: find the minimal state, decide where it lives and lift it up
  1. B1Quick start5 of 5 written · 5 lessonsRuns in your browser

    Build a first interactive game with components, props and state

    You build: Tic-tac-toe with history

    1. B1.1Components and JSX
    2. B1.2Passing props
    3. B1.3Adding state
    4. B1.4Lifting state up
    5. B1.5Build: tic-tac-toe with history
  2. B2Describing the UI6 of 6 written · 6 lessonsRuns in your browser

    Compose pages from pure components

    You build: A profile gallery

    1. B2.1Your first component, import and export
    2. B2.2JSX and curly braces
    3. B2.3Props and children
    4. B2.4Conditional rendering
    5. B2.5Lists and keys
    6. B2.6Purity and the UI tree
  3. B3Adding interactivity6 of 6 written · 6 lessonsRuns in your browser

    Respond to users and update state correctly

    You build: A shopping cart

    1. B3.1Event handlers and propagation
    2. B3.2State: a component's memory
    3. B3.3Render and commit
    4. B3.4State as a snapshot and batching
    5. B3.5Updating objects and arrays in state
    6. B3.6Build: a shopping cart
  4. B4Setting up a project4 of 4 written · 4 lessonsRuns on your computer

    Create, run and inspect a local React app

    You build: A Vite project from scratch

    1. B4.1Installation: a framework or from scratch
    2. B4.2A Vite project from scratch
    3. B4.3Editor, linting and formatting
    4. B4.4React Developer Tools
  5. B5Managing state6 of 6 written · 6 lessonsRuns in your browser

    Structure state and share it between components

    You build: A searchable product table

    1. B5.1Reacting to input with state
    2. B5.2Choosing the state structure
    3. B5.3Sharing state between components
    4. B5.4Preserving and resetting state
    5. B5.5Thinking in React
    6. B5.6Build: a searchable product table

Beginner project

Recipe browser

A single-page app that lists, searches and filters recipes from a JSON array, with a detail view and a servings scaler, built from pure components.

Runs in your browserSelf-checked against a rubric

Open the project guide

Intermediate

Coming soon

After this level you can

  • Move complex state logic into a reducer and share it with context
  • Use refs for values and DOM access, and write effects that synchronise with external systems, including cleanup
  • Decide when an effect is not needed, and remove unnecessary effect dependencies
  • Extract logic into custom hooks and subscribe to external stores with useSyncExternalStore
  • Build forms with Actions, useActionState, useFormStatus and useOptimistic, and test components with Vitest and React Testing Library
  1. I1Reducers and contextComing soon · 5 lessonsRuns in your browser

    Scale state logic across a component tree

    You build: A task manager

    1. I1.1Coming soon
    2. I1.2Coming soon
    3. I1.3Coming soon
    4. I1.4Coming soon
    5. I1.5Coming soon
  2. I2Refs and effectsComing soon · 5 lessonsRuns in your browser

    Step outside React safely with refs and effects

    You build: A chat-room connection with a timer

    1. I2.1Coming soon
    2. I2.2Coming soon
    3. I2.3Coming soon
    4. I2.4Coming soon
    5. I2.5Coming soon
  3. I3Effects done right and custom hooksComing soon · 6 lessonsRuns in your browser

    Remove needless effects and reuse logic in custom hooks

    You build: useOnlineStatus and useLocalStorage hooks

    1. I3.1Coming soon
    2. I3.2Coming soon
    3. I3.3Coming soon
    4. I3.4Coming soon
    5. I3.5Coming soon
    6. I3.6Coming soon
  4. I4Forms and ActionsComing soon · 5 lessonsRuns in your browser

    Submit data with pending, error and optimistic states

    You build: An optimistic comment form

    1. I4.1Coming soon
    2. I4.2Coming soon
    3. I4.3Coming soon
    4. I4.4Coming soon
    5. I4.5Coming soon
  5. I5Testing and debuggingComing soon · 5 lessonsRuns on your computer

    Prove components work and find faults

    You build: A test suite for the task manager

    1. I5.1Coming soon
    2. I5.2Coming soon
    3. I5.3Coming soon
    4. I5.4Coming soon
    5. I5.5Coming soon

Intermediate project

Kanban board

Columns and cards managed with a reducer and context, keyboard moves, persistence through a custom hook and an add-card form using Actions.

Runs on your computerSelf-checked against a rubric

Advanced

Coming soon

After this level you can

  • Use Suspense, lazy, use, transitions and useDeferredValue to keep the UI responsive
  • Measure rendering with the Profiler, and apply memo or the React Compiler where measurements justify it
  • Explain server rendering, hydration and Server Components, and where the 'use client' and 'use server' boundaries sit
  • Use React DOM APIs: portals, resource preloading, document metadata, ViewTransition and Fragment refs
  • Handle errors with error boundaries, build accessible components, avoid XSS pitfalls, and type components with TypeScript
  1. A1Suspense and concurrencyComing soon · 6 lessonsRuns in your browser

    Keep the UI responsive during slow work

    You build: A search page that never freezes

    1. A1.1Coming soon
    2. A1.2Coming soon
    3. A1.3Coming soon
    4. A1.4Coming soon
    5. A1.5Coming soon
    6. A1.6Coming soon
  2. A2PerformanceComing soon · 5 lessonsBrowser and your computer

    Measure first, then optimise with memo or the React Compiler

    You build: Optimising a slow list

    1. A2.1Coming soon
    2. A2.2Coming soon
    3. A2.3Coming soon
    4. A2.4Coming soon
    5. A2.5Coming soon
  3. A3Server rendering and Server ComponentsComing soon · 5 lessonsRuns on your computer

    Render on the server and hydrate on the client

    You build: A server-rendered page with a hydrated widget

    1. A3.1Coming soon
    2. A3.2Coming soon
    3. A3.3Coming soon
    4. A3.4Coming soon
    5. A3.5Coming soon
  4. A4React DOM APIsComing soon · 5 lessonsRuns in your browser

    Use the platform features React exposes

    You build: An animated modal gallery

    1. A4.1Coming soon
    2. A4.2Coming soon
    3. A4.3Coming soon
    4. A4.4Coming soon
    5. A4.5Coming soon
  5. A5Robust, accessible and typed componentsComing soon · 5 lessonsBrowser and your computer

    Ship components that fail safely, work for everyone and are typed

    You build: A typed, accessible form library

    1. A5.1Coming soon
    2. A5.2Coming soon
    3. A5.3Coming soon
    4. A5.4Coming soon
    5. A5.5Coming soon

Advanced project

Movie search with streaming results

Suspense-based loading, transitions for search input, code-split detail pages, error boundaries and a server-rendered first page.

Runs on your computerSelf-checked against a rubric

Capstone

Capstone

Accessible personal dashboard

A Vite React app in TypeScript with task, note and timer widgets, context-based settings, optimistic updates, tests and a static deployment.

Runs on your computerSelf-checked against a rubric

Sources