🚀 React 19 项目驱动学习体系

以真实项目为主线，边写边学，深入掌握 React 19 及现代前端全栈生态。

📖 这是什么？

一套 项目驱动 的 React 19 系统学习教程，包含 30 节课，分为 4 个递进阶段，涵盖 React 入门、生态工具、全栈实践和内部原理：

阶段	项目	技术栈	你会做出什么
Phase 1	📝 Todo App	Vite + React 19 + TypeScript + Tailwind v4	功能完整的待办事项应用
Phase 2	📋 任务管理系统	+ Router v7 / Zustand / TanStack Query / shadcn/ui	多页面、多项目的任务看板系统
Phase 3	🛒 全栈电商	+ Next.js 15 / Prisma 6 / Auth.js v5 beta / Stripe / Playwright	含支付、认证和测试的电商教学项目
Phase 4	⚫ 专精进阶	最佳实践 + React 源码原理	练习代码评审与原理分析

课文由项目实现、原理说明和练习组成。代码块既有完整文件，也有局部修改、独立演示和反例；请结合文件路径与上下文使用。这个仓库运行的是文档站，不包含三个阶段应用的源码、后端服务或密钥。

✨ 课程亮点

• 🪝 常用 Hooks：useState / useEffect / useContext / useRef / useReducer / useMemo / useCallback / useId / useLayoutEffect / useImperativeHandle
• 🆕 React 19 相关特性：use() / useOptimistic / useActionState / useFormStatus / Server Components / ref as prop
• 🏗️ 高级设计模式：Compound Components / Render Props / ErrorBoundary / React.lazy 代码分割
• 🛡️ 工程实践入门：Vitest 单元测试 + Playwright E2E / Sentry 错误监控 / CI/CD + Vercel 部署
• 📘 代码随文给出：按课文创建文件、安装对应版本依赖，并完成所需的本地服务配置
• 🧭 按课递进：前一课的类型和组件会在后文复用，阶段切换时创建新的应用

🎯 适合谁？

• 有一定 HTML / CSS / JavaScript 基础
• 想系统学习 React 19 及现代前端生态
• 喜欢通过做项目来学习，而非纯理论

📁 项目结构

react_learn/
├── README.md              ← 项目介绍（本文件）
└── docs/
    ├── Lesson_01.md       ← Phase 1：Todo App（6 课）
    ├── ...
    ├── Lesson_07.md       ← Phase 2：任务管理系统（10 课）
    ├── ...
    ├── Lesson_17.md       ← Phase 3：全栈电商（12 课）
    ├── ...
    ├── Lesson_29.md       ← Phase 4：专精进阶（2 课）
    └── Lesson_30.md

🏁 开始学习

👉 查看 课程大纲 了解完整路线图，然后从 Lesson 01 开始。

建议学习方法

1. 不跳步：严格按 Lesson 01 → 30 顺序推进（前后依赖很强）。
2. 不只复制：每段代码至少手敲一遍并做一处小改动验证理解。
3. 必做复盘：每节记录 1 个“我今天踩过的坑”和“如何避免复发”。

⚙️ 环境要求

• Node.js 24 LTS，或 Node.js 22.12+（22.x）。课程统一环境是为了兼容 Vite 7 等工具；并非 Next.js 15 比它们要求更高的 Node 版本。
• 任意现代浏览器（Chrome / Edge / Firefox / Safari）
• 推荐编辑器：VS Code（安装 ESLint + Prettier + Tailwind CSS IntelliSense 插件）

技术版本与复现

教程按以下大版本编写，不等同于各工具的最新大版本。阅读期间保留各阶段应用的 package-lock.json，后续通过 npm ci 复现；文档站的 pnpm-lock.yaml 仅约束文档站自身。

范围	课程基线
Phase 1 / 2	React 19、TypeScript 5、Vite 7（create-vite@8）、Tailwind CSS 4
Phase 2 生态	React Router 7、Zustand 5、TanStack Query 5、json-server 0.17.4
Phase 3	Next.js 15.5 系列、Prisma 6；认证课使用明确锁定的 Auth.js v5 预发布版本
测试	Vitest 4、Testing Library、Playwright

版本更新时要连同安装命令、配置和示例一起核对。参考 Vite 7 环境要求、Next.js 支持策略、Prisma 7 的迁移差异。

本地运行文档站

文档站验证环境为 Node.js 24 LTS、pnpm 11.11.0（packageManager 已声明）。pnpm 11 的 Node 要求高于前面 Vite 课程的最低要求；运行文档站请直接使用 Node.js 24。pnpm-workspace.yaml 仅允许 esbuild 执行必要构建脚本。

pnpm install --frozen-lockfile
pnpm dev

没有对应 pnpm 时，可用 npx --yes [email protected] install --frozen-lockfile 安装依赖。

pnpm build 检查文档构建，pnpm preview 预览构建结果。文档构建成功只说明页面可以生成，不代表文章中的数据库、认证和支付流程已经通过集成测试。