从零开始用React搭建第一个应用：一个五年前端工程师的实战记录

引言

去年公司接了一个内部管理系统升级的项目，原本是用 jQuery 和原生 JS 撸出来的老系统。产品经理说要“界面更现代、操作更流畅”，领导也要求技术上“能长期维护”。我一看这需求，心里就明白了：该用 React 来重构了。

作为一位有五年工作经验的前端开发者，虽然我一直用 Vue 做项目，但 React 在业界的流行程度和社区生态都让我无法忽视。这个项目成了我第一次用 React 的真实战场。

今天我想把这段经历分享出来，不是那种照搬官方文档的教程，而是结合我在开发过程中踩过的坑、遇到的真实问题，以及如何一步步搭建起我们的第一个 React 应用的过程。

---

问题描述：为什么选择 React？

我们原来的系统结构非常传统：

• 页面多为服务端渲染
• 部分交互逻辑通过 jQuery 实现
• 组件复用几乎没有，很多代码重复严重
• 数据状态混乱，难以调试

面对新版本的要求——快速迭代、良好的可维护性、组件化架构，我们团队在技术选型时做了比较：

技术栈	维护成本	社区活跃度	开发效率	学习曲线
jQuery + 原生 JS	高	中	低	平缓
Vue	中	高	高	中等
React	低（中长期）	极高	非常高	稍陡峭

React 的组件模型、虚拟 DOM 机制、庞大的生态系统都让我们心动，特别是它已经被 Facebook、Netflix、Airbnb 等大厂广泛验证过。

于是，我们决定使用 React 重写部分核心页面，并将其嵌入旧系统的 HTML 结构中逐步替换。

---

解决方案：从安装到第一个 App

第一步：环境搭建与项目初始化

我们在本地开发中使用了 create-react-app，这是一个由 Facebook 官方维护的脚手架工具，适合初学者和中小型项目。虽然现在也有 Vite 可选，但对于新手来说，CRA 的“开箱即用”还是很有必要的。

npx create-react-app my-admin
cd my-admin
npm start

执行完这些命令后，React 会自动生成一个初始项目结构，包括基础的组件目录、样式文件、打包配置等。打开浏览器访问 localhost:3000，就能看到经典的 “Welcome to React” 页面了。

小插曲：我一开始误以为 CRA 是唯一的选择，后来才知道像 Next.js 这类框架更适合 SSR 和 SEO 场景。这次项目主要是 SPA，CRA 正好够用。

---

第二步：理解基本结构和概念

React 的核心是组件化思维。我们从最初的 <App /> 出发，一点点拆解 UI。

// src/App.js
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>欢迎来到我的管理系统</h1>
    </div>
  );
}

export default App;

这里有几个关键点需要说明：

1. JSX：看起来像 HTML，实际是 JavaScript 的语法扩展。
2. 函数组件 vs 类组件：我们选择了函数组件 + Hook 的方式，因为代码更简洁，也更容易组织逻辑。
3. 模块导出与导入：通过 export default 和 import 组织组件树。

---

第三步：构建第一个交互功能

我们要做的第一个小功能是一个用户列表展示页，带搜索功能。

设计思路：

• 使用 <input> 接收用户输入
• 列表数据来自 mock 数据或 API
• 根据输入内容动态过滤列表

// src/components/UserList.js
import React, { useState } from 'react';

const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
];

function UserList() {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredUsers = users.filter(user =>
    user.name.includes(searchTerm)
  );

  return (
    <div>
      <input
        placeholder="输入姓名搜索"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

然后把这个组件引入到 App 中：

// src/App.js
import React from 'react';
import UserList from './components/UserList';

function App() {
  return (
    <div className="App">
      <UserList />
    </div>
  );
}

export default App;

这样一个简单的交互页面就完成了。

---

第四步：引入样式和第三方库

我们采用的是 SCSS + CSS Modules 的方式来管理样式，避免全局污染。

例如：

/* components/UserList.module.scss */
.userInput {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

在组件里这样引用：

import styles from './UserList.module.scss';

<input className={styles.userInput} ... />

对于 UI 组件，我们选择了 Ant Design。它封装好了大部分常用控件，节省了不少时间。

npm install antd

import { Button, Input } from 'antd';

<Button type="primary" onClick={() => console.log('clicked')}>
  提交
</Button>

注意：Ant Design 默认是整包引入，容易造成体积过大。建议按需加载或使用 Babel 插件做优化。

---

第五步：状态管理和异步请求

当数据量变大或者需要跨组件通信时，我们就需要考虑状态管理方案了。

我们先用到了 useReducer 来管理复杂的 UI 状态，比如分页、筛选条件等。后期再引入 Redux Toolkit。

关于 API 请求，我们统一使用 axios，并封装了一个通用的数据层。

// services/userService.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
});

export function fetchUsers(params) {
  return apiClient.get('/users', { params });
}

在组件中调用：

import { useEffect, useState } from 'react';
import { fetchUsers } from '../services/userService';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetchUsers().then(res => {
      setUsers(res.data);
      setLoading(false);
    });
  }, []);

  if (loading) return <p>加载中...</p>;
  
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

心得：早期不要急着用高级库，把原生的生命周期钩子用清楚更重要。

---

效果总结：从零到上线的真实体验

这套 React 构建的用户中心页面上线后，收到了如下积极反馈：

• 开发效率显著提升：组件化结构让多人协作更顺畅，代码复用率提高 60%+
• 维护成本降低：状态集中管理后，Bug 更容易定位
• 用户体验更好：虚拟 DOM 和局部更新机制提升了交互响应速度
• 项目可拓展性强：后续新增功能只需要按组件模式添加即可

更重要的是，我们团队成员对 React 的认知有了质的飞跃。很多人以前觉得 React“难学”，现在都能写出结构清晰、易于维护的组件了。

---

我的经验分享：给 React 新人的实用建议

1. 不要上来就学复杂的状态管理

Redux、MobX、Zustand 这些工具确实强大，但初期建议先把 React 的基本生命周期、Hook、props 和 state 弄明白。你可以从一个小型项目练起，比如 ToDo List 或者记账 App。

2. 多用 Chrome DevTools 调试组件结构

React DevTools 扩展可以让你清晰地看到组件树、props、state 的变化，大大提升调试效率。

小技巧：结合 console.log 和断点调试，能更快找到问题根源。

3. 关注性能和兼容性

• 对于长列表，使用 React.memo 避免不必要的渲染
• 使用 useCallback 优化回调函数
• 对 IE11 支持？你可能需要引入 polyfill 或降级
• 使用 @babel/preset-env 自动转译 ES6+ 语法

4. 保持学习新技术的敏感度

目前 React 生态发展迅速，比如：

• React Server Components（RSC）
• Next.js App Router
• React Compiler（还在实验阶段）
• TailwindCSS 等新式 CSS 方案

这些可能短期内不会影响你当前的项目，但它们代表了未来趋势。

5. 多实践，别怕犯错

记得我第一次写一个表格组件时，用了最笨的方式硬写，后来发现可以用开源库；第二次尝试自己封装，效果还不错。第三次，我已经能够熟练结合 TypeScript 写出类型安全的组件了。

编程的成长没有捷径，只有在错误中不断迭代。

---

写在最后：React 是一段旅程，不是终点

如果你刚开始接触 React，可能会被各种术语吓住：Hooks、高阶组件、上下文、合成事件……其实这些都很简单，只要动手去做几个小项目，就会豁然开朗。

React 只是一个工具，真正的成长来自于你解决的问题、优化的性能、重构的代码。就像我们那次项目一样，最初只是想完成一个小功能，结果却成为了团队技术升级的关键一环。

希望这篇文章能帮你少走弯路，快点爱上 React。一起用代码创造更好的产品体验吧！

---

✅ 如果你也刚入门 React，不妨从一个 Todo List 开始，写下你的第一段 JSX 代码。或许，这就是你成为优秀前端工程师的第一步。