Sign in Get started

Free course · 36 lessons · Intermediate

React: From Components to Production

Modern React 19 with TypeScript: components, state and effects, forms and Actions, TanStack Query, React Router, performance and the React Compiler, testing and accessibility. Coming from JavaScript? Module 1 shows every example in JavaScript too and teaches the TypeScript you need.

Start the course

1. Components and JSX

Set up a project and learn how React turns components and props into UI.

  1. Setting Up a React Project — Create a React + TypeScript app with Vite and understand the project structure.
  2. TypeScript in React for JavaScript Developers — Read and write the course's TSX examples if you know JavaScript: what the types add, how to type props, state, events and refs, and how to adopt TypeScript gradually.
  3. JSX Essentials — Write markup in JavaScript: expressions, attributes, fragments and rules.
  4. Components and Props — Build reusable components with typed props and default values.
  5. Composition and children — Compose UIs with children, slots and render props instead of inheritance.
  6. Lists, Keys and Conditional Rendering — Render collections correctly and show UI conditionally.

2. State, Events and Effects

Make components interactive and synchronize with the outside world correctly.

  1. useState and Event Handling — Store component state, update it correctly and handle events.
  2. Structuring and Lifting State — Avoid redundant state, derive values, and lift state to the closest common parent.
  3. useReducer for Complex State — Centralize state transitions with reducers and typed actions.
  4. Effects: Synchronizing with External Systems — Use useEffect for subscriptions and external sync — and know when you don't need it.
  5. Refs and the DOM — Hold mutable values and access DOM nodes with useRef.

3. Forms and Validation

Controlled inputs, React 19 Actions, schema validation and accessible forms.

  1. Controlled and Uncontrolled Inputs — Choose between React-managed and DOM-managed form values.
  2. Form Actions with useActionState and useFormStatus — Handle submissions, pending states and errors with React 19 Actions.
  3. Complex Forms with React Hook Form and Zod — Validate with a schema shared between client and server.
  4. Accessible Forms — Labels, errors, focus management and keyboard support for every user.

4. Fetching and Caching Server Data

Load data reliably with TanStack Query, mutations, Suspense and error boundaries.

  1. Fetching Data: Basics and Pitfalls — Why fetching in effects is tricky, and how to do it safely when you must.
  2. Server State with TanStack Query — Cache, dedupe, refetch and paginate server data with useQuery.
  3. Mutations, Invalidation and Optimistic Updates — Change server data and keep the cache consistent.
  4. Suspense and Error Boundaries — Declare loading and error UI around parts of the tree.

5. Routing with React Router

Pages, nested layouts, loaders, protected routes and URL state.

  1. React Router Basics — Define routes, link between pages and read URL parameters.
  2. Nested Routes and Layouts — Share layouts with Outlet and build dashboard-style navigation.
  3. Loaders, Actions and Protected Routes — Load data before rendering and guard routes behind authentication.
  4. Keeping State in the URL — Use search params for filters, pagination and shareable views.

6. Sharing State and Structuring Apps

Context, custom hooks, external stores and project structure.

  1. Context for Shared Values — Provide app-wide values like theme, auth and settings without prop drilling.
  2. Custom Hooks — Extract reusable stateful logic into hooks.
  3. Client State Libraries: Zustand and Redux Toolkit — When to reach for a store and how modern stores look.
  4. Structuring a React Codebase — Organize by feature, define boundaries and keep components maintainable.

7. Performance and Modern React

Rendering performance, the React Compiler, code splitting, transitions, React 19 APIs and Server Components.

  1. How Rendering Works and Memoization — Understand re-renders and when memo, useMemo and useCallback help.
  2. The React Compiler — Automatic memoization at build time and what it expects from your code.
  3. Code Splitting with lazy and Suspense — Load code on demand to speed up the first page load.
  4. Transitions and Deferred Values — Keep the UI responsive during expensive updates.
  5. React 19 APIs and Server Components — use(), Actions, useOptimistic, document metadata, and how Server Components change architecture.

8. Testing and Accessibility

Component tests with Vitest and Testing Library, network mocking, accessibility and E2E tests.

  1. Component Tests with Vitest and Testing Library — Test components the way users use them.
  2. Testing Async UI with MSW — Mock the network instead of modules for realistic data-fetching tests.
  3. Accessibility Fundamentals in React — Semantic HTML, keyboard support, focus management and ARIA.
  4. End-to-End Tests with Playwright — Verify critical journeys in real browsers.