企业官网建设流程全解析

📌标签：#React#组件开发#实战案例#前端自动化

在过去，从需求到组件需要你手动创建文件、写 JSX、加样式、处理状态、连接 API……现在，你只需要用自然语言描述“我要什么”，Claude Code 就能生成一个完整的、可运行的 React 组件模块——包括代码、样式、类型定义、测试，甚至 Storybook 条目。

1. 一个真实的需求 → 组件的全过程

假设产品经理的需求是：“创建一个用户资料卡片组件，展示头像、姓名、邮箱和关注按钮。点击关注按钮时，调用 API 并更新按钮状态。”

如果手工做，你需要：

1. 创建UserCard.jsx/UserCard.tsx
2. 写 JSX 结构
3. 写 CSS 模块或 Tailwind 类
4. 管理isFollowing状态和点击处理
5. 写 API 请求函数
6. 添加加载和错误状态
7. 写单元测试
8. 可选：添加到 Storybook

现在，你只需要对 Claude Code 说一句话。它会自动完成上述所有步骤，并根据你项目的已有规范（读取CLAUDE.md和现有组件）保持风格一致。

2. 基础示例：生成一个简单的展示组件

提示词：

创建一个 React 组件 `Greeting`，接收 `name` 和 `age` 属性，渲染 `Hello, {name}! You are {age} years old.` 使用 TypeScript 和 Tailwind CSS。放在 `src/components/Greeting.tsx`。

Claude Code 会做什么：

1. 读取项目规范：检查package.json确认 React 版本、是否已安装 Tailwind、TypeScript 配置。
2. 生成组件文件src/components/Greeting.tsx：

import React from 'react'; interface GreetingProps { name: string; age: number; } const Greeting: React.FC<GreetingProps> = ({ name, age }) => { return ( <div className="p-4 bg-gray-100 rounded-lg shadow"> <p className="text-lg font-semibold"> Hello, {name}! You are {age} years old. </p> </div> ); }; export default Greeting;

3. 如果需要，还会生成对应的测试文件src/components/Greeting.test.tsx：

import { render, screen } from '@testing-library/react'; import Greeting from './Greeting'; test('renders greeting message', () => { render(<Greeting name="Alice" age={30} />); expect(screen.getByText(/Hello, Alice! You are 30 years old./i)).toBeInTheDocument(); });

4. 运行测试：自动执行npm test确保通过。
5. 输出结果：告诉你已创建了哪些文件。

整个过程中，你没有写过一行代码，只是描述了一个需求。

3. 复杂示例：带状态和 API 调用的组件

提示词：

创建 `UserCard` 组件： - 文件位置：`src/components/UserCard.tsx` - Props：`userId: string` - 内部使用 `fetch` 从 `/api/users/${userId}` 获取用户数据（name, avatar, email） - 展示头像（圆形）、姓名、邮箱 - 一个“关注”按钮，点击后调用 POST `/api/follow/${userId}`，按钮文字变为“已关注”，并禁用按钮 - 处理加载状态（显示“加载中...”）和错误状态（显示错误信息） - 使用 Tailwind CSS 样式 - 为这个组件编写单元测试，模拟 fetch 和点击

Claude Code 的执行过程（多轮 Agent Loop）：

1. 读取现有代码模式：查看项目中其他组件如何组织（例如是否有useEffect、错误处理模式）。
2. 生成主组件：

import React, { useState, useEffect } from 'react'; interface User { name: string; avatar: string; email: string; } interface UserCardProps { userId: string; } const UserCard: React.FC<UserCardProps> = ({ userId }) => { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState(true); const [error, setError] = useState<string | null>(null); const [isFollowing, setIsFollowing] = useState(false); const [followLoading, setFollowLoading] = useState(false); useEffect(() => { fetch(`/api/users/${userId}`) .then(res => { if (!res.ok) throw new Error('Failed to fetch user'); return res.json(); }) .then(data => { setUser(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, [userId]); const handleFollow = async () => { setFollowLoading(true); try { const res = await fetch(`/api/follow/${userId}`, { method: 'POST' }); if (!res.ok) throw new Error('Follow failed'); setIsFollowing(true); } catch (err) { console.error(err); // 可以设置一个临时错误提示 } finally { setFollowLoading(false); } }; if (loading) return <div className="p-4">Loading...</div>; if (error) return <div className="p-4 text-red-500">Error: {error}</div>; if (!user) return null; return ( <div className="flex items-center gap-4 p-4 border rounded-lg shadow-sm"> <img src={user.avatar} alt={user.name} className="w-12 h-12 rounded-full" /> <div className="flex-1"> <h3 className="font-semibold">{user.name}</h3> <p className="text-sm text-gray-500">{user.email}</p> </div> <button onClick={handleFollow} disabled={isFollowing || followLoading} className={`px-4 py-2 rounded ${ isFollowing ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600 text-white' }`} > {followLoading ? '...' : isFollowing ? '已关注' : '关注'} </button> </div> ); }; export default UserCard;

3. 生成测试文件（模拟 fetch）：

import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import UserCard from './UserCard'; global.fetch = jest.fn(); describe('UserCard', () => { beforeEach(() => { jest.resetAllMocks(); }); test('displays user data after fetch', async () => { const mockUser = { name: 'John', avatar: 'url', email: 'john@example.com' }; (fetch as jest.Mock).mockResolvedValueOnce({ ok: true, json: async () => mockUser, }); render(<UserCard userId="123" />); expect(screen.getByText('Loading...')).toBeInTheDocument(); await waitFor(() => expect(screen.getByText('John')).toBeInTheDocument()); }); test('handles follow click', async () => { // 模拟用户数据获取 (fetch as jest.Mock).mockResolvedValueOnce({ ok: true, json: async () => ({ name: 'John', avatar: '', email: '' }), }); // 模拟 follow 成功 (fetch as jest.Mock).mockResolvedValueOnce({ ok: true }); render(<UserCard userId="123" />); await waitFor(() => screen.getByText('关注')); fireEvent.click(screen.getByText('关注')); await waitFor(() => expect(screen.getByText('已关注')).toBeInTheDocument()); }); });

4. 运行测试，如果失败则自动修复。
5. 最终输出：组件已创建，测试通过。

你只需审查生成的代码是否符合预期，必要时微调 API 端点或样式。

4. 结合设计稿：从 Figma 到组件

如果你有 Figma 设计稿，并且已经配置了 Figma MCP Server（参考第 20/22 篇），你可以直接：

根据这个 Figma 设计稿生成 React 组件：@figma:file/abc123/Frame-42

Claude Code 会读取设计稿中的图层结构、颜色、字体、间距，然后生成像素级精确的组件代码，甚至自动提取设计 token 为 Tailwind 配置或 CSS 变量。

5. 进阶技巧：利用项目记忆保持风格一致

在CLAUDE.md中预设组件规范，AI 会自动遵循：

## React 组件规范 - 使用函数组件和 TypeScript 接口（`interface Props`） - 组件文件放在 `src/components/`，使用 PascalCase 命名 - 样式优先使用 Tailwind CSS，复杂样式用 CSS 模块（`*.module.css`） - 所有组件必须包含单元测试（Jest + React Testing Library），测试文件与组件同目录，命名为 `ComponentName.test.tsx` - API 调用统一使用 `src/api/client.ts` 中的封装函数，不要直接使用 fetch

当你再让 AI 生成组件时，它会读取这些规范，生成符合团队标准的代码。

6. 常见问题与解决

7. 从组件到页面：组装完整前端模块

Claude Code 不仅能生成单个组件，还能生成整个页面模块。例如：

创建一个用户个人资料页面 `src/pages/Profile.tsx`，包含： - 顶部导航栏（复用 `Navbar` 组件） - 用户卡片（复用 `UserCard` 组件） - 用户的帖子列表（新建 `PostList` 组件，从 `/api/posts?userId={id}` 获取） - 使用 React Router 的 `useParams` 获取 userId - 添加页面级的加载和错误处理

AI 会：

1. 检查Navbar和UserCard是否存在，不存在则按规范创建。
2. 创建PostList组件。
3. 生成Profile.tsx页面组件。
4. 在路由配置文件中添加该页面的路由（如果项目有统一路由表）。
5. 运行端到端测试（如果配置了）。

8. 成本与效率评估

对于重复性高的组件生成，Claude Code 的效率提升非常显著。而且随着项目记忆的完善，AI 生成的代码越来越贴合项目风格，后期人工修改成本趋近于零。

9. 下篇预告

掌握了 React 组件的生成，下一步是构建完整的全栈应用。下一篇我们将实战：如何使用 Claude Code + CloudBase + Figma 打造一个带支付功能的小程序，从前端到后端再到数据库，全部由 AI 辅助完成。

👉下一篇：全栈应用实战：Claude Code + CloudBase + Figma打造能支付的小程序

思考题（自测理解）

1. 你的项目使用styled-components而不是 Tailwind。你如何在CLAUDE.md中描述样式规范，让 AI 生成组件时使用styled而不是 CSS 类？
2. Claude Code 生成组件后，你发现有 2 个 prop 命名不符合项目惯例（如onClickHandler应该为onClick）。你会如何修正？是一次性手动改，还是让 AI 重新生成？
3. 当你要求 AI “创建一个登录表单组件”时，它可能会生成包含useState的表单。但你的项目实际上使用了react-hook-form。如何让 AI 自动使用react-hook-form？提示词怎么写？

从组件到全栈，Claude Code 不仅是代码生成器，更是你的全栈开发伙伴。下一章，我们将挑战一个带支付的真实应用。