03. 第一个实战问题

🎯 学习目标

通过实际操作，学习如何：

使用 Claude Code 分析代码库
让 Claude Code 帮助修复问题
理解基本的交互模式

📝 示例项目一：做一个待办清单（推荐新手）

如果你是零基础，强烈建议从这个项目开始。够简单，15 分钟能完成；够实用，做完了真的能用。

最终效果

一个网页，你可以：

添加任务
标记任务完成
删除任务
界面干净好看

步骤 1：创建项目文件夹

在终端里输入：

bash

mkdir my-todo-app
cd my-todo-app
claude

解释一下：

mkdir my-todo-app：创建一个叫「my-todo-app」的文件夹
cd my-todo-app：进入这个文件夹
claude：启动 Claude Code

步骤 2：先规划再动手 ⭐ 重要！

直接让 AI 写代码，容易一团乱。聪明的做法是先让它给你一个计划，看清楚要做什么，再开始写代码。

复制这段话，发给 Claude：

帮我做一个待办清单网页，要求：
1. 可以添加任务
2. 可以标记完成（划线效果）
3. 可以删除任务
4. 界面要好看，用现代简洁风格

请先给我一个实现计划，不要直接写代码。

Claude 会回复一个详细的实现计划，列出需要创建哪些文件、每个文件的功能等。

你只需要回复：「好的，开始吧」

步骤 3：看着代码自己写出来

这是最神奇的部分。你会看到 Claude 开始自己工作：

创建 index.html 文件
写入 HTML 代码
创建 style.css 文件
写入样式代码
创建 script.js 文件
写入交互逻辑

整个过程你什么都不用做。就像看着一个程序员在你的电脑上工作。

每创建一个文件，Claude 都会告诉你它在做什么。大概 2-3 分钟，所有代码就写完了。

步骤 4：打开浏览器看效果

代码写完后，打开浏览器预览：

Mac 用户：在 Finder 里找到 my-todo-app 文件夹，双击 index.html
Windows 用户：在文件资源管理器里找到这个文件夹，双击 index.html

你会看到：

顶部有个大标题「我的待办清单」
一个输入框，旁边有「添加」按钮
下面是任务列表区域

试试添加一个任务：「学会用 Claude Code」，点击添加。你的第一个任务出现了！

点击任务可以标记完成（会有划线），旁边的删除按钮可以删掉它。

步骤 5：给待办清单加一个新功能

现在你可能会想：能不能改改？当然可以，而且超级简单。

假设你想给每个任务加上时间戳，显示是什么时候添加的。直接在 Claude Code 里说：

给每个任务加上时间戳，显示是什么时候添加的。

Claude 会：

告诉你需要改哪些地方
自动修改 script.js 添加时间记录逻辑
自动修改 style.css 添加时间显示的样式

你只需要刷新浏览器，新功能就生效了。

你还可以尝试：

「加一个优先级标签，重要的任务显示红色」
「加一个全部删除按钮」
「换一个配色方案，我想要蓝色系」

每次 Claude 都会理解你的意思，自动改代码。这就是 AI 协作的感觉：你提需求，它写代码，你验收效果。

📝 示例项目二：修复一个 Bug（进阶）

让我们从一个简单的例子开始 - 假设你发现了一个 bug，需要修复它。

场景描述

如果你已经有一些编程基础，可以试试这个经典的 Bug 修复场景。

假设你有一个 JavaScript 项目，其中一个函数有问题：

javascript

// utils/math.js
export function calculateAverage(numbers) {
  const sum = numbers.reduce((a, b) => a + b, 0);
  return sum / numbers.length;
}

问题：当传入空数组时会返回 NaN。

🚀 开始解决

步骤 1: 启动 Claude Code

在项目根目录运行：

bash

claude

步骤 2: 描述问题

在 Claude Code 提示符下，清晰地描述你的问题：

我发现 math.js 中的 calculateAverage 函数有问题。
当传入空数组时，它会返回 NaN。我想要它返回 0。
你能帮我修复吗？

步骤 3: Claude Code 的响应

Claude Code 会：

读取文件 - 自动找到并读取相关文件
分析问题 - 理解代码逻辑和问题所在
提出方案 - 解释如何修复
执行修改 - 编辑文件（需要你确认）

示例响应：

我来帮你修复这个问题。

问题分析：
当 numbers 是空数组时，sum 为 0，length 为 0，导致 0/0 = NaN。

修复方案：
添加对空数组的检查，在数组为空时返回 0。

我将修改 utils/math.js 文件：

步骤 4: 确认修改

Claude Code 会显示具体的修改内容，使用 diff 格式：

diff

 export function calculateAverage(numbers) {
+  if (numbers.length === 0) {
+    return 0;
+  }
   const sum = numbers.reduce((a, b) => a + b, 0);
   return sum / numbers.length;
 }

根据你的权限设置：

默认模式: 需要你输入 y 确认
自动模式: 直接应用修改
规划模式: 先展示完整计划，等你批准后执行

步骤 5: 验证修复

修改完成后，可以要求 Claude Code 帮你测试：

能帮我写几个测试用例来验证这个修复吗？

Claude Code 可能会创建：

javascript

// utils/math.test.js
import { calculateAverage } from './math.js';

console.log(calculateAverage([1, 2, 3, 4, 5])); // 3
console.log(calculateAverage([])); // 0 (之前是 NaN)
console.log(calculateAverage([10])); // 10

然后运行测试：

bash

node utils/math.test.js

💡 实用技巧

1. 提供上下文

如果项目较大，告诉 Claude Code 相关信息：

这是一个使用 React 的前端项目，使用 TypeScript。
我在组件 Home.tsx 中遇到了一个状态更新的问题。

2. 使用文件路径

直接指定文件可以加快处理：

请检查 src/components/Header.tsx 第 45 行附近的问题

3. 分步骤进行

对于复杂任务，可以分步骤：

首先，帮我分析一下当前的代码结构
然后，找出可能导致内存泄漏的地方
最后，提供修复建议

📊 其他常见场景

场景 1: 理解陌生代码

这个项目是别人留下的，你能帮我分析一下
src/services/api.js 是做什么的吗？

场景 2: 添加新功能

我想在用户登录后显示一个欢迎消息，
你能帮我实现吗？使用现有的 toast 组件。

场景 3: 代码重构

这个函数太长了（150 行），能帮我拆分成
更小的、可复用的函数吗？

场景 4: 性能优化

这个页面加载很慢，能帮我找出性能瓶颈吗？

🎓 最佳实践

✅ DO - 应该做的

清晰描述问题 - 提供足够的上下文
指定文件位置 - 当你知道问题在哪时
分步骤 - 对复杂任务进行拆解
验证结果 - 让 Claude Code 帮你测试
学习交流 - 询问 Claude Code "为什么这样修改"

❌ DON'T - 避免做的

模糊不清 - "代码有问题" 太笼统
一次做太多 - 复杂任务应该分步进行
不验证 - 修改后应该测试
不理解就接受 - 有疑问时要求解释

🛠️ 权限模式

你的第一个任务会根据当前权限模式有不同的体验：

默认模式（推荐新手）

bash

# 每个操作都需要确认
y - 同意
n - 不同意
s - 跳过此操作

自动模式

bash

# 启动时使用
claude --auto-approve

# 所有操作自动执行，适合信任 Claude 的场景

规划模式

bash

# 启动时使用（按两次 Shift+Tab）
claude --plan-mode

# 先看到完整计划，批准后执行

❓ 新手常见问题 FAQ

在过去的教学中，我们发现新手最常问这些问题：

Q1: 改错了怎么办？

别慌，Claude Code 有「时光机」功能（详见 09. 版本回滚）。

方法一：按 ESC 两次 快速回退到上一个版本

方法二：输入命令

bash

/rewind

Claude 会列出历史版本，你可以选择回到哪个时间点

方法三：直接说

刚才那个改动我不喜欢，还原回去

Q2: 我完全不懂代码，怎么知道 Claude 做的对不对？

答案：你不需要懂代码，你只需要测试功能。就像你不需要懂汽车发动机，也能知道车能不能开。

添加任务试试，能加上吗？
标记完成试试，有划线吗？
删除试试，真的删掉了吗？
刷新页面，数据还在吗？

功能对了，代码就是对的。有问题？直接告诉 Claude：「删除按钮点了没反应」，它会自己检查和修复。

Q3: 为什么有些教程说要装 Node.js？

如果你用的是推荐的安装方式（curl 或 PowerShell 一键安装），就不需要 Node.js。

完整解释：Claude Code 有多种安装方式。如果用 NPM 方式（npm install -g @anthropic-ai/claude-code），需要先装 Node.js。但一键安装方式已经把所有依赖打包好了，直接用就行。

对新手来说：跟着这篇教程的步骤走，别去碰 NPM 安装，就不会遇到 Node.js 的问题。

Q4: 我应该从这个开始学编程吗？

这取决于你的目标：

如果你想快速做出东西（做个工具、验证个想法、自动化工作）：

从 Claude Code 开始是对的
边做边学，有问题就问 Claude
遇到不懂的概念，让 Claude 解释

如果你想成为专业开发者：

Claude Code 是很好的辅助，但不能替代系统学习
建议路径：用 AI 做出第一个项目（建立信心）→ 系统学习基础（CS50、FreeCodeCamp）→ 再用 AI 加速开发

很多人就是通过 Claude Code 找到了编程的乐趣，然后主动去学了 JavaScript、Python。因为当你做出东西的时候，学习的动力完全不一样。

🚀 下一步建议

完成了第一个项目，你已经掌握了：

✅ 安装和认证 Claude Code
✅ 先规划再动手的方法
✅ 让 AI 写代码并运行
✅ 迭代修改功能
✅ 解决常见问题

接下来试试这些：

1. 做个你真正需要的工具

记账页面？
倒计时器？
个人简历网站？

2. 挑战：给待办清单加功能

加一个「优先级」分类（高/中/低）
加一个搜索功能
换成你喜欢的配色

3. 常用命令速查

命令	说明
`claude`	启动 Claude Code
`mkdir project-name && cd project-name && claude`	创建项目并启动
`/help`	查看帮助
`/rewind`	回退版本
`/clear`	清空对话
`/exit`	退出

📚 下一步

完成第一个任务后，继续学习 04. 三种模式详解

🎉 恭喜！

🎊 你已经完成了与 Claude Code 的第一次交互！接下来的章节会教你更高级的功能。

🔗 相关资源

💡 API 推荐：https://apipro.maynor1024.live/ - 一站式接入各种AI服务，注册即送0.2刀

03. 第一个实战问题 ​

🎯 学习目标 ​

📝 示例项目一：做一个待办清单（推荐新手） ​

最终效果 ​

步骤 1：创建项目文件夹 ​

步骤 2：先规划再动手 ⭐ 重要！ ​

步骤 3：看着代码自己写出来 ​

步骤 4：打开浏览器看效果 ​

步骤 5：给待办清单加一个新功能 ​

📝 示例项目二：修复一个 Bug（进阶） ​

场景描述 ​

🚀 开始解决 ​

步骤 1: 启动 Claude Code ​

步骤 2: 描述问题 ​

步骤 3: Claude Code 的响应 ​

步骤 4: 确认修改 ​

步骤 5: 验证修复 ​

💡 实用技巧 ​

1. 提供上下文 ​

2. 使用文件路径 ​

3. 分步骤进行 ​

📊 其他常见场景 ​

场景 1: 理解陌生代码 ​

场景 2: 添加新功能 ​

场景 3: 代码重构 ​

场景 4: 性能优化 ​

🎓 最佳实践 ​

✅ DO - 应该做的 ​

❌ DON'T - 避免做的 ​

🛠️ 权限模式 ​

默认模式（推荐新手） ​

自动模式 ​

规划模式 ​

❓ 新手常见问题 FAQ ​

Q1: 改错了怎么办？ ​

Q2: 我完全不懂代码，怎么知道 Claude 做的对不对？ ​

Q3: 为什么有些教程说要装 Node.js？ ​

Q4: 我应该从这个开始学编程吗？ ​

🚀 下一步建议 ​

📚 下一步 ​

🎉 恭喜！ ​

🔗 相关资源 ​

03. 第一个实战问题

🎯 学习目标

📝 示例项目一：做一个待办清单（推荐新手）

最终效果

步骤 1：创建项目文件夹

步骤 2：先规划再动手 ⭐ 重要！

步骤 3：看着代码自己写出来

步骤 4：打开浏览器看效果

步骤 5：给待办清单加一个新功能

📝 示例项目二：修复一个 Bug（进阶）

场景描述

🚀 开始解决

步骤 1: 启动 Claude Code

步骤 2: 描述问题

步骤 3: Claude Code 的响应

步骤 4: 确认修改

步骤 5: 验证修复

💡 实用技巧

1. 提供上下文

2. 使用文件路径

3. 分步骤进行

📊 其他常见场景

场景 1: 理解陌生代码

场景 2: 添加新功能

场景 3: 代码重构

场景 4: 性能优化

🎓 最佳实践

✅ DO - 应该做的

❌ DON'T - 避免做的

🛠️ 权限模式

默认模式（推荐新手）

自动模式

规划模式

❓ 新手常见问题 FAQ

Q1: 改错了怎么办？

Q2: 我完全不懂代码，怎么知道 Claude 做的对不对？

Q3: 为什么有些教程说要装 Node.js？

Q4: 我应该从这个开始学编程吗？

🚀 下一步建议

📚 下一步

🎉 恭喜！

🔗 相关资源