🚀 React 19 项目驱动学习体系

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

📖 这是什么？

一套 项目驱动 的 React 19 系统学习教程，包含 30 节课 × 4 个递进阶段，覆盖从入门到源码级精通的完整路径：

阶段	项目	技术栈	你会做出什么
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 / NextAuth / 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              ← 项目介绍（本文件）
├── .vitepress/            ← VitePress 配置
└── 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 开始。

⚙️ 环境要求

• Node.js >= 20.10（建议使用当前 LTS；Phase 3 的 Next.js 15 需要更高版本 Node）
• 任意现代浏览器（Chrome / Edge / Firefox / Safari）
• 推荐编辑器：VS Code（安装 ESLint + Prettier + Tailwind CSS IntelliSense 插件）

📊 课程规模

指标	数据
总课时	30 节（4 个阶段）
总行数	~12,000+ 行 Markdown
覆盖 Hooks	15+ 个（含 React 19 新增）
Mermaid 图解	120+ 个流程图 / 时序图 / ER 图
代码示例	250+ 个完整可运行片段