前端学习推荐阅读：带着问题读开源教程

教程太多时，很容易把收藏当成学习。这份清单不要求从头读到尾。先选一个你正遇到的问题，读对应章节，关掉页面自己写一遍，再回来对照。

打底：先认识浏览器

MDN Web 开发课程适合补 HTML、CSS、JavaScript。读到表单时，亲手给搜索框加 label，再只用键盘操作一次；读到异步时，用网络限速观察加载过程。没有这些底子，框架的“魔法”很难解释清楚。

JavaScript.info适合查事件循环、闭包、Promise 和模块。它的练习很适合检查自己是否只是“看懂答案”。本课程不会翻译整本书，只引用对应主题，并把例子改成知识库场景。

Vue 互动教程适合初次上手；Vue 指南适合建立完整概念。学完 ref 之后紧接着读 computed、watch，再读 composables，别一开始扎进源码调度器。

Vue Router用于验证路由细节，Pinia用于理解共享状态。读源码时可以从 Vue core 的测试切入：测试先告诉你承诺的行为，内部优化则可能随版本变化。

React Learn重点读 Thinking in React、State as a Snapshot、You Might Not Need an Effect。先能解释一轮渲染中的变量为何不变，再去学状态库。

Full Stack Open是赫尔辛基大学的开放课程，适合边做练习边学习 React、接口、测试和 TypeScript。不要照着很老的课程镜像安装工具，优先看课程当前页面和对应版本说明。

Bulletproof React适合已经写过小项目的人读。重点看一个功能怎样组织 API、组件和测试，不必把它的每个依赖都搬进自己的仓库。Feature-Sliced Design提供另一套边界思路，适合拿来比较，而不是当作唯一目录规范。

本模块是围绕知识库业务编写的中文教学，示例和练习为本项目组织，不是教程全文转载。每章文末保留原始资料入口；资料核对日期为 2026-09-25。外部文档会更新，遇到不一致先检查主版本。学习开源项目可以借鉴设计，但实际复制代码前仍应阅读相应仓库的 LICENSE。

一个简单的读法：先写下“我要验证什么”，比如“两个组件调用同一个 Hook，会不会共享状态？”再运行两个实例，观察结果，最后读官方解释。这样你得到的是判断依据，不只是一句结论。

读 HTML 时，把教程中的链接、表单和按钮改成自己的内容，预测不加载 JavaScript 时哪些功能仍能使用。读 CSS 时，故意制造两条冲突规则，再从开发者工具解释最终结果。读 JavaScript 时，先画出数据和 DOM 哪些地方需要同步。

读 Vue 与 React 时，用本模块提供的相同搜索需求对照：哪里保存输入，哪里计算结果，哪里描述列表，哪里处理真实 DOM 引用。不要把 ref 与 useRef 因为名字像就视为同一能力；Vue ref 的响应式更新与 React useRef 不触发渲染的语义有明显区别。

开源项目适合学习真实边界，但大型项目可能带着历史兼容和团队约束。借鉴前先问：这段设计为了解决什么问题，我的项目是否也有？能写出采用原因和不采用原因，才算把资料变成自己的判断。