Mariam N.
Sample Clear explanations of why
Amara always explains why a pattern exists before showing it. The derived state lesson fixed a habit I had for years.
React 19 and TypeScript: build a real dashboard app
Components, hooks, forms with Actions, data fetching, testing and deployment, learned by building one working project
Created by Amara Okafor
- Updated September 2026
- English
- Intermediate
What you will learn
- Structure a React 19 project with Vite, TypeScript and a sensible folder layout
- Type props, state, events and API responses without fighting the compiler
- Handle forms with Actions, useActionState and useOptimistic
- Fetch, cache and update server data with TanStack Query
- Write component tests with Vitest and React Testing Library
- Build and deploy the app to a static host with environment variables
Course content
Getting started with React and TypeScript
Routing and URL state
- Video: Adding React Router 12 min
- Video: Filters that live in the URL 11 min
- Article: Not found and error routes 8 min
- Video: Code splitting with lazy routes 9 min
Server data with TanStack Query
- Article: Why a data library at all 9 min
- Video: Queries, keys and loading states 14 min
- Video: Mutations and cache invalidation 13 min
- Video: Validating API responses with Zod 10 min
Forms with React 19 Actions
- Video: Form actions and useActionState 14 min
- Video: Optimistic updates with useOptimistic 12 min
- Article: Accessible form patterns 10 min
- Video: Edit dialogs and reusing form logic 11 min
State management and performance
- Video: Context for app wide state 10 min
- Video: useReducer for complex local state 11 min
- Video: The React Compiler and memoisation 12 min
- Video: Charts without slowing the page 10 min
Testing and shipping
- Video: Setting up Vitest and Testing Library 10 min
- Video: Testing forms and async behaviour 14 min
- Article: Environment variables and production builds 9 min
- Video: Deploying the dashboard 11 min
- Quiz: Final check 5 min
Requirements
- Comfortable with modern JavaScript: arrow functions, modules, promises and array methods
- Node.js 20 or newer installed
- Some exposure to React is helpful but not strictly required
Description
This course teaches React the way it is used in real teams in 2026: function components, hooks, TypeScript everywhere, and a clear line between server data and UI state. Instead of isolated snippets, we build one project, a small expense tracking dashboard, from an empty Vite project to a deployed app.
What you will build
The dashboard has a sign in screen, a list of expenses with filters, a form to add and edit entries, charts by category, and optimistic updates so the interface feels instant. Along the way you meet the React 19 features that matter day to day:
- Actions,
useActionStateanduseOptimisticfor forms - The
usehook and Suspense for loading states refas a regular prop, withoutforwardRef- TanStack Query for server data and caching
- Vitest and React Testing Library for tests
How the course is structured
Each section adds one capability to the app. Lessons are short and every one ends with a commit in the course repository, so you can compare your code at any point. TypeScript is introduced gently: we type props, state and API responses as we need them, not as a separate theory block.
Who it suits
You should already know JavaScript well and have seen React at least once. If you have built a tutorial app and felt lost when it came to structure, forms and data, this course fills that gap.
Who this course is for
- JavaScript developers moving from tutorials to real React projects
- Developers returning to React after the class component era
- Back end developers who need to ship front end features
Instructor
Amara Okafor
Full stack JavaScript developer teaching React, Next.js and Node through real projects
- 4.5 instructor rating
- 22 reviews
- 9,044 students
- 3 courses
- Sample
I build web applications for small product teams, mostly with React, Next.js, Node.js and PostgreSQL. Most of my week goes into the unglamorous parts: data fetching, forms, auth, error states and deployments that do not break on a Friday.
My courses follow one project from an empty folder to a deployed app. I explain why a pattern exists before I show it, and I leave my mistakes in when they teach something useful.
Outside client work I mentor junior developers and review a lot of pull requests, which is where most of my lesson ideas come from.
Student reviews
Daniel R.
Sample Finally a realistic React project
Most courses stop at a to do list. Building a dashboard with real loading and error states taught me far more.
Sofia L.
Sample Great coverage of React 19 forms
The lessons on useActionState and useOptimistic were the clearest explanation I have found. I used the pattern at work the same week.
Kenji W.
Sample Solid, slightly fast in places
The TanStack Query section moves quickly. I rewatched two lessons, but the commits per lesson made it easy to catch up.
Ana G.
Sample TypeScript introduced at the right pace
I was scared of TypeScript. Typing things only when we needed them made it feel natural instead of a wall of theory.
Peter H.
Sample Testing section is excellent
Mock Service Worker plus Testing Library is now my default setup. I wish the deployment lesson covered more hosts.
Joao V.
Sample Good content, wanted more styling
The React content is strong, but the UI styling is minimal. Fine for learning, less nice for a portfolio piece.
Fiona C.
Sample Feature folders made it click
The folder structure lesson sounds small, but it changed how I organise every project now.
Keep exploring
All Web Development courses
More in Web Development
$69.99
Enroll now