Issue 05 | First Hello World Project
🎯 Learning Objectives
After this issue, you will:
- Create a complete web application from scratch with a single command
- Understand how Claude Code orchestrates multiple Tools to complete complex tasks
- Observe the Write → Bash → Edit tool call chain
📖 Core Concepts Explained
5.1 Tool Chain
When you give Claude Code a complex instruction, it automatically plans and calls multiple tools in sequence:
User Instruction: "创建一个 Express + TypeScript 的 REST API 项目" (Create an Express + TypeScript REST API project)
Claude's Execution Plan:
1. Bash("mkdir my-api && cd my-api && npm init -y") → Create directory
2. Bash("npm install express typescript ts-node @types/express @types/node") → Install dependencies
3. Write("tsconfig.json") → Write TS config
4. Write("src/index.ts") → Write entry file
5. Write("src/routes/health.ts") → Write route
6. Edit("package.json") → Add scripts
7. Bash("npx tsc --noEmit") → Compile check
8. Bash("npm run dev") → Start verification
5.2 Understanding Claude's Decision Process
Claude Code does not call tools randomly; instead, it uses a goal decomposition strategy:
- Analyze Goal: What does the user want?
- Environmental Perception: What's in the current directory? (Glob, Read)
- Plan Steps: What operations are needed? In what order?
- Execute Incrementally: Check results after each step
- Self-Correction: If an error occurs, read the error message and fix it
💻 Simulating Claude TUI Interaction: Building a Project from Scratch
$ mkdir my-first-app && cd my-first-app
$ claude
╭──────────────────────────────────────────────────────╮
│ Claude Code v2.3.0 │
│ 📁 Working directory: ~/my-first-app (empty) │
╰──────────────────────────────────────────────────────╯
> Help me create a React + TypeScript to-do application with add, delete, and mark as complete functionalities, using Vite for building.
╭─ Claude ─────────────────────────────────────────────╮
│ │
│ Okay! I'll create a complete Todo application for you.│
│ │
│ ⚙️ Tool: Bash │
│ $ npm create vite@latest ./ -- --template react-ts │
│ ╭────────────────────────────────────────────╮ │
│ │ [Y] Allow [n] Deny [a] Always allow │ │
│ ╰────────────────────────────────────────────╯ │
│ │
╰──────────────────────────────────────────────────────╯
> Y
╭─ Claude (Continue) ──────────────────────────────────╮
│ │
│ ✅ Bash: npm create vite — Success │
│ │
│ ⚙️ Tool: Bash │
│ $ npm install │
│ ✅ Installation complete │
│ │
│ ⚙️ Tool: Write → src/types/todo.ts │
│ ╭─ NEW FILE ─────────────────────────────────╮ │
│ │ export interface Todo { │ │
│ │ id: string; │ │
│ │ text: string; │ │
│ │ completed: boolean; │ │
│ │ createdAt: Date; │ │
│ │ } │ │
│ ╰─────────────────────────────────────────────╯ │
│ ╭────────────────────────────────────────────╮ │
│ │ [Y] Allow [n] Deny │ │
│ ╰────────────────────────────────────────────╯ │
│ │
╰──────────────────────────────────────────────────────╯
> Y
╭─ Claude (Continue) ──────────────────────────────────╮
│ │
│ ⚙️ Tool: Write → src/components/TodoItem.tsx │
│ ╭─ NEW FILE ─────────────────────────────────╮ │
│ │ import { Todo } from '../types/todo'; │ │
│ │ │ │
│ │ interface Props { │ │
│ │ todo: Todo; │ │
│ │ onToggle: (id: string) => void; │ │
│ │ onDelete: (id: string) => void; │ │
│ │ } │ │
│ │ │ │
│ │ export function TodoItem({ todo, onToggle, │ │
│ │ onDelete }: Props) { │ │
│ │ return ( │ │
│ │ <div className={`todo-item ${ │ │
│ │ todo.completed ? 'completed' : ''}`}> │ │
│ │ <input │ │
│ │ type="checkbox" │ │
│ │ checked={todo.completed} │ │
│ │ onChange={() => onToggle(todo.id)} │ │
│ │ /> │ │
│ │ <span>{todo.text}</span> │ │
│ │ <button onClick={() => │ │
│ │ onDelete(todo.id)}>🗑️</button> │ │
│ │ </div> │ │
│ │ ); │ │
│ │ } │ │
│ ╰─────────────────────────────────────────────╯ │
│ ✅ Accepted │
│ │
│ ⚙️ Tool: Write → src/components/AddTodo.tsx │
│ ✅ Created (Form component, includes input + submit button)│
│ │
│ ⚙️ Tool: Write → src/App.tsx │
│ ✅ Created (Main application, useState manages todo list)│
│ │
│ ⚙️ Tool: Write → src/App.css │
│ ✅ Created (Modern styles, gradient background + card design)│
│ │
│ ⚙️ Tool: Bash │
│ $ npm run dev │
│ │
│ ✅ Dev server started at http://localhost:5173 │
│ │
│ 🎉 Todo application created successfully! │
│ │
│ Files created: │
│ 📄 src/types/todo.ts → Type definitions │
│ 📄 src/components/TodoItem.tsx → Single todo item component│
│ 📄 src/components/AddTodo.tsx → Add form component │
│ 📄 src/App.tsx → Main application logic │
│ 📄 src/App.css → Style file │
│ │
│ Open your browser to http://localhost:5173 to see the result!│
│ │
╰──────────────────────────────────────────────────────╯
💻 Code Demo: Completing with a Single Command
If you prefer not to interact, you can use Print Mode for a one-shot creation:
# Create project with a single command
claude "Create a Vite + React + TypeScript Todo application in the current directory,
with add, delete, and mark as complete functionalities, using modern CSS styles,
and run the dev server after creation."
Tip for Initial Prompt Input
# Startup method with an initial prompt
claude "explain this project"
# Equivalent to typing the first sentence after startup
# But more suitable for scripting or quick tasks
🔧 All Tools Used in This Issue
| Tool | Calls | Purpose |
|---|---|---|
Bash |
3 次 | Initialization, dependency installation, starting dev server |
Write |
5 次 | Create 5 source code files |
Glob |
0 次 | Empty directory, no search needed |
Read |
0 次 | New project, no need to read existing files |
Observation: In "create from scratch" scenarios, Write and Bash are the primary tools; in "understand existing code" scenarios, Read, Glob, and Grep are the primary tools.
⚡ Advanced Tip: Iterate After One-Command Creation
> Add localStorage persistence to the Todo application so data isn't lost after refreshing the page.
╭─ Claude ─────────────────────────────────────────────╮
│ │
│ 🔍 Using tool: Read (src/App.tsx) │
│ │
│ ⚙️ Tool: Edit (src/App.tsx) │
│ ╭─ DIFF ──────────────────────────────────────╮ │
│ │ - const [todos, setTodos] = │ │
│ │ - useState<Todo[]>([]); │ │
│ │ + const [todos, setTodos] = │ │
│ │ + useState<Todo[]>(() => { │ │
│ │ + const saved = │ │
│ │ + localStorage.getItem('todos'); │ │
│ │ + return saved ? JSON.parse(saved) : [];│ │
│ │ + }); │ │
│ │ + │ │
│ │ + useEffect(() => { │ │
│ │ + localStorage.setItem('todos', │ │
│ │ + JSON.stringify(todos)); │ │
│ │ + }, [todos]); │ │
│ ╰─────────────────────────────────────────────╯ │
│ │
│ ✅ localStorage persistence added! │
│ Data will not be lost after refreshing the page. │
│ │
╰──────────────────────────────────────────────────────╯
Note that here Claude first used Read to read the existing App.tsx, and then used Edit to precisely modify the necessary parts, instead of rewriting the entire file.
📝 Key Takeaways from This Issue
- Claude Code automatically breaks down complex tasks using a tool chain
- When creating new projects,
Bash+Writeis the primary tool combination - When modifying existing projects,
Read+Editis the primary tool combination - A single
claude "description"command can create a complete application from scratch - Claude reads before writing, always modifying based on the current code state
🔗 References
- Claude Code Overview - What you can do
- Common Workflows
- WeChat Official Account "AI Frontier": Claude Code Tutorial for Product Managers