React 入门教程：从安装到第一个应用的实战分享
引言
作为一个前端开发者，我刚接触 React 的时候，其实挺懵的。那时我们团队要重构一个老项目，技术选型定为 React，我作为新人只能硬着头皮上。现在回头看，虽然过程中踩了不少坑，但也让我真正理解了 React 的魅力和开发方式。
今天我想结合自己的真实经历，写一篇关于 “React 入门教程：从安装到第一个应用” 的文章。这篇文章不会堆砌概念，而是以一个实际的小案例为主线，带你一步步走完从零开始搭建 React 应用的过程，并分享我在早期开发中遇到的真实问题和解决方法。
项目背景 & 遇到的问题
事情是这样的：公司要做一个内部使用的任务管理工具，用来记录日常的工作进度，方便项目经理查看整体状态。原本是个静态 HTML 页面，数据靠 Excel 导入导出维护，效率很低，也不直观。于是决定用 React 来做一个交互更强的界面。
第一次接到这个任务时，我脑子里只有一个模糊的概念：“React 是组件化的框架”，但具体怎么开始写？怎么组织结构？如何处理表单数据？完全没底。
解决方案与实现思路
首先，我们要明确几个目标：
- 快速搭建一个 React 开发环境；
- 实现一个简单的任务列表，包括添加、删除功能；
- 梳理基础概念（JSX、组件、状态等）；
- 避免使用太多高级特性，保持入门级；
- 注意代码可维护性和性能表现。
我们的目标不是做出一个企业级应用，而是一个能运行起来、有交互的小应用。这个小项目足够简单，适合新手练手。
代码实践：从创建项目到第一个组件
安装环境准备
React 的主流开发方式还是通过 create-react-app 这个脚手架来快速生成项目结构。当时我也查了资料，发现它屏蔽了很多配置细节，特别适合入门。
npx create-react-app task-manager
cd task-manager
npm start
执行完上面三行命令后，浏览器就会打开一个默认页面，显示 “Welcome to React”。接下来我们就可以在这个基础上做修改了。
小贴士：在公司里，网络环境可能受限，
npx执行较慢，可以考虑先全局安装 CRA：npm install -g create-react-app create-react-app task-manager
创建第一个组件：任务列表
我们先创建一个叫 TaskList.jsx 的文件，然后在 App.js 中引入它。
TaskList.jsx
import React from 'react';
const tasks = [
{ id: 1, title: "完成需求文档", completed: false },
{ id: 2, title: "和产品经理过一遍逻辑", completed: true },
];
function TaskList() {
return (
<ul>
{tasks.map(task => (
<li key={task.id}>
<span>{task.title}</span>
</li>
))}
</ul>
);
}
export default TaskList;
App.js
import React from 'react';
import TaskList from './TaskList';
import './App.css';
function App() {
return (
<div className="App">
<h1>任务管理器</h1>
<TaskList />
</div>
);
}
export default App;
现在你就能看到两个任务展示出来了。看起来很简单吧？但这只是静态数据，我们要让它动起来！
添加交互功能：添加和删除任务
状态管理初体验
React 的核心之一就是状态管理。我们可以用 useState Hook 来管理任务列表的状态。
// 修改后的 TaskList.jsx
import React, { useState } from 'react';
function TaskList() {
const [tasks, setTasks] = useState([
{ id: 1, title: "完成需求文档", completed: false },
{ id: 2, title: "和产品经理过一遍逻辑", completed: true },
]);
const addTask = () => {
const newTask = {
id: Date.now(),
title: "新任务",
completed: false,
};
setTasks([...tasks, newTask]);
};
const deleteTask = (id) => {
const updatedTasks = tasks.filter(task => task.id !== id);
setTasks(updatedTasks);
};
return (
<div>
<button onClick={addTask}>添加任务</button>
<ul>
{tasks.map(task => (
<li key={task.id}>
<span>{task.title}</span>
<button onClick={() => deleteTask(task.id)}>删除</button>
</li>
))}
</ul>
</div>
);
}
到这里，我们已经实现了一个可以动态添加和删除的任务列表。虽然功能还很简陋，但至少具备了一个 React 应用的基本要素：组件化结构 + 状态驱动视图更新。
踩过的坑 & 解决过程
React 学习的过程中总有些“恍然大悟”的时刻，也有不少“卡壳半天”的瞬间，这里分享几个我当年踩过的真实坑：
1. 状态更新不及时导致的 bug
我在一开始写的时候犯了个错误：直接对原数组进行操作后传给 setTasks，比如这样：
tasks.push(newTask);
setTasks(tasks);
结果发现任务并没有新增，或者渲染异常。后来才意识到，状态更新必须是不可变的（immutable），不能直接修改原状态对象或数组。
✅ 正确做法：
setTasks([...tasks, newTask]);
React 只有在检测到引用变化时才会触发重新渲染。
2. 列表没有设置 key 导致警告
如果你像下面这样写循环，控制台会报错：
{tasks.map(task => (
<li>{task.title}</li>
))}
因为 React 推荐我们在遍历列表时设置唯一的 key 属性来帮助识别每个元素的身份。
✅ 正确写法：
{tasks.map(task => (
<li key={task.id}>{task.title}</li>
))}
3. 浏览器兼容性注意点
当时项目上线后反馈说 IE11 上样式有问题，我们才发现 React 默认只适配现代浏览器，ES6+ 的语法部分需要额外配置 Babel 和 Polyfill。
解决方案是在 package.json 里添加 browserslist 字段：
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
这样 Webpack 构建时就会自动加上对应的转义处理。
4. 性能优化的初步尝试
当任务数量很多（比如几百条），滚动会出现卡顿现象。当时我还没有学虚拟滚动之类的技术，只是做了一些简单优化：
- 组件拆分更细粒度（避免在一个组件里写太多逻辑）
- 使用
React.memo避免不必要的重复渲染 - 减少频繁调用
setState
这些虽是初级优化手段，但在项目初期还是非常有效的。
效果总结：我们得到了什么？
最终交付的应用虽然功能简单，但用户体验比以前好了很多：
- 实时更新任务状态，不用刷新页面；
- 支持多任务并行管理；
- 后续扩展也更容易，比如增加搜索、过滤等功能；
- 团队成员接手成本低，代码结构清晰。
更重要的是，我通过这个项目打下了扎实的 React 基础，也明白了“从小项目入手”的重要性。
我的几点经验建议
如果你也是刚刚开始学习 React 或者还在犹豫是否要学习，我有几点建议送给你：
✅ 1. 不要一开始就追求“全能”
很多人刚学 React 就想搞 Redux、MobX、路由、服务端渲染……但别忘了，React 本身只是一个视图层库。先把核心概念（组件、状态、生命周期、Hook）吃透，再逐步进阶。
✅ 2. 多写小例子，少看视频
我个人的经验是：看书/视频不如动手实操。你可以自己写个小天气插件、待办事项、随机名言生成器等等。每写一个小功能，都是对知识点的巩固。
✅ 3. 学好 JavaScript 再学 React
React 的本质还是基于 JavaScript 的框架，如果你连闭包、this、数组方法都不熟，强行学 React 会很难受。
推荐一本小书：You-Dont-Know-JS
✅ 4. 学会调试工具
Chrome DevTools 是个宝藏，我常用的功能：
- React Developer Tools 查看组件树和 props；
- Performance 工具分析性能瓶颈；
- Console + Sources 配合调试逻辑问题；
掌握调试技巧可以让你少加班几小时！
结语
写这篇文章的时候，我脑海里浮现出当初一个人在会议室对着电脑敲代码的日子。那时候不懂就问、出错了就改、反复跑流程。正是这一路的摸索，才让我成长为今天的前端开发者。
希望这篇基于我亲身经历的文章，能够帮你少走一些弯路。React 并不像想象中那么难，只要你敢于动手尝试，很快就能做出属于自己的第一个 React 应用。
一起加油吧！如果你有任何问题，欢迎留言讨论 💬
（全文约 2353 字）
评论 0