+
+
<CourseGraph />
+
课程关系图 · 知识是网，不是线
+
节点 = 章节卡；实线箭头 = 前置（prerequisites）；虚线 = 关联（related）；①②③ = 读者入口。
+
+
+
+
+
+
①🌐快速开始
+
②⚛️快速开始 React
+
🧱更多示例
+
📦更多
+
🔗全栈基础
+
③🧠高级教程
+
+ 前置 prerequisites
+ 关联 related
+ ①②③读者入口（见下页）
+
+
+
+
+
+
Args
+
+ | Prop | 类型 | 说明 |
|---|
+ nodes | Course[] | 直接取 courses.ts，渲染为迷你章节卡 |
+ edges.prerequisites | [from,to][] | 实线箭头，由每章 prerequisites 派生 |
+ edges.related | [from,to][] | 虚线，由 related 派生 |
+ entryPoints | Entry[] | ①②③ 入口徽标，数据见 EntryGuide |
+
+
+
+
为什么要关系图（skill 依据）
+
1知识是网状：有前置也有旁路，线性目录会掩盖它。
+
2教程是索引：图让「我在哪、缺哪块」一眼可见。
+
3入口不锁死：③ 直达是合法路径（skill 死原则）。
+
4关系现为示例占位；正式关系填 courses.ts 后图自动更新。卡片 chips 与边一一对应：前置实线、关联虚线。
+
+
+
+
07 / 09
+
+
+
<EntryGuide />
+
入口梳理 · 按读者画像推荐起点
+
三类读者三种入口：路径是推荐不是强制；起点章节高亮，沿途章节排成路径 chips。
+
+
+
+
+
+
🌱零基础入门
+
入口 ① 快速开始
+
+ 快速开始→
+ React→
+ 更多示例→
+ 更多→
+ 全栈基础→
+ 高级教程
+
+
完整链按序走；每步先核对验收产物再前进，认知基础必须在真机跑通。
+
+
+
⚛️写过页面 · 有前端经验
+
入口 ② 快速开始 React
+
+ React→
+ 更多→
+ 全栈基础→
+ 高级教程
+
+
「快速开始」降级为查漏清单：实践过的部分直接跳过，撞到陌生积木再回看。
+
+
+
🧠在职补工程思维
+
入口 ③ 高级教程
+
+ 高级教程
+ 专题按需点读
+
+
数据流 / 纯函数 / CAP 按需取用；缺上下文时回看「全栈基础」，真机验收不可代劳。
+
+
+
+
+
+
Args
+
+ | Prop | 类型 | 说明 |
|---|
+ profiles[].name | string | 读者画像名 |
+ profiles[].entry | courseId | 起点章节，对应图中 ①②③ |
+ profiles[].path | courseId[] | 推荐路径（可空 = 按需点读） |
+ profiles[].note | string | 跳读/回看策略一句话 |
+
+
+
+
入口梳理原则
+
1路径非强制：推荐序列只做导航，不设锁——任何章节始终可进（skill 死原则）。
+
2与 CourseGraph 共用数据：entries 与图上的入口徽标同源，改一处两处同步。
+
3画像数据入 entries.ts；后续可由读者自选画像并高亮其路径。
+
+
+
+
08 / 09