React入门教程：从安装到第一个应用
一、React是什么？它是用来做什么的？
React 是一个由 Facebook 开发并维护的前端 JavaScript 库，用于构建用户界面。你可以把它理解成一个“工具箱”，专门用来搭建网页中那些会动的部分（比如按钮点击变化、页面切换等）。
想象一下你要搭一座房子，你可以自己从头开始砌砖、做屋顶，也可以用现成的模块快速组装——React 就是帮你把“网页”这个房子盖得更快更好的工具。
React 的特点：
- 组件化开发：把页面拆分成多个小部分，每个部分独立开发和管理。
- 响应式更新：数据一变，对应的界面内容也会自动刷新。
- 跨平台支持：不仅可以用来做网页（Web），还可以配合 React Native 做手机App。
- 社区庞大：遇到问题几乎都能找到答案。
在本教程中，我们将一步步教你如何安装 React 并写出你的第一个 React 程序！
二、环境准备：安装与配置
要使用 React，你需要先准备好开发环境。我们会使用一个叫做 create-react-app 的脚手架工具来帮我们快速创建一个 React 项目。
脚手架工具就像是盖楼时用的临时支架，让你快速搭好基本结构，专注于写代码，而不是各种配置。
2.1 安装 Node.js 和 npm
Node.js 是运行 JavaScript 的环境，npm 是 Node.js 自带的包管理器，用来下载安装工具和库。
安装步骤：
- 打开浏览器访问 https://nodejs.org
- 下载并安装 LTS（长期支持）版本
- 打开终端（Mac/Linux）或命令提示符（Windows），输入以下命令查看是否安装成功：
node -v
npm -v
你将看到类似如下输出（版本号可能不同）：
v18.16.0
9.5.1
说明 Node.js 和 npm 都已安装好了 ✅
2.2 创建第一个 React 项目
现在我们要用 create-react-app 来创建一个 React 应用。
步骤如下：
npx create-react-app my-first-app
稍等片刻后，它会自动为你创建一个完整的 React 项目。
进入项目文件夹：
cd my-first-app
启动开发服务器：
npm start
这时浏览器会自动打开一个页面，显示欢迎信息 🎉 恭喜！你的第一个 React 项目已经跑起来了！
三、核心概念：初学者也能看懂的专业词解释
React 的一些术语听起来很高大上，其实它们的意思并不难理解。下面我们就来用最简单的语言解释几个核心概念。
3.1 组件（Component）
组件是 React 中最基本的单元。就像积木块一样，我们可以把页面上的各个部分封装成一个个组件，重复使用。
例如：导航栏、按钮、表单等都可以是一个组件。
✅ 实际例子：
function HelloWorld() {
return <h1>Hello, React!</h1>;
}
这是一个最简单的组件，名字叫 HelloWorld，它的作用就是在页面上显示一行字：“Hello, React!”
3.2 JSX语法
你可能注意到上面代码中的 <h1>Hello, React!</h1>，这并不是 HTML，也不是字符串，而是 JSX 语法。
JSX 是一种类似 HTML 的语法，可以在 JavaScript 文件中直接写标签，React 会识别这些标签并渲染出来。
⚠️ 注意：在 JSX 中不能使用 class 属性，要使用 className。
✅ 示例：
function Button() {
return <button className="my-button">点击我</button>;
}
3.3 状态（State）
状态就是组件内部的数据，可以发生变化。当状态发生变化时，组件会重新渲染。
举个栗子🌰：
- 一个按钮的状态可能是“未点击”或“已点击”
- 一个计数器的状态就是当前数字是多少
✅ 示例：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点我加一</button>
</div>
);
}
这里用了 useState 这个 Hook（钩子函数）来创建状态变量 count，每次点击按钮都会调用 setCount() 更新状态，从而触发页面更新。
3.4 props（属性）
props 就是组件之间的“对话方式”。一个组件可以通过 props 向另一个组件传递数据。
✅ 示例：
function Greeting(props) {
return <h1>你好，{props.name}</h1>;
}
// 使用组件时传入参数
<Greeting name="张三" />
结果就会显示：你好，张三 ✨
新手常问 💬
Q：React 和 Vue 或 Angular 有什么区别？
A：都是前端框架，但 React 更注重灵活和自由，Vue 简单易上手，Angular 更适合大型企业级项目。
Q：React 必须学 JS 才能学吗？
A：是的，React 是基于 JavaScript 的，所以需要掌握 JS 的基础知识。
四、实战项目：做一个任务清单 Todo List
接下来我们一起来做一个非常实用的小项目 —— 任务清单（Todo List），包含添加任务、删除任务的功能。
4.1 项目目标：
我们希望实现如下功能：
- 显示所有待办任务
- 可以输入新任务并提交
- 可以删除某个任务
4.2 修改 App.js 文件
替换 src/App.js 文件的内容如下：
import React, { useState } from 'react';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim() !== '') {
const newTodo = {
id: Date.now(),
text: input
};
setTodos([...todos, newTodo]);
setInput('');
}
};
const deleteTodo = (id) => {
const updatedTodos = todos.filter(todo => todo.id !== id);
setTodos(updatedTodos);
};
return (
<div className="App">
<h1>我的任务清单</h1>
<div>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={addTodo}>添加</button>
</div>
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
<button onClick={() => deleteTodo(todo.id)}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default App;
4.3 添加一点样式（可选）
在 src/App.css 文件中加入以下 CSS 样式：
.App {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input {
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
li {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
保存后回到浏览器，你会发现我们的任务清单已经可以用了！
新手常问 💬
Q：为什么列表中的元素需要一个 key？
A：React 需要一个唯一的 key 来识别每个列表项，这样在更新时才能更高效地操作 DOM。
Q：为什么用 filter 方法来删除任务？
A：因为 React 不允许直接修改状态（state），所以我们通过 filter 生成新的数组，并赋值给 state。
五、常见问题解答
学习过程中总会遇到一些小问题，下面我们总结一些新手最容易踩坑的地方，并给出解决办法。
5.1 页面没有更新？
当你修改了组件的状态但页面没有反应时，请检查：
- 是否正确使用
setState或useState中的设置方法 - 是否忘记在 JSX 中使用状态变量
✅ 正确写法：
const [name, setName] = useState("小明");
setName("小红"); // ✅ 更新方式
❌ 错误写法：
name = "小红"; // ❌ 不会触发更新
5.2 控制台报错 TypeError: Cannot destructure property？
这是因为你尝试从一个 undefined 的对象中取值。
例如：
const [user] = useState();
此时 user 是 undefined，如果你继续调用 user.name 就会出错。
✅ 解决办法：
const [user, setUser] = useState({ name: '' });
5.3 组件无法渲染？
确保你返回的是正确的 JSX 内容，且没有拼写错误：
✅ 正确：
return <div>内容</div>
❌ 错误：
return Div>内容< /Div> // 标签不闭合或大小写错误
六、下一步学习建议
恭喜你完成了第一个 React 项目！你现在已经有了扎实的基础，可以继续深入学习更多知识：
推荐学习路径：
- 学习 React Hooks（钩子函数）
- useState、useEffect、useContext 等基础 Hooks
- 学习组件通信方式
- 子组件向父组件传数据
- Context API、Redux 状态管理
- 了解 React Router
- 多页面跳转、路由配置
- 学习 React 与后端交互
- fetch 请求、Axios、API 调用
- 进阶内容
- 自定义 Hook、组件生命周期、性能优化等
推荐资源：
- 官网：https://react.dev/learn
- 免费课程：freeCodeCamp、YouTube 上的 React 教程
- 书籍：《React学习手册》、《React设计模式与最佳实践》
结语
React 虽然看起来很“高大上”，但它其实非常友好，只要你有耐心、动手去写代码，就能很快上手。
记住一句话：
“编程不是看书学会的，是敲代码练出来的。”
现在就打开你的编辑器，试试写一个属于自己的 React 小项目吧！💡
祝你一路顺风 🚀！
评论 0