从组件测试到真实浏览器：Playwright 与测试分层
理解 Playwright 的 Locator、自动等待和端到端测试，并为单元、组件与 E2E 测试划清职责边界。
Topic
分类： Web开发
HTML、CSS、JavaScript、前端工程与 Web 应用开发实践。
从单元测试到组件测试：Vitest、Testing Library 与 jsdom
从测试用例设计出发，理解 Vitest、React Testing Library、jsdom、异步查询与 Mock 的职责边界。
React 核心机制：State、Props、Effect 与组件身份
React 核心机制：State、Props、Effect 与组件身份
TypeScript 与 Zod：谁检查代码，谁检查数据
TypeScript 和 Zod 都与“类型安全”有关，但它们工作的时间和对象完全不同。
一句话概括：
TypeScript 在编译阶段检查代码，Zod 在运行阶段检查真实数据。
从调用栈到 Vite：现代 JavaScript 代码究竟如何运行
学习 JavaScript 时，最容易混淆的是语言、运行环境和开发工具。JavaScript 规定变量、函数、 […]
怎么安全地换掉一层：一次真实的渲染层替换
我把一个前端项目的渲染层从手写 DOM 换成了 React，业务逻辑一行没改。这篇讲的不是 React 怎么用（那是上一篇），而是「换掉一层」这件事本身该怎么做才算做对——以及验收标准为什么不是「新代码能跑」。中途还撞到一个有意思的坑：验证工具自己把被测对象弄脏了。
React 入门：从「亲手炒菜」到「填一张菜单」
这篇讲 React 最核心的那个转变——你不再动手改页面，而是描述页面该长什么样。从声明式渲染讲到 JSX、组件、Props、State、事件和列表 key。零基础可以顺着读；写过原生 DOM 的同学建议重点看第一节和第五节。
TypeScript 入门：给 JavaScript 的每样东西，提前贴一张标签
如果你写过一点 JavaScript，被 undefined 的报错折磨过、被拼错的属性名坑过，那么这篇是给你的。我们不背语法表，而是把 TypeScript 想成一件事——给代码里的每样东西，提前贴一张写清楚「它是什么」的标签。
把前端拆成四层之后，测试替我抓出了两个 bug
导读：这篇讲 ES Modules 怎么把隐式依赖变成显式声明，怎么按依赖方向把代码分层，以及为什么分层之后测试突然变得好写了。最后两节是真实案例——一个查表函数在特定输入下会返回一个函数而不是文案，另一个计数器会把数字拼成字符串。基础同学可以顺着读，有经验的同学可以直接跳到第六节看那个坑。
异步 JavaScript 入门到进阶：Promise、async/await 与 fetch
从「为什么需要异步」讲起，一路到事件循环和竞态处理。基础同学可以顺着读下来，有经验的同学可以直接跳到后半段的坑和进阶。
