Free course

React Course

Learn React by building interfaces from components, JSX, props, state, hooks, events, forms, lists, and predictable one-way data flow.

6 modules · 46 lessons · No signup

Prerequisites: JavaScript, HTML and CSS

~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build a small interactive React application with reusable components, local state, forms, lists, and one carefully chosen effect.

Take this course offline

Subscribe to my newsletter to get every free book, downloadable course, and complete software download.

Get the downloads

Course contents

  1. Start a React project

    Understand React, create a project, and inspect its entry point.

    1. ✓ What React is
    2. ✓ Create a React project with Vite
    3. ✓ Follow the project entry point
    4. ✓ Development and production builds
    5. ✓ Install React Developer Tools

  2. Components and JSX

    Describe interfaces with reusable components and JavaScript markup.

    1. ✓ Write your first component
    2. ✓ Compose components
    3. ✓ JSX is markup inside JavaScript
    4. ✓ The basic JSX rules
    5. ✓ Put JavaScript expressions in braces
    6. ✓ Set attributes and styles
    7. ✓ Keep rendering pure
    8. ✓ Check your understanding: components and JSX

  3. Props and state

    Pass data down and remember information between renders.

    1. ✓ Pass data with props
    2. ✓ Treat props as read-only
    3. ✓ Compose wrappers with children
    4. ✓ Add state with useState
    5. ✓ State is a snapshot
    6. ✓ Update objects and arrays without mutation
    7. ✓ State belongs to a position in the tree
    8. ✓ Check your understanding: props and state

  4. Hooks and effects

    Use Hooks consistently and synchronize with external systems.

    1. ✓ What Hooks are
    2. ✓ Follow the Rules of Hooks
    3. ✓ Effects synchronize external systems
    4. ✓ Write an Effect and its dependencies
    5. ✓ Clean up an Effect
    6. ✓ Why Effects run twice in development
    7. ✓ Extract a small custom Hook
    8. ✓ Check your understanding: Hooks and effects

  5. Events and forms

    Respond to interactions and manage accessible form inputs.

    1. ✓ Handle an event
    2. ✓ Pass data to an event handler
    3. ✓ Understand event propagation
    4. ✓ Control an input with state
    5. ✓ Submit a form
    6. ✓ Know when an input can stay uncontrolled
    7. ✓ Check your understanding: events and forms

  6. Rendering and data flow

    Render conditions and lists, lift state, and debug the result.

    1. ✓ Render a condition
    2. ✓ Render a list with map
    3. ✓ Give list items stable keys
    4. ✓ Group elements with a fragment
    5. ✓ Lift shared state up
    6. ✓ Follow one-way data flow
    7. ✓ Render an overlay with a portal
    8. ✓ Debug component data flow
    9. ✓ Build a React task list
    10. ✓ Check your understanding: rendering and data flow