React入门教程：从安装到第一个应用
还记得我刚开始接触 React 的时候，那是在一家创业公司做前端。公司刚起步，技术选型上想快速搭建 MVP，团队里有人力推 Vue，有人建议用 Angular，但我坚持选择了 React —— 这个后来彻底改变我职业生涯的技术。
这篇文章不会像官方文档那样一板一眼地讲原理和语法，而是以一个真实项目为背景，带你从零开始搭起你的第一个 React 应用。我会用第一人称的方式，分享我在那个项目中从安装、开发、调试到最后上线的全过程，包括踩坑的经验和实用技巧。
项目的起点
那时候我们接了一个内部管理系统的需求，主要功能是管理客户信息、订单记录和权限控制。时间紧任务重，产品希望一个月内能跑起来。虽然之前我一直写原生 JavaScript 和 jQuery，但考虑到未来扩展性和团队协作，我决定尝试一下早就听闻已久的 React。
React 的学习曲线并不陡峭，但要真正上手并用于生产环境，还是需要一步步来。下面的内容，就是我在那个项目中从零搭建 React 环境，并完成第一个完整组件的过程。
安装与初始化：Create React App 是你的朋友
一开始我没有选择从头手动配置 Webpack 或 Babel，而是用了 Facebook 官方推荐的脚手架工具——Create React App（简称 CRA）。
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
这三行命令搞定了一切：本地服务器、热更新、代码编译、ESLint、Prettier 都配好了，默认支持 JSX、现代 JS 语法甚至 TypeScript。对于新人来说，这是最友好的方式。
不过别以为它万能。CRA 封装了配置细节，确实降低了门槛，但也带来后期定制灵活性的缺失。比如当我们项目进行到中期时，想要自己修改 Webpack 配置做一些性能优化，这时候就需要 eject 出来，或者改用 Vite + React 搭建更灵活的构建流程。
第一个组件：用户列表页
系统的核心模块之一是一个客户列表页面。这个页面需要展示表格数据、支持搜索和分页。我的第一个目标是用 React 把基本结构搭起来。
页面结构初探
按照 React 的理念，我把整个页面拆成了几个小组件：
UserTableHeader: 表格的表头部分UserTableRow: 单行用户数据UserList: 负责拉取数据和渲染整个列表SearchBar: 搜索栏组件
每个组件都尽量保持单一职责，比如 UserTableRow 只接收单条数据并显示，不处理任何状态逻辑。
数据获取与状态管理
早期没有引入 Redux，所以我直接在父组件 UserList 中用 useState 和 useEffect 来管理数据请求：
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => {
setUsers(data);
setLoading(false);
});
}, []);
if (loading) return <div>加载中...</div>;
return (
<table>
<thead><UserTableHeader /></thead>
<tbody>
{users.map(user => <UserTableRow key={user.id} user={user} />)}
</tbody>
</table>
);
}
这里其实有个小问题：当接口出错的时候，没有错误提示。后来我加了个 useEffect 来判断网络状态，也加入了 useErrorBoundary（或者可以考虑自定义 Hook 包装错误处理）。
实战中的挑战与解决过程
1. 初期组件嵌套太深导致维护困难
刚开始为了追求“组件化”，把很多 UI 元素都拆得太细，结果组件树很深，父子之间传 props 特别费劲。后来我学会了使用 Context API 来共享一些全局状态，比如用户登录信息。
2. 表格排序与分页状态混乱
分页和排序的状态当时散落在多个地方，最后我把它们集中在一个自定义 Hook 中统一管理：
function usePaginationAndSort(data) {
const [currentPage, setCurrentPage] = useState(1);
const [sortField, setSortField] = useState(null);
const [sortOrder, setSortOrder] = useState('asc');
const sortedData = useMemo(() => {
// 排序逻辑
}, [data, sortField, sortOrder]);
const paginatedData = useMemo(() => {
// 分页逻辑
}, [sortedData, currentPage]);
return { paginatedData, currentPage, setCurrentPage, sortField, setSortField };
}
这样的封装大大提高了组件的可读性和复用性。
3. 初级性能优化：避免无谓的渲染
React 默认会重新 render 整个组件树，但在实际开发中我发现有些子组件频繁刷新，其实完全没必要。这个时候我就开始使用 React.memo 和 useCallback 来优化：
const UserTableRow = React.memo(function UserTableRow({ user }) {
return (
<tr>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>
);
});
这样就能防止因为父组件状态变化而引起的不必要的子组件 rerender。
开发过程中的一些实用技巧
使用开发者工具调试 Props
Chrome 的 React Developer Tools 插件非常好用，你可以看到任意组件的 props、state，还能高亮更新区域，排查性能问题。
使用 ESLint + Prettier 规范代码风格
我们在项目初期就集成了 ESLint 和 Prettier，在保存文件时自动格式化代码，减少代码 review 时间。团队协作时这一点尤其重要。
浏览器兼容性不是小事
虽然 React 默认支持 IE11 已经不再，但我们项目必须适配 IE。为此，我在 package.json 中调整了 browserslist 配置，并引入 core-js/stable 做 polyfill：
"browserslist": {
"production": ["ie 11"],
"development": ["last 1 chrome version"]
}
另外注意不要滥用箭头函数，特别是在 JSX 里，容易触发不必要的重新渲染。
最终效果与收获
项目按期交付，用户反馈良好。客户列表页不仅交互流畅，还因为组件的高复用性，在后续新增供应商管理、订单查询等功能时节省了大量开发时间。
更重要的是，通过这个项目，我真正理解了 React 的思想：声明式编程、组件化设计、以及状态驱动视图。
给新手的一些建议
- 先跑起来，再深入原理。React 不必一开始就学透所有高级特性，先做出点东西才有动力继续。
- 多动手，少看教程。跟着视频敲一遍不如自己做个 todo list 实践更有价值。
- 关注用户体验和界面交互细节。React 很强，但如果你只顾状态不管视觉，那也难做出优秀的产品。
- 善用社区资源。React 社区非常活跃，遇到问题不妨看看 GitHub issues、Stack Overflow，或去掘金、知乎找中文资料。
- 合理选用生态工具。如
react-router管理路由，axios管理请求，formik表单验证等。
写在最后
React 在如今的前端生态圈中，已经不是一个“新兴”技术，而是一种“标配”。无论你是为了求职、转行，还是想提升开发效率，掌握 React 都是非常值得的。
这篇文章可能只是你 React 学习旅程的起点。我也是从一个简单组件开始，慢慢积累经验，最终成为现在能够主导大型 React 项目的前端工程师。希望你也能在这条路上走得比我更远。
如果你正在尝试 React，欢迎留言交流，说不定某一天我们会在同一个开源项目里碰面 😄
评论 0