React + Vite 项目实战

目标

用 Zed 从零完成一个 React + TypeScript 小项目，并走完真实开发流程：

创建项目 -> 运行 -> 修改页面 -> 添加任务 -> 构建检查 -> Git 提交

前置要求

• 已安装 Node.js
• 已能在 PowerShell 里运行 node -v 和 npm -v
• 已阅读 打开后的第一小时 和 前端项目工作流

第一步：创建项目

npm create vite@latest zed-react-demo -- --template react-ts
cd zed-react-demo
npm install
zed .

第二步：先跑起来

在 Zed 终端里执行：

npm run dev

打开终端里显示的本地地址。不要默认写死 5173，以终端实际输出为准。

第三步：熟悉项目结构

用 Ctrl+P 依次打开：

• package.json
• src/App.tsx
• src/App.css
• src/main.tsx

看清楚页面从哪里进入、样式在哪里、有哪些脚本命令。

第四步：做一个小改动

在 src/App.tsx 中：

1. 修改页面标题
2. 新增一个简单按钮
3. 增加一个计数状态
4. 保存
5. 回到浏览器确认页面更新

你可以让 Zed 的 AI 帮你生成按钮代码，但生成后要自己看一遍改动。

第五步：加入项目任务

新建 .zed/tasks.json：

[
  {
    "label": "react: dev",
    "command": "npm",
    "args": ["run", "dev"],
    "cwd": "$ZED_WORKTREE_ROOT",
    "reveal": "always"
  },
  {
    "label": "react: build",
    "command": "npm",
    "args": ["run", "build"],
    "cwd": "$ZED_WORKTREE_ROOT",
    "reveal": "always",
    "hide": "on_success"
  }
]

然后从命令面板运行 task: spawn，选择 react: build。

第六步：构建检查

npm run build

构建通过后，再看 Git 面板。

第七步：提交代码

打开 Git 面板：

1. 查看 src/App.tsx 的 diff
2. 查看 .zed/tasks.json
3. 确认没有临时文件
4. 暂存改动
5. 提交

提交说明示例：

feat: add React demo counter and Zed tasks

练习验收

• [ ] 项目能在浏览器打开
• [ ] 页面能看到你改过的内容
• [ ] .zed/tasks.json 能运行构建任务
• [ ] npm run build 通过
• [ ] Git 面板能看到清楚的 diff
• [ ] 完成一次提交

常见问题

npm create vite 很慢

先确认网络和 npm 源。不要在 Zed 里反复重试同一个命令，先用外部 PowerShell 验证。

页面没有热更新

检查开发服务是否还在运行，浏览器打开的是否是终端里显示的地址。

构建失败但开发服务正常

这是正常情况。开发服务偏宽松，正式构建会检查更多问题。按构建报错逐个修。