React 生态地图

学完 react-essentials 后，你已能写组件、Hooks 与基础路由。真实项目还会遇到 状态怎么管、数据从哪来、UI 库选谁、怎么测端到端——本 track 补全 React 路线图的 生态层，不是重复 JSX 语法。

学习目标

• 区分「React 核心」与「生态选型」各自解决什么问题
• 建立客户端状态 vs 服务端状态的划分思路
• 对照 /roadmaps/react 生态节点规划学习顺序

与 react-essentials 的分工

范围	react-essentials	react-ecosystem-essentials
组件、Props、State	✅	假设已会
Hooks、Context 基础	✅	深入对比 Zustand/MobX
路由概念	✅	与 Next.js 路由衔接
数据请求	fetch 入门	TanStack Query、Axios
UI 库、动画、E2E	不涉及	✅ 本 track

原则：核心课教「React 怎么思考 UI」；生态课教「团队项目里怎么选型与落地」。

生态四层模型

UI 层     → MUI / Chakra / shadcn/ui
状态层    → Context / Zustand / TanStack Query
数据层    → REST (Axios) / GraphQL (Apollo)
质量层    → Vitest + Testing Library / Cypress / Playwright

不是每层都要上「最重」方案：小页面 Context + fetch 够用；platform 级应用才值得 Query + UI 库 + E2E。

在本站 stack 中的位置

CodeRoadMap platform 使用 Next.js + React。读 nextjs-essentials 时，你会看到 服务端 fetch、RSC、App Router——本 track 的客户端生态知识，帮助你在 'use client' 边界内做交互与状态。

GraphQL 若后端暴露 schema，见 graphql-essentials；单元与集成测试见 testing-essentials。

选型三问

1. 状态放哪：仅 UI 折叠？跨页共享？还是服务器缓存？
2. 数据协议：REST 够用还是 GraphQL 减 over-fetch？
3. 团队约束：设计系统是否已定？CI 是否已配 E2E？

练习

• 打开 /roadmaps/react，标出本 track 对应节点
• 列出 platform 里你认为属于「生态层」的三处依赖（如 UI、请求库）
• 回顾 react-context，写一句「何时 Context 不够」

小结

核心会写组件，生态会选型与协作。 下一课从客户端状态管理入手，对比 Context 与 Zustand、MobX。