React 19 Quest

Tracks

1. 01🧱The Stack in One Breath

   0/7 lessons

   Vite, React 19, TypeScript, Tailwind v4 — wired together from zero

   Most React tutorials hand you a magic create-something script and call it foundation. We're going to actually look at the parts. By the end of this track you can spin up a Vite + React 19 + strict TS + Tailwind v4 project, route it like a real SPA, and explain every config file you touch.

   Lesson list (7)

   • 01
     Modern JS in 15 Minutes~15 min · javascript, es2020, refresher, prerequisite
   • 02
     Why Vite (and What It Isn't)~14 min · vite, build-tool, esm, dev-server
   • 03
     Bootstrap in One Breath~18 min · vite, react-19, typescript, tailwind-v4, bootstrap
   • 04
     tsconfig Strict — Every Flag Explained~16 min · typescript, tsconfig, strict, react
   • 05
     Tailwind v4 — The CSS-First Setup~15 min · tailwind, v4, theme, css-variables
   • 06
     SPA Routing with React Router~18 min · react-router, routing, spa, history-api
   • 07
     Project Structure That Survives Growth~14 min · architecture, file-structure, organization

   ✓Quiz · 4 questions→

2. 02🧩Components & Types

   0/7 lessons

   Typed building blocks, composition, and the patterns React 19 retired

   Components are functions. Typed props turn the function into a contract the compiler enforces. We'll build the contracts, learn the composition patterns that still earn their keep, and name the ones that quietly died — HOCs, render props, the things you'll see in old codebases but should not write fresh.

   Lesson list (7)

   • 01
     Components Are Functions, JSX Is Sugar~14 min · components, jsx, fundamentals
   • 02
     Typed Props — Contracts the Compiler Enforces~16 min · typescript, props, generics
   • 03
     Composition Over Inheritance — The React Way~14 min · composition, children, slot-props
   • 04
     Refs in React 19 — Just a Prop Now~13 min · react-19, ref, forwardref
   • 05
     Discriminated Unions — When Props Are Mutually Exclusive~14 min · typescript, discriminated-union, narrowing
   • 06
     Patterns That Quietly Died — HOCs, Render Props, Classes~12 min · history, anti-patterns, hooks
   • 07
     RSC Boundary — Why This Quest Punts~11 min · rsc, server-components, next-js, boundary

   ✓Quiz · 4 questions→

3. 03🪝Hooks in 2026

   0/7 lessons

   Every hook that earns its keep, plus the rules React 19 finally relaxed

   Hooks are how function components hold state, run effects, and share logic. After ten thousand blog posts on the subject, the practical core is small: useState, useEffect, useRef, custom hooks, useContext, useReducer, and the Rules of Hooks. Plus one new entrant — use() — that finally relaxed those rules.

   Lesson list (7)

   • 01
     useState — The Only State Hook You Need Most of the Time~14 min · usestate, state, fundamentals
   • 02
     useEffect — When You Actually Need It (And When You Don't)~18 min · useeffect, synchronization, side-effects
   • 03
     useRef — DOM Refs, Mutable Storage, Callback Refs~14 min · useref, ref, mutable, imperative
   • 04
     Custom Hooks — Sharing Stateful Logic~15 min · custom-hooks, abstraction, reuse
   • 05
     useContext — Sharing State Across the Tree~14 min · usecontext, context, providers
   • 06
     useReducer — When State Has Verbs~12 min · usereducer, reducer, state-machine
   • 07
     Rules of Hooks — And What use() Finally Relaxed~13 min · rules-of-hooks, use, react-19

   ✓Quiz · 4 questions→

4. 04🎨Styling — Tailwind v4 Deep

   0/7 lessons

   Theme tokens, dark mode, @layer, cn() — the patterns the install lesson skipped

   Track 1 lesson 5 got Tailwind v4 wired. This track is what you do with it. Real theme tokens, dark mode that survives reloads, @layer for organizing CSS, the cn() helper that ends class-string wars, animation primitives, and the anti-patterns that bypass v4's design.

   Lesson list (7)

   • 01
     Theme Tokens — Semantic vs Literal~13 min · tailwind, theme, design-tokens
   • 02
     Dark Mode That Survives Reload~13 min · dark-mode, system-preference, tailwind
   • 03
     @layer — Organizing CSS Without Specificity Wars~12 min · css, layer, cascade, tailwind
   • 04
     tailwind-merge + clsx — The cn() Helper~11 min · tailwind-merge, clsx, cn, className
   • 05
     Tailwind Anti-Patterns — What Breaks Quietly~11 min · anti-patterns, tailwind, scanning
   • 06
     Animation Primitives — Transitions, Keyframes, Tailwind Utilities~12 min · animation, transition, keyframes, tailwind
   • 07
     Typography & Spacing — Building a Tiny Design System~12 min · typography, spacing, design-system

   ✓Quiz · 4 questions→

5. 05🌀Async & Suspense

   0/7 lessons

   Promises, Suspense boundaries, use(), and the cwkPippa streaming chat case study

   The data-fetching story in React 19 finally feels clean. Suspense + use() + error boundaries form a trio that handles loading, error, and success without three separate pieces of state per fetch. We'll end with the canonical case study: cwkPippa's streaming chat, where the trio plus a tiny custom hook covers a real production data flow.

   Lesson list (7)

   • 01
     Promises in React — Fetch, State, Errors~14 min · promises, fetch, async
   • 02
     Suspense — Where the Loading State Lives~13 min · suspense, boundary, fallback
   • 03
     Error Boundaries — The One Class You Still Write~11 min · error-boundary, errors, fallback
   • 04
     The use() Hook — Inline Async Reads~13 min · use, react-19, suspense
   • 05
     fetch + AbortController — Cancelling in Flight~11 min · fetch, abortcontroller, cancellation
   • 06
     TanStack Query — A Brief Touchpoint~11 min · tanstack-query, state-management, ecosystem
   • 07
     Case Study — cwkPippa's Streaming Chat~20 min · case-study, cwkpippa, streaming, sse, real-world

   ✓Quiz · 4 questions→

6. 06⚡The Actions Story

   0/6 lessons

   useActionState, useFormStatus, useOptimistic — the React 19 trio the corpus had open

   Actions are React 19's full answer to 'how do forms and mutations work?' — and they're the audit-gap this quest was built to fill. Three hooks, one form-action model, and Zod for validation. By the end you have the canonical pattern for every save / submit / mutation flow in a React 19 SPA.

   Lesson list (6)

   • 01
     <form action={fn}> — React 19's Form Model~13 min · form-action, react-19, forms
   • 02
     useActionState — Pending, Error, Result for Free~14 min · useactionstate, react-19, actions
   • 03
     useFormStatus — Pending Without Prop-Drilling~11 min · useformstatus, react-19, actions
   • 04
     useOptimistic — Instant UI Without Lying~14 min · useoptimistic, react-19, actions
   • 05
     Composing Actions — Chains, Wrappers, Hooks~11 min · actions, composition, patterns
   • 06
     Zod — Type-Safe Validation Inside Actions~12 min · zod, validation, schemas

   ✓Quiz · 4 questions→

7. 07🎼Concurrent React

   0/6 lessons

   useTransition, useDeferredValue, the React Compiler, and when memo still earns its keep

   Concurrent React is the engine that makes Suspense and Actions feel smooth instead of janky. Transitions tell React 'this update is non-urgent.' DeferredValue tells it 'render with the stale version, then catch up.' The Compiler memoizes everything you'd have written by hand. Together: less wasted work, fewer manual hooks, smoother UX.

   Lesson list (6)

   • 01
     useTransition — Non-Urgent State Updates~12 min · usetransition, concurrent, priority
   • 02
     useDeferredValue — Lag the Heavy Render~11 min · usedeferredvalue, concurrent, rendering
   • 03
     Scheduling Intuition — Priority, Batching, Yielding~10 min · scheduling, concurrent, internals
   • 04
     The React Compiler — Automatic Memoization~13 min · react-compiler, memoization, build
   • 05
     When Manual memo Still Earns Its Keep~10 min · usememo, react.memo, edge-cases
   • 06
     Profiling Concurrent React~11 min · profiling, devtools, performance

   ✓Quiz · 4 questions→

8. 08🚀Ship It

   0/7 lessons

   vite build, code splitting, env modes, deploy, and choosing your next stack

   The dev server feels great. Now you ship the bundle. This track covers what vite build actually does, how to split code so the initial load stays small, env mode wiring without leaking secrets, Vite plugins you'll actually want, deploy targets (Vercel, Cloudflare Pages, Tauri), Lighthouse / accessibility floor, and the closing strategic lesson: when to pick this stack (Vite SPA) versus when to reach for a meta-framework — using cwkPippa and cwk-site as the side-by-side case study.

   Lesson list (7)

   • 01
     vite build — Inspect the Output~11 min · vite-build, rollup, bundling
   • 02
     Code Splitting — Lazy Routes, Lazy Components~11 min · code-splitting, lazy, performance
   • 03
     Env Modes — .env Files Without Leaking Secrets~10 min · env, vite, modes, secrets
   • 04
     Vite Plugins — The Essentials~10 min · vite-plugins, ecosystem
   • 05
     Deploy Targets — Vercel, CF Pages, Tauri~11 min · deploy, vercel, cloudflare-pages, tauri
   • 06
     Lighthouse + Accessibility Floor~12 min · lighthouse, accessibility, a11y, performance
   • 07
     Capstone — cwkPippa vs cwk-site: When Which Stack?~22 min · case-study, cwkpippa, cwk-site, strategic

   ✓Quiz · 4 questions→