React入门教程：从安装到第一个应用 —— 一位五年前端工程师的实战分享
引言：为什么选择写这篇React入门文章？
我是张晨，一名有着5年经验的前端开发工程师，主要使用React进行企业级Web应用的开发。在我职业生涯早期，第一次接触React时也经历了“一脸懵”的阶段。当时只是听别人说：“React很厉害，你得学。”但真正开始写代码的时候，却发现文档和社区信息浩如烟海，不知道从哪下手。
我相信有不少刚入门前端的朋友也有类似经历：
- 不知道React到底适不适合自己
- 安装环境就出问题，卡了好久
- 看着教程写出来的代码却跑不起来
- 理解不了组件化、虚拟DOM这些概念
所以我决定以一个真实项目为背景，结合自己的实际工作经验，来写一篇**《React入门教程：从安装到第一个应用》**。希望通过这篇接地气、有温度的文章，帮助你少走弯路，快速上手并真正用React写出一个能跑的小应用。
项目背景：接到的第一个React小任务
去年年初，我加入了一个新的团队，负责一个内部管理系统的重构工作。其中一个模块是用户权限配置页，原系统是用jQuery写的，界面老旧，维护成本高。新系统要转向React + Ant Design（简称AntD）来做，这也是我正式接手的第一个React项目。
当时的我虽然会用React写简单的页面，但在实际开发中还是遇到了不少问题。尤其是从零搭建开发环境、理解函数组件与Hooks、调试样式兼容性等方面，踩了不少坑。
这让我意识到：很多新人在学习React时，并不是因为技术本身多难，而是缺少一个完整的、贴近实战的起点。
于是我就想，如果能把我第一次完整实现一个React小应用的过程记录下来，或许就能帮助刚起步的同学顺利迈出第一步。
问题描述：新手常见的几个痛点
在做这个项目的过程中，我发现有几个典型的初学者常见问题：
React开发环境搭建复杂
- Node.js版本不对？npm报错？create-react-app安装失败？
- 一上来就被终端里的各种提示劝退了
React概念抽象，不好理解
- “组件”是个啥？JSX语法是啥意思？状态又是什么鬼？
- 教程里写的代码跑不起，自己尝试改一下就出bug
没有明确的目标感
- 学了两周React，却连一个像样的组件都写不出来
- 感觉知识点散乱，不知道怎么组织成一个完整应用
这些问题我在第一遍学React的时候也深有体会。所以这篇文章我会一步步带着你：
- 搭建开发环境
- 编写第一个React组件
- 添加交互功能
- 解决常见错误
- 并最终完成一个小应用
整个过程都会用我真实的开发流程来展开。
解决方案：用最基础的方式写出一个可运行的React应用
我们从最简单的例子入手：做一个待办事项列表（Todo List）。这是前端入门最经典的练手项目，既简单又能体现状态管理和组件拆分的思想。
技术选型
- 工具链：
create-react-app（CRA） - UI组件：不使用第三方库（初期保持简单）
- 状态管理：仅使用
useState - 交互方式：点击添加/删除todo项
开始编码：从创建项目到跑起第一个组件
第一步：安装Node.js和npm
首先确保你的电脑已经安装了Node.js和npm。可以通过终端输入以下命令检查：
node -v
npm -v
如果没有输出版本号，请先去nodejs官网下载安装。
小贴士：建议使用LTS版（长期支持版），稳定性更好。如果是macOS，可以考虑用nvm来管理Node.js版本。
第二步：创建React项目
我们使用create-react-app来初始化项目。它是Facebook官方提供的脚手架工具，无需手动配置Webpack/Babel等繁琐工具。
npx create-react-app todo-app
cd todo-app
npm start
⚠️ 注意：有时候因为网络或权限问题，这里可能会卡住。如果你在国内，可以尝试切换淘宝镜像：
npm config set registry https://registry.npmmirror.com/
执行完后，在浏览器打开 http://localhost:3000，你会看到React的欢迎页面：
第三步：理解React项目的目录结构
todo-app/
├── public/
│ ├── index.html <- 页面模板
├── src/
│ ├── App.js <- 主组件
│ ├── index.js <- 入口文件
├── package.json <- 包依赖和配置
我们可以暂时忽略public目录下的内容。重点来看src目录下这两个文件：
index.js 是入口点：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
这段代码的作用就是告诉浏览器：“把App组件渲染到id为root的DOM节点上”。
App.js 是主组件：
function App() {
return (
<div className="App">
<header className="App-header">
<p>Hello, React!</p>
</header>
</div>
);
}
export default App;
这个App是一个函数组件（Functional Component），返回的内容就是我们要显示的UI部分。
你可以试着把<p>Hello, React!</p>改成你喜欢的文字，比如 <p>欢迎来到我的第一个React应用</p>。保存之后，浏览器会自动刷新，实时看到修改结果。
是不是很爽？这就叫热更新！
编写第一个React组件：TodoList
现在我们来动手写一个真正的React组件：一个简单的待办事项列表。
目标如下：
- 输入框输入内容
- 点击“添加”按钮，新增一条待办事项
- 支持点击删除某一项
- 所有事项展示在页面上
步骤一：设计组件结构
我们先画个草图：
TodoList
├── TodoInput <- 输入框+添加按钮
├── TodoItem <- 单个待办事项条目
└── TodoList <- 列表整体
不过为了简单起见，我们先在一个组件中完成所有逻辑，后续再讲如何拆分成多个组件。
步骤二：编写基本功能
修改 App.js 如下：
import React, { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleAdd = () => {
if (inputValue.trim()) {
setTodos([
...todos,
{
id: Date.now(),
text: inputValue
}
]);
setInputValue('');
}
};
const handleDelete = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div style={{ padding: 20 }}>
<h1>我的待办事项</h1>
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="请输入事项"
/>
<button onClick={handleAdd}>添加</button>
</div>
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
<button onClick={() => handleDelete(todo.id)} style={{ marginLeft: 10 }}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default App;
这个例子虽然简单，但它包含了React的几个核心概念：
- 使用
useState管理状态 - JSX语法渲染UI
- 组件内的事件处理
- 列表渲染 + 条件控制
你可以试试看输入几个事项，然后点击删除，一切应该都能正常运作！
实战踩坑：那些容易翻车的地方
当然，在实际开发中肯定会遇到各种问题。下面是我当时踩过的几个典型坑，希望你不要再被绊倒。
坑点1：key值不要写index
在列表渲染时，我们经常看到这样写：
{todos.map((todo, index) => (
<li key={index}>{todo.text}</li>
))}
千万别这么干！ 因为当列表顺序变化时，用index作为key会导致性能下降甚至渲染异常。
推荐做法是给每条数据分配一个唯一ID（如上面例子中的id: Date.now()）。
坑点2：直接修改state导致不可预期结果
错误写法：
todos.push({ text: 'new item' });
setTodos(todos); // ❌ 这样不会触发更新
React的state是不可变的。正确的做法是通过数组方法返回一个新数组：
setTodos([...todos, newItem]);
坑点3：组件未导出导致白屏无报错
有时候写了新组件却没有正确导出，页面只显示空白但也没有报错。请务必确认导出语句是否正确：
export default function TodoItem() { ... }
坑点4：样式命名冲突
React默认使用全局CSS，如果你的两个组件用了同样的类名，可能导致样式混乱。
解决方法：
- 使用BEM命名规范（
.todo-list__item） - 或者使用CSS Modules（推荐）
举个CSS Modules的例子：
/* TodoList.module.css */
.container {
padding: 20px;
}
.title {
color: #333;
}
使用方式：
import styles from './TodoList.module.css';
function App() {
return (
<div className={styles.container}>
<h1 className={styles.title}>我的待办事项</h1>
{/* ... */}
</div>
);
}
最终效果与收获
经过这一番折腾，我们成功地写出一个带交互功能的React待办事项列表。它虽然很简单，但涵盖了React的核心知识：组件、状态、事件、列表渲染等。
更重要的是，你现在已经有了一个可以跑起来的真实项目环境，接下来就可以继续拓展功能了：
- 支持本地存储（localStorage）
- 添加完成状态
- 分类筛选
- 集成Ant Design组件库美化界面
- 加入路由（React Router）
- 使用Redux或Context API做状态管理
这些进阶内容我会在后面的系列文章中继续讲解。
经验总结：给新手的一些建议
根据我这几年的学习和教学经验，我想给你一些真诚的建议：
✅ 1. 从做中学，不要光看教程
很多人喜欢一遍又一遍看视频、读文档，但真正写代码的时间却很少。记住一句话：
写代码才是学编程最好的方式。
当你遇到问题时，去查文档和Stack Overflow才是正途。边写边查，印象更深。
✅ 2. 多问自己为什么
比如我们刚才用到了useState，不要只是记它的用法，要去思考：
- 为什么不能直接赋值修改state？
- 为什么React推崇不可变数据？
- Hook是怎么工作的？
理解底层原理，会让你写代码更有底气。
✅ 3. 多调试，善用DevTools
Chrome DevTools是你最好的朋友。你可以随时查看组件树、props传值、React的状态变化等信息。
React Developer Tools插件强烈推荐安装。
✅ 4. 跟着趋势学，不要钻老框架
React目前依然是主流，而且社区活跃，生态完善。Vue、Angular也都不错，但对于大多数公司来说，React仍是优先选择。
特别是随着React Server Components的推进、Next.js/Vercel等SSR方案的流行，React的生态依然充满活力。
写在最后：坚持比天赋更重要
回想我刚开始学React那会儿，也常常觉得枯燥、焦虑，甚至怀疑自己是不是不适合干前端。但现在回头看，其实只要肯下功夫，每个人都能掌握这项技能。
React并不是一个魔法，它只是一个工具。而真正的程序员，是靠不断实践、解决问题，一点点成长起来的。
如果你正在学习的路上，请相信：你现在写不出来的组件，几个月后再回来看看，一定会心一笑。
希望这篇入门教程能够帮你在React学习旅程中迈出坚实的第一步。
如果你觉得这篇文章对你有帮助，欢迎关注我，我会持续分享更多前端开发实战经验和技巧。也可以留言告诉我你感兴趣的技术话题，我们一起探讨。
祝你coding愉快 🧑💻💪
评论 0