综合练习

把本 track 串起来：为 CodeRoadMap platform 的「课程详情 / 课时学习」场景做生态选型，并落地一个可演示的最小切片。目标不是堆技术，而是 说清为什么用、边界在哪。

学习目标

• 独立完成状态 + 数据 + UI +（可选）E2E 的端到端方案说明
• 对照 rxe-intro 至 rxe-perf 的检查清单
• 衔接 react-essentials、nextjs-essentials、testing-essentials

任务说明

在 Next.js 或 Vite + React 仓库中实现「Track 详情页」增强（可与 platform 概念对齐，不必改生产仓）：

必做

1. 数据：TanStack Query 拉 track + lessons（REST，Axios 或 fetch 实例）
2. 客户端状态：Zustand 存「收藏 slug 列表」或侧栏折叠
3. UI：shadcn/ui 或 MUI 至少 2 个组件（Card、Button、Dialog 等）
4. 表单：React Hook Form + Zod 提交「学习笔记」mock（localStorage 即可）

选做（加分）

• Framer Motion 列表入场
• Playwright 一条 smoke：打开详情 → 看到课时标题
• 若后端有 GraphQL：用 Apollo 拉同一数据，写 REST vs GraphQL 对比段

必走流程

1. git checkout -b practice/rxe-你的名字
2. 写 ADR 或 README「选型表」：状态/Query/UI/表单各一行理由
3. 实现 → 本地跑通
4. （选做）npm run test:e2e 或 npx playwright test
5. git commit：清晰 message，如 feat(platform-demo): track page ecosystem slice
6. （可选）PR + Test plan

选型自检清单

• 服务器数据 没有 整包复制进 Zustand（Query 管缓存）
• queryKey 含 slug，切换课程无脏数据
• Client Component 边界清晰（Next.js 见 nextjs-essentials）
• 表单错误：客户端 Zod + 模拟 400 字段映射
• 能口头解释 为何不用 MobX / 为何不上 GraphQL（若未选）

与相邻 track

track	本练习用到
react-essentials	组件、Hooks 基础
nextjs-essentials	App Router、RSC 边界