React 19 Course: Build Modern Web Interfaces

The course in brief

This course teaches you to design web interfaces with React 19, the reference front-end library. You will write reusable components, manage state and events, load data with effects, share state with Context and useReducer, then use React 19's form Actions. The pure logic is tested automatically and the components come with React Testing Library-style tests.

What you will be able to do

• Design an interface as reusable components with JSX, props and children
• Manage local state and events while respecting immutability
• Render lists and share state between components while avoiding redundant state
• Synchronize a component with the outside world using useEffect, cleanup and request cancellation
• Structure global state with useReducer, Context and custom hooks
• Submit forms with React 19 Actions (useActionState, useFormStatus, useOptimistic)

Syllabus: 6 lessons

1. 01

   Components, JSX and Props

   16 minFree preview
   • Write function components that return JSX
   • Pass data to components with props and children
   • Apply the rules of JSX (expressions, attributes, fragments)

   Function componentsJSXProps and children

2. 02

   State with useState and Events

   18 min
   • Add local state to a component with useState
   • React to user events
   • Update objects and arrays immutably and manage a controlled field

   useStateEvent handlingImmutable updates

3. 03

   Lists, Conditional Rendering and Shared State

   18 min
   • Render lists with map and stable keys
   • Choose the right form of conditional rendering
   • Lift state up to a common parent and compute derived data during rendering

   Lists and keysConditional renderingLifting state up

4. 04

   Effects, Synchronization and Data Loading

   20 min
   • Use useEffect to synchronize with an external system
   • Write a cleanup function and manage dependencies
   • Load data while handling loading, errors and stale responses

   useEffectCleanup and dependenciesData loading

5. 05

   useReducer, Context and Custom Hooks

   20 min
   • Centralize complex state logic with useReducer
   • Share data without prop drilling using Context
   • Extract reusable logic into a custom hook

   useReducerContextCustom hooks

6. 06

   Forms and Actions with React 19

   20 min
   • Submit a form with an Action (the action prop of a <form>)
   • Handle the result, errors and pending state with useActionState and useFormStatus
   • Display an optimistic update with useOptimistic

   Form ActionsuseActionState and useFormStatususeOptimistic

Frequently asked questions