React入门教程：从安装到第一个应用
开篇：React是什么？用来做什么？
你可能已经听说过很多关于前端开发的内容，比如HTML、CSS、JavaScript这些技术。今天我们要介绍的是一个非常流行的技术——React。
什么是React？
React 是由 Facebook（现在叫 Meta）开发并维护的一个用于构建用户界面的 JavaScript 库。简单来说，你可以用它来做出网页上的交互式内容，比如按钮、表单、动态信息显示等。
React 是用来做什么的？
想象一下你要做一个网页，这个网页需要根据用户的操作不断变化内容（比如点击某个按钮后显示新的数据）。如果你只使用原生的 HTML 和 JavaScript 来做这件事，代码可能会变得复杂又难管理。
而 React 就是为了解决这个问题而出现的。它让开发者更容易地管理页面中不断变化的部分，并且可以让你把整个页面拆分成多个小模块来分别开发，提高效率和可维护性。
为什么初学者要学习 React？
- 市场需求大：React 是目前最流行的前端框架之一，企业招聘前端岗位时普遍要求掌握 React。
- 生态丰富：围绕 React 有一整套工具链和生态，方便快速开发。
- 适合组件化开发：React 鼓励用“组件”的方式写代码，结构清晰，容易扩展和复用。
- 社区活跃：遇到问题几乎都能在社区中找到答案。
本篇文章将带您从零开始，一步步搭建 React 环境，理解核心概念，并完成一个简单的 React 应用。
环境准备：如何搭建 React 开发环境？
在正式写代码之前，我们需要准备好开发 React 所需的基本工具。
第一步：安装 Node.js 和 npm
Node.js 是一个可以让 JavaScript 跑在电脑上的工具。npm 是它的包管理器，相当于应用商店，我们可以用它来下载 React 及其相关工具。
- 访问 https://nodejs.org
- 下载 LTS 版本（长期支持版），然后安装
- 安装完成后打开命令行（Windows 用 CMD 或 PowerShell，Mac/Linux 用终端）
- 输入以下两个命令查看是否安装成功：
node -v # 显示版本号，表示 Node.js 安装好了
npm -v # 显示版本号，表示 npm 安装好了
第二步：安装 create-react-app（创建 React 项目的脚手架工具）
create-react-app 是 Facebook 提供的创建 React 项目的一键工具，不需要配置任何打包工具就能快速启动项目。
执行以下命令安装：
npx create-react-app my-first-react-app
这个过程可能需要几分钟，请耐心等待。
安装完成后，进入项目文件夹：
cd my-first-react-app
然后启动开发服务器：
npm start
稍等片刻，浏览器会自动打开 http://localhost:3000，你会看到 React 的欢迎页面。
🎉 恭喜！你现在拥有了一个运行中的 React 项目！
核心概念：React 中的关键知识点通俗讲解
虽然 React 功能强大，但有几个基础概念非常重要，它们就像砖头一样，是搭建 React 应用的基础。
1. 组件（Component）
组件是 React 的最小单位。就像积木一样，我们可以用多个组件拼出一个完整的网页。
示例：定义一个组件
新建一个文件 src/HelloWorld.js，内容如下：
import React from 'react';
function HelloWorld() {
return (
<div>
<h1>你好，世界！</h1>
<p>这是我的第一个React组件</p>
</div>
);
}
export default HelloWorld;
然后再修改 src/App.js 文件，使用这个组件：
import React from 'react';
import HelloWorld from './HelloWorld';
function App() {
return (
<div className="App">
<HelloWorld />
</div>
);
}
export default App;
保存之后，刷新浏览器，可以看到新添加的内容了！
2. JSX 语法（JavaScript + XML）
上面我们写的类似 HTML 的代码其实叫做 JSX。它是 React 的一种语法扩展，让我们可以直接在 JavaScript 中写 HTML 风格的结构。
例如：
<h1 style={{ color: 'red' }}>红色标题</h1>
注意：JSX 最外层必须只有一个父节点，否则会报错。
3. Props（组件之间的通信）
你可以把组件理解成一个函数，props 就是传递给它的参数。
示例：传参给组件
修改 src/HelloWorld.js 如下：
function HelloWorld(props) {
return (
<div>
<h1>你好，{props.name}！</h1>
</div>
);
}
再修改 App.js 使用 props：
<HelloWorld name="张三" />
刷新后可以看到 “你好，张三！”的效果。
4. State（组件内部的状态）
State 是组件自己的“记忆”，它可以存储一些变化的数据，比如按钮是否被点击过、输入框的内容等等。
示例：使用状态
我们来实现一个“点击计数器”。
修改 src/App.js 内容如下：
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<h1>你点击了 {count} 次</h1>
<button onClick={() => setCount(count + 1)}>点我+</button>
</div>
);
}
export default App;
这是一个非常典型的例子，展示了 state 和事件是如何工作的。
5. 事件处理（Event Handling）
React 中的事件处理跟 HTML 类似，只是写法稍微不同。
如上例中 <button onClick={...}>，其中的 onClick 就是一个事件处理器。
React 常见事件：
onChange：当 input 框内容改变时触发onSubmit：表单提交时触发onMouseOver：鼠标悬停时触发
实战项目：写一个待办事项应用（To-Do List）
接下来我们通过一个小项目来巩固前面的知识。我们将写一个“待办事项”应用，功能包括添加任务、删除任务。
步骤 1：初始化项目（如果还没创建的话）
npx create-react-app todo-list
cd todo-list
npm start
步骤 2：设计 UI 结构
我们想要一个输入框让用户输入任务名，还有一个按钮添加任务。任务列表会展示出来。
步骤 3：编写完整代码（直接替换 src/App.js）
import React, { useState } from 'react';
function App() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState('');
const addTask = () => {
if (input.trim()) {
setTasks([...tasks, input]);
setInput(''); // 清空输入框
}
};
const deleteTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
};
return (
<div style={{ padding: 20 }}>
<h1>待办事项</h1>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={addTask}>添加任务</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => deleteTask(index)} style={{ marginLeft: 10 }}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default App;
步骤 4：测试功能
刷新页面后，你可以尝试：
- 在输入框中输入内容，点击【添加任务】
- 新增的任务会出现在下方列表中
- 点击【删除】按钮可以移除该任务
恭喜！你已经完成了你的第一个 React 实战项目 🎉
常见问题解答
以下是新手在学习 React 过程中经常遇到的一些问题和解决方法：
Q1：为什么不能在组件中写多个 div？提示“Expected an element at root level of a JSX expression.”
答：因为每个组件的返回值必须包裹在一个父元素里。也就是说，你需要将所有内容放进一个 <div>、<Fragment> 或其他容器中。例如：
✅ 正确写法：
return (
<div>
<h1>标题</h1>
<p>正文</p>
</div>
);
❌ 错误写法：
return (
<h1>标题</h1>
<p>正文</p>
);
Q2：为什么我的组件没有更新？
答：React 是基于 state 更新的。如果你修改了变量但没有调用 setState（或 useState 返回的 setter 函数），页面是不会更新的。
Q3：怎么调试 React 项目？
答：
- 使用 Chrome 开发者工具的 Console 查看错误
- 安装 React Developer Tools 插件，可以查看组件树和 props、state 数据
Q4：React 是不是必须学 ES6？
答：ES6（现代 JavaScript 语法）是学习 React 的必备知识。常见的如箭头函数、解构赋值、类、模块导入导出等都需要了解。
学习建议：下一步我可以学什么？
你已经完成了 React 的第一课，也做出了一个实用的小项目。那么，接下来你可以考虑继续学习以下方向：
✅ 推荐进阶路线图：
| 学习阶段 | 主要内容 |
|---|---|
| 初级巩固 | 熟练使用 Hooks（useState、useEffect、useRef 等） |
| 中级技能 | 学习路由（React Router）、状态管理（Redux / Context API） |
| 高级实战 | 构建更复杂的项目，如博客系统、商城项目等 |
| 构建部署 | 使用 Webpack/Vite 打包、部署到 Vercel/GitHub Pages |
| 学习 TypeScript | 提升类型安全性和代码质量，成为企业级开发者 |
🔍 推荐学习资源
- React 官方文档（中文）：https://zh-hans.reactjs.org
- B站免费视频课程：搜索 “React入门教程”
- 免费实践平台：CodeSandbox（在线写 React）
总结
本文从 React 的基本概念出发，带你搭建了开发环境，介绍了核心知识点，并通过一个 To-Do 待办事项项目实现了实战演练。虽然 React 初看起来有点复杂，但只要坚持练习、动手实践，你就一定能掌握它！
最后送你一句鼓励：编程最好的老师就是你自己亲手敲下的每一行代码。加油！
如果你想继续深入学习 React，记得关注本教程系列的下一篇文章：《React进阶指南：组件通信与状态管理》。
评论 0