01 · AI 时代学 React：官方文档优先

目标：建立「官方为真源、AI 为加速器」的学习法，避免被过时博客 / 二手 Hooks 示例带偏。

1. 为什么还要系统练手，而不是「全交给 AI」

你已经「学过」语法与库名，但没手敲过完整项目——这正是 AI 最容易制造虚假熟练的区间：它能生成看起来对的 JSX，你却说不清 Server / Client、何时不该 useEffect。

现象	风险
混用 Pages Router 与 App Router 写法	路由、数据获取全部对不上号
默认处处 'use client'	失去 RSC 收益，把 Next 用成「带路由的 CRA」
过时 class 组件 / 老生命周期示例	与 react.dev 现行心智冲突
乱引入 Redux + React Query + 一堆 UI 库	第一周被脚手架淹没，仍无手感
捏造不存在的 Next / React API	编译不过或行为诡异
用 useEffect 同步派生状态	多余渲染、竞态、难测

结论：AI 适合「起草 → 你对照官方验收 → 再改」；不适合「从不打开 react.dev」。

2. 官方资源地图（只认这些当一级资料）

按本系列学习顺序：

react.dev/learn/              ← React 本体心智（必做）
react.dev/reference/react/    ← API 查证
nextjs.org/docs/app/          ← App Router（本系列收束栈）
    ├─ getting-started/
    ├─ building-your-application/routing
    ├─ data-fetching / server-actions
    └─ testing

资源	URL	用途
Learn React	https://react.dev/learn	组件、state、effect、心智模型
React Reference	https://react.dev/reference/react	争议时查「API 怎么说」
Next App Docs	https://nextjs.org/docs/app	路由、RSC、数据与 Actions
Installation	https://nextjs.org/docs/app/getting-started/installation	第一个应用
RSC 入门	https://nextjs.org/docs/app/getting-started/server-and-client-components	Server vs Client

二级资料（本系列 03 篇以后再用）：优质博客、视频。永远低于官方。

刻意后置：Redux 全家桶、React Query 深配、CSS-in-JS 选型、React Compiler 细节——等你有一份能跑的笔记板再按需加。

3. AI 时代工作流（推荐默认）

1. 打开官方某一页（Learn 或 Next Docs）
2. 自己先写 5～20 行（允许很丑）
3. 再问 AI：「对照官方 X 文档，审查这段代码的 idiomatic 问题」
4. 让 AI 给「最小改动」；你手动跑 pnpm dev / 看 Network / 跑测试
5. 把「卡点一句话」记进本系列笔记

对 AI 的三条硬约束：

1. 指定版本与范围：如「Next.js App Router + React 19，TypeScript；不要 Pages Router」。
2. 要求引用官方：如「给出对应 react.dev / nextjs.org 路径与标题」。
3. 禁止默默加依赖：Zustand / React Query / UI 库必须你点头再装。

4. 和你已有栈的对照（建立迁移锚点）

你熟悉的	React / Next 侧	本系列哪篇深入
.vue + script setup	函数组件 + hooks / RSC	03、06
ref / computed	useState / 渲染时直接算派生	03、04
watch / onMounted	useEffect（且常可不需要）	04
Vue Router	App Router 文件系统路由	05
Pinia	先 Server 数据 + URL；客户端状态最后加	08、10
Koa API + 前端 fetch	Server Components fetch / Server Actions	07、08
让 Cursor 写业务	用审查清单审 React/Next	09
Vite SPA 心智	Next = 框架，默认服务端组件	02、06

5. 两周学习契约（可验收）

• [ ] 收藏并打开过 react.dev/learn、nextjs.org/docs/app
• [ ] 能向他人用 30 秒说清：官方优先、AI 只做审查与加速
• [ ] 开始第 02 篇：本机跑通第一个 App Router 应用

6. 下一步

→ 02 · 安装工具链与第一个 App Router 应用

官方入口

• https://react.dev/learn
• https://nextjs.org/docs/app