React入门教程：从安装到第一个应用
React 是当下最流行的前端框架之一。它由 Facebook 开发并开源，帮助开发者构建高性能、交互性强的用户界面（UI）。如果你想要学习现代网页开发技术，掌握 React 会是一个非常不错的选择。
本教程面向完全零基础的新手，将带你一步步完成 React 的安装和配置，并通过一个简单的实战项目让你写出你的第一个 React 应用程序。我们不会跳过任何关键步骤，每一步都会配合代码示例讲解。
一、什么是 React？
简单来说：
React 是一个用于构建用户界面的 JavaScript 库。你可以把它想象成“拼图工具”——你可以用一个个小部件（组件）来搭建完整的网页或应用程序。
它擅长做什么？
- 构建动态网页：比如点击按钮后内容发生变化。
- 数据驱动视图更新：当数据变化时，页面内容自动更新。
- 适合复杂的大型应用：如社交网站、管理系统、电商平台等。
二、环境准备：开始前需要做哪些准备工作？
要使用 React，你需要准备好以下开发工具：
1. 安装 Node.js 和 npm
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。npm 是它的包管理器，相当于软件商店。
✅ 安装步骤：
- 打开浏览器访问 https://nodejs.org
- 下载最新稳定版（建议 LTS 版本）
- 双击下载的安装包，一路下一步即可
- 安装完成后，在终端中运行：
node -v
npm -v
如果能看到版本号输出，说明安装成功！
2. 使用 Create React App 创建项目
Create React App 是官方提供的一个脚手架工具，可以帮助你快速生成一个 React 项目的基础结构。
✅ 创建项目的命令如下：
npx create-react-app my-first-app
其中 my-first-app 是你的项目名称，可以自定义。
创建完成后进入项目目录：
cd my-first-app
启动开发服务器：
npm start
默认浏览器会自动打开 http://localhost:3000，显示初始页面：
🎉 成功！现在你已经创建并运行了第一个 React 项目！
三、核心概念讲解：初学者必须了解的基本知识
虽然看起来有点复杂，但 React 并不像它听起来那么难。下面我们用最通俗易懂的语言介绍几个关键概念。
1. 组件（Component）
组件是 React 的基本单位。你可以把组件看作乐高积木 —— 一个小功能单元，可以在页面上重复使用。
例如一个“欢迎消息”组件，每次需要时都可以直接调用。
示例代码：
function Welcome() {
return <h1>你好，我是Welcome组件</h1>;
}
在其它组件中使用它：
function App() {
return (
<div>
<Welcome />
</div>
);
}
2. JSX语法
JSX 是一种类似 HTML 的写法，它是 JavaScript 的扩展语法，用来描述 UI。
例如：
<h1>Hello, React!</h1>
这是不是和 HTML 很像？没错，JSX 就是这样设计的，方便你直观地构建页面。
⚠️ 注意：JSX 最终会被编译为标准的 JavaScript 函数调用。
3. props（属性）
props 类似于 HTML 标签中的属性，用于向组件传递数据。
示例：
function Greeting(props) {
return <h1>你好，{props.name}</h1>;
}
function App() {
return (
<div>
<Greeting name="张三" />
<Greeting name="李四" />
</div>
);
}
上面的例子中，我们将不同的名字传给 Greeting 组件，实现了个性化问候。
4. state（状态）
state 是组件内部的变量，它决定了组件展示的内容。当 state 改变时，React 会自动重新渲染页面的一部分。
示例：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前数字：{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}
在这个例子中，我们使用了 useState 来声明一个状态变量 count，并通过按钮点击事件修改它。
四、实战项目：做一个 todo 待办事项列表
我们将一起实现一个简单的待办事项列表应用，包含添加任务、显示任务、删除任务等功能。
第一步：创建一个新的 React 应用
如果你之前已经创建了一个叫 my-first-app 的项目，你可以继续使用它；否则可以用下面的命令新建一个项目：
npx create-react-app todo-app
cd todo-app
npm start
第二步：编辑 App.js 文件
替换 src/App.js 的内容为以下代码：
import React, { useState } from 'react';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState('');
const addTask = () => {
if (input.trim()) {
const newTask = {
id: Date.now(),
text: input,
done: false
};
setTasks([...tasks, newTask]);
setInput('');
}
};
const deleteTask = (id) => {
const updatedTasks = tasks.filter(task => task.id !== id);
setTasks(updatedTasks);
};
return (
<div className="App">
<h1>我的待办事项</h1>
<div>
<input
type="text"
placeholder="输入新任务"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button onClick={addTask}>添加</button>
</div>
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.text}
<button onClick={() => deleteTask(task.id)}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default App;
第三步：美化页面（可选）
你还可以简单修改一下 src/App.css 文件来让界面更美观：
.App {
font-family: sans-serif;
max-width: 500px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
input[type=text] {
padding: 6px;
width: 70%;
}
button {
padding: 6px 12px;
margin-left: 5px;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-top: 10px;
}
🎯 效果预览：
你现在应该可以看到：
- 输入框 + 添加按钮
- 每次添加的任务都显示在下方
- 可以点击“删除”移除任务
恭喜你！这是你的第一个完整的 React 应用！
五、新手常见问题解答
以下是很多初学者常遇到的问题和对应的解答：
❓Q1：React 是不是很难？
✅ 答：对刚接触编程的人，React 肯定有门槛，但只要打好 HTML、CSS、JavaScript 基础，加上坚持练习，就能很快上手。React 社区也非常活跃，资源丰富，不怕学不会。
❓Q2：是否需要先学会 HTML/CSS/JS 再学 React？
✅ 答：推荐顺序是先掌握 HTML、CSS 和 JavaScript 基础，特别是 ES6+ 的一些语法（如箭头函数、解构赋值、模块化），这些是 React 的基础。
❓Q3：React 到底是怎么工作的？
✅ 答：简单说，React 将页面分成多个组件，每个组件负责自己的部分。当你修改了某个组件的数据（state 或 props），React 会自动判断是否需要重新渲染那个部分，从而高效更新页面。
❓Q4：为什么不能直接操作 DOM 元素？
✅ 答：React 鼓励使用“声明式编程”的方式来开发 UI —— 你只需要告诉 React 你想显示什么，而不是去手动操作元素。这样做有助于减少错误和提升性能。
❓Q5：如何调试 React 应用？
✅ 答：Chrome 浏览器安装 “React Developer Tools” 插件就可以方便查看组件树、props、state 等信息，非常实用。
六、下一步学习建议
掌握了今天的知识点之后，你可以继续深入以下几个方向：
🔹 推荐学习路径：
| 学习主题 | 说明 |
|---|---|
| 组件通信 | 学会父子组件之间传递数据、回调函数等 |
| React Hooks | 如 useEffect, useContext, useReducer 等进阶钩子函数 |
| 状态管理 | 学习 Redux / Zustand / Context API 等状态管理方案 |
| 路由系统 | 掌握 React Router 实现页面间导航 |
| 表单处理 | 表单验证、表单库（如 Formik 或 React Hook Form） |
| TypeScript | 在 React 中结合 TypeScript 编写类型安全的代码 |
| 项目实战 | 多做一些完整的小型项目，巩固知识 |
总结
React 是现代 Web 开发非常重要的一环，本文从零开始介绍了它的基本概念、开发环境搭建方法、核心特性和实际项目开发流程。
通过今天的学习，你应该能够：
✅ 创建一个 React 项目
✅ 编写基础组件
✅ 使用 props 和 state 控制组件行为
✅ 实现一个 todo 待办清单应用
✅ 明白未来学习的方向
继续加油！前端世界广阔无边，React 只是起点！
📚 参考文档：
有问题可以在评论区留言或私信我，我会尽力解答！
🔚 教程完，感谢阅读！
评论 0