Vite + React

Vite 是现在前端项目的默认构建工具：开发服务器几乎瞬间启动，改动保存后页面立刻更新。React 是使用最广的界面库，也是 AI 训练数据里最多的前端技术——这意味着它写出来的 React 代码最可靠。

为什么是首选

• 概念最少。 一个 index.html、一个入口文件、一堆组件。没有服务端组件、缓存策略、渲染模式这些需要先理解的概念，AI 和你都不容易混淆。
• 出问题好排查。 所有代码都在浏览器里运行，开发者工具就能看清一切。
• 部署最简单。 构建产物是纯静态文件，放到任何静态托管上就能访问。
• 以后可以升级。 需要路由、数据加载时加上 React Router 或 TanStack Router；真的需要服务端渲染时，组件代码大多可以迁走。

上手

pnpm create vite my-app --template react-ts
cd my-app
pnpm install
pnpm dev

然后补上三样东西：Biome（代码规范）、Vitest（单元测试）、AGENTS.md（见下方纪念品）。

需要知道的取舍

单页应用的首屏由浏览器执行 JavaScript 后才渲染出内容，对搜索引擎收录和首屏速度不如服务端渲染。如果你的项目是博客、文档或营销页面，这一点很重要；如果是登录后才能用的工具，基本不用在意。

# AGENTS.md

## 技术栈
- Vite + React + TypeScript（严格模式），pnpm
- 测试：Vitest（单元）、Playwright（端到端）
- 代码规范：Biome

## 命令
- 开发：`pnpm dev`
- 构建：`pnpm build`
- 单元测试：`pnpm test`
- 全部检查：`pnpm check`（Biome + 类型检查 + 测试）

## 结构
- `src/features/<功能>/`：一个业务功能的组件、状态与逻辑放在一起
- `src/components/`：两个以上功能复用的组件
- `src/lib/`：不依赖 React 的纯函数，必须有单元测试

## React 约定
- 只用函数组件和 Hooks；组件文件用 PascalCase。
- 状态放在用到它的最近的组件里，跨页面共享时再提升。
- 异步请求要处理加载中、失败和空状态，并防止重复提交。
- 不直接操作 DOM；需要时用 ref。

## 完成标准
- `pnpm check` 通过；新增逻辑有单元测试；涉及用户流程的改动更新端到端测试。