React入门教程：从安装到第一个应用
作者：一位开源项目维护者，写过数十份技术文档
写作初衷：我当初学 React 时走了不少弯路。现在希望用最简单的方式，带零基础的你顺利迈出第一步。
一、React 是什么？为什么值得学？
如果你最近关注前端开发、Web 应用或者互联网产品，一定听过 React 这个名字。它不是“反应”，而是一个由 Facebook（现 Meta）开发并开源的 JavaScript 库，专门用来构建用户界面（UI）。
🌟 React 能做什么？
- 构建动态网页（比如点击按钮更新内容）
- 开发单页应用（SPA）——像 Gmail、Facebook 那样不刷新页面也能操作
- 配合 React Native 还能开发手机 App！
💡 为什么运营人员也该了解 React？
很多公司现在采用“技术+运营”协作模式。如果你是运营岗位，理解 React 的基本逻辑，能让你：
- 更准确地向开发提需求（比如“这个按钮点完要局部刷新”）
- 看懂产品原型的技术可行性
- 在无代码/低代码平台中更好地配置交互逻辑
我当初学的时候，以为 React 很难，结果发现只要理解几个核心概念，就能快速上手。今天我就带你一步步来！
二、环境准备：搭建你的第一个 React 开发环境
在开始写代码前，我们需要安装一些工具。别担心，我会用最简单的命令带你完成。
✅ 前提条件
你需要先安装以下两个软件：
| 软件 | 作用 | 安装方式 |
|---|---|---|
| Node.js | 提供 JavaScript 运行环境 | 官网下载（选 LTS 版本） |
| 代码编辑器 | 写代码的地方 | 推荐 VS Code |
🔍 检查是否安装成功：
打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：node -v npm -v如果看到版本号（如 v18.17.0），说明安装成功！
🛠️ 创建你的第一个 React 项目
我们使用官方推荐的工具 Vite（比旧的 Create React App 更快更轻量）来初始化项目。
在终端中依次执行以下命令：
# 1. 创建一个新项目（项目名叫 my-react-app）
npm create vite@latest my-react-app -- --template react
# 2. 进入项目文件夹
cd my-react-app
# 3. 安装依赖（这一步会下载 React 相关的库）
npm install
# 4. 启动开发服务器
npm run dev
⏱️ 第一次运行可能需要 1-2 分钟下载依赖，请耐心等待。
启动成功后，终端会显示类似这样的信息：
Local: http://localhost:5173/
Network: http://192.168.x.x:5173/
打开浏览器，访问 http://localhost:5173/，你会看到一个欢迎页面！🎉
三、React 核心概念：用最简单的话讲清楚
现在你已经有一个能跑的 React 项目了。但代码里那些 <div>、{}、function 到底是什么意思？我们来一一拆解。
🧩 1. 组件（Component）—— React 的积木
在 React 中，一切皆组件。你可以把网页想象成乐高积木，每个按钮、标题、列表都是一个小积木（组件），组合起来就是完整页面。
我当初学的时候，最大的误区就是试图一次性写整个页面。其实应该：先写小部件，再拼装。
示例：一个最简单的组件
打开 src/App.jsx，你会看到类似这样的代码：
function App() {
return (
<div>
<h1>Hello React!</h1>
</div>
);
}
export default App;
function App()：这是一个函数组件，名字叫Appreturn (...)：返回你要显示的 HTML 内容- 注意：这里用的是 JSX 语法（看起来像 HTML，其实是 JavaScript 的扩展）
🔄 2. 状态（State）—— 让页面“动”起来
静态页面谁都会做。真正的交互需要状态管理。比如：点一下按钮，数字 +1。
React 提供 useState 这个“魔法钩子”（Hook）来管理状态。
示例：计数器
修改 App.jsx 如下：
import { useState } from 'react';
function App() {
// 声明一个叫 count 的状态，默认值是 0
const [count, setCount] = useState(0);
return (
<div>
<h1>你点击了 {count} 次</h1>
<button onClick={() => setCount(count + 1)}>
点我加 1
</button>
</div>
);
}
export default App;
✅ 解释：
useState(0)返回一个数组：[当前值, 修改函数]count是当前数字setCount是用来更新它的函数onClick是点击事件，里面调用setCount就会自动刷新页面！
💡 小技巧：每次调用
setCount，React 会重新渲染这个组件，但只更新变化的部分，非常高效！
📥 3. 属性（Props）—— 组件之间的“传话”
组件之间怎么传递数据？靠 props（properties 的缩写）。
就像你给朋友发消息，props 就是“信”。
示例：自定义问候组件
新建一个文件 src/Greeting.jsx：
// Greeting 组件接收一个 name 属性
function Greeting({ name }) {
return <p>你好，{name}！欢迎来到 React 世界！</p>;
}
export default Greeting;
然后在 App.jsx 中使用它：
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="小明" />
<Greeting name="运营同学" />
</div>
);
}
效果：
你好，小明！欢迎来到 React 世界！
你好，运营同学！欢迎来到 React 世界！
✅ 总结：props 是父组件传给子组件的“参数”，让组件可复用！
四、实战项目：做一个简单的“运营任务看板”
现在，我们用刚才学的知识，做一个迷你运营任务管理面板。运营同事可以添加任务、标记完成。
🎯 功能需求
- 显示任务列表
- 可以添加新任务
- 点击任务可标记为“已完成”
步骤 1：创建 Task 组件（单个任务项）
新建 src/Task.jsx：
function Task({ task, onToggle }) {
return (
<div
style={{
padding: '8px',
margin: '4px 0',
backgroundColor: task.completed ? '#e0ffe0' : '#f0f0f0',
cursor: 'pointer'
}}
onClick={() => onToggle(task.id)}
>
{task.completed ? '✅ ' : '⭕ '} {task.text}
</div>
);
}
export default Task;
步骤 2：改造 App 组件（主面板）
修改 App.jsx：
import { useState } from 'react';
import Task from './Task';
function App() {
const [tasks, setTasks] = useState([
{ id: 1, text: '发布本周活动海报', completed: false },
{ id: 2, text: '收集用户反馈', completed: true }
]);
const [newTaskText, setNewTaskText] = useState('');
// 添加新任务
const addTask = () => {
if (newTaskText.trim() === '') return;
const newTask = {
id: Date.now(), // 简单生成唯一ID
text: newTaskText,
completed: false
};
setTasks([...tasks, newTask]);
setNewTaskText(''); // 清空输入框
};
// 切换任务完成状态
const toggleTask = (id) => {
setTasks(
tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
)
);
};
return (
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
<h1>🚀 运营任务看板</h1>
{/* 添加任务表单 */}
<div style={{ marginBottom: '20px' }}>
<input
type="text"
value={newTaskText}
onChange={(e) => setNewTaskText(e.target.value)}
placeholder="输入新任务..."
style={{ padding: '8px', marginRight: '8px', width: '70%' }}
/>
<button onClick={addTask} style={{ padding: '8px 16px' }}>
添加
</button>
</div>
{/* 任务列表 */}
<div>
{tasks.map(task => (
<Task
key={task.id}
task={task}
onToggle={toggleTask}
/>
))}
</div>
</div>
);
}
export default App;
✅ 效果说明
- 页面顶部有输入框和“添加”按钮
- 下方列出所有任务，已完成的变绿色 ✅
- 点击任一任务，状态切换
🎉 恭喜！你已经用 React 做出了一个有实际用途的小工具。这个逻辑完全可以扩展成团队协作系统！
五、新手常见问题解答（FAQ）
❓1. 为什么我的页面没更新？点了按钮没反应！
检查：
- 是否正确使用了
useState？变量名是否拼错？ - 是否在
onClick里直接修改了count++？❌
正确做法是调用setCount(count + 1)✅
❓2. JSX 里为什么不能用 class？
在 JSX 中，class 是 JavaScript 的保留字，所以要用 className：
<div className="my-box">...</div>
❓3. 每次修改代码都要重启吗？
不用！Vite 支持热更新（Hot Reload）——你保存文件后，浏览器会自动刷新，无需手动操作。
❓4. 文件后缀用 .js 还是 .jsx？
建议用 .jsx，这样编辑器能更好识别 JSX 语法，提供智能提示。
六、学习建议与下一步路线图
你已经迈出了关键的第一步！接下来，我建议你按这个顺序深入：
📚 学习路径推荐
| 阶段 | 内容 | 推荐资源 |
|---|---|---|
| 基础巩固 | 条件渲染、列表渲染、表单处理 | React 官方文档“快速入门” |
| 进阶概念 | useEffect（副作用）、自定义 Hook | 《React Hooks 详解》 |
| 状态管理 | Context、Redux/Zustand | 尝试用 Context 优化任务看板 |
| 路由 | 页面跳转（React Router） | 官方教程 + 实战项目 |
| 项目实战 | 做一个博客、待办清单或电商首页 | GitHub 上找开源项目模仿 |
💡 我的避坑指南
- 不要死记语法：理解“为什么”比“怎么写”更重要
- 多动手：哪怕只是改一个颜色，也要自己敲代码
- 善用调试：在
return前加console.log查看变量 - 别怕报错：90% 的错误都是拼写或括号问题，仔细看红字！
结语
React 并不可怕，它只是一个帮你更高效构建用户界面的工具。无论你是想转行开发，还是作为运营提升技术沟通能力，掌握 React 的基础都能让你在数字化时代更具竞争力。
我当初学的时候，也是从“Hello World”开始，一步步做出自己的项目。你也可以！
现在，打开你的终端，运行那个 npm run dev，看着浏览器里跳动的页面——你已经是 React 开发者了！
加油，未来的开发者！🚀
评论 0