React 入门教程：从安装到第一个应用
开篇：React 是什么？用来做什么？
你有没有用过像微信小程序、淘宝 APP 或者微博这样的网页或应用？它们看起来界面精美、交互流畅，而这背后可能就用了我们今天要讲的 React。
简单来说，React 是一个由 Facebook（现为 Meta）开发的 JavaScript 库，用于构建用户界面（UI）。你可以把它理解成一套专门帮你“搭建网页”的工具箱，尤其是当你想做一个功能多、响应快、结构清晰的网页时，React 就派上大用场了。
它特别适合用来做：
- 单页应用（SPA），比如管理后台
- 有大量用户交互的网站（如社交平台）
- 需要频繁更新内容的页面
而且，React 非常流行，现在大多数前端项目都在使用它，所以学习 React 对你将来找工作也有很大帮助！
环境准备：从零开始搭建你的开发环境
第一步：安装 Node.js 和 npm
React 应用通常需要借助一些现代化的构建工具，比如 Webpack、Babel 等，而这些工具都需要依赖 Node.js 和它的包管理器 npm（Node Package Manager）。
👉 操作步骤：
- 打开官网 https://nodejs.org
- 下载 "LTS" 版本（长期支持版，更适合新手）
- 安装完成后，打开终端（Windows 是命令提示符 / PowerShell，Mac 是 Terminal），输入以下命令检查是否安装成功：
node -v # 显示版本号，比如 v16.14.2
npm -v # 同样显示版本号
如果都能看到版本号，说明安装成功啦！
第二步：安装 create-react-app 脚手架
为了让你更快地上手写代码，我们可以使用官方推荐的脚手架工具：create-react-app。
它能自动生成一个 React 项目的骨架，省去自己配置各种工具的麻烦。
👉 执行命令安装：
npx create-react-app my-first-react-app
⚠️ 注意：第一次运行这个命令时，它会自动下载必要的包，不需要提前安装，只要确保网络畅通就行。
等待几分钟后，你会看到如下提示：
Success! Created my-first-react-app at ...路径...
Inside that directory, you can run several commands:
npm start Starts the development server.
npm build Bundles the app into static files for production.
npm test Starts the test runner.
npm eject Removes this tool and copies build dependencies, scripts, and configuration into your project.
We suggest that you begin by typing:
cd my-first-react-app
npm start
第三步：运行你的第一个 React 项目
现在你只需要按照提示，进入文件夹并启动开发服务器：
cd my-first-react-app
npm start
稍等几秒钟，浏览器会自动打开一个新页面，默认地址是：
你应该会看到一个带有 React logo 的页面和一些欢迎文字，说明你的 React 应用正在运行！
🎉 恭喜！你已经完成了 React 项目的搭建和运行！
核心概念：理解 React 的几个关键术语
对于刚接触 React 的人来说，下面这几个词听起来可能会有些陌生，别担心，我们用最简单的语言来解释：
1. 组件（Component）
在 React 中，组件就像是一个个小模块。你可以把整个网页拆成多个部分，每个部分就是一个组件。
例如：
- 页面顶部的导航栏是一个组件
- 中间的主内容区域是一个组件
- 页面底部的版权信息也是一个组件
通过组合这些组件，你就能够快速地构建出复杂的页面。
举个例子，我们来写一个最简单的组件：
function Greeting() {
return <h1>Hello, React!</h1>;
}
这个叫 Greeting 的组件会在屏幕上显示一句话：“Hello, React!”
2. JSX（JavaScript XML）
你在上面的例子中看到 <h1>Hello, React!</h1> 这样的语法了吗？这就是 JSX。
JSX 是一种特殊的语法，允许我们在 JavaScript 文件里直接写类似 HTML 的标签。
⚠️ 注意：这不是真正的 HTML，也不是字符串，它是 React 推荐的一种编写方式。它最终会被编译成标准的 JavaScript 函数调用。
3. 状态（State）
状态就是你的应用中的数据，这些数据可能会随着时间改变，从而影响页面的表现。
比如，一个按钮的点击次数，或者一个搜索框里的关键词，都可以称为状态。
React 提供了一个叫做 useState 的“钩子函数”来管理和更新状态：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
这段代码创建了一个计数器组件，点击按钮时计数会增加。
4. Props（属性）
有时候我们需要把数据从一个组件传递给另一个组件，这时候就可以使用 props（属性）。
可以想象 props 就像是传话的小助手。比如我们有一个欢迎组件，可以根据用户名显示不同的欢迎信息：
function Welcome(props) {
return <h1>你好，{props.name}！</h1>;
}
// 使用组件时传入 name 属性
<Welcome name="李明" />
这样就会显示 “你好，李明！”。
5. Hook（钩子函数）
Hook 是 React 16.8 以后新增的一组函数，帮助你更方便地使用状态和其他 React 功能，而不需要写类组件。
前面提到的 useState 就是一个 Hook，还有其他的比如：
useEffect：处理副作用（比如获取数据）useRef：保存引用值useContext：跨层级共享数据
不过作为初学者，先掌握 useState 就足够了。
实战项目：创建属于你的第一个 React 应用
接下来我们要一起完成一个非常简单但完整的项目 —— 待办事项清单（Todo List）。你可以添加、查看、删除你的任务。
第一步：找到 App.jsx 文件
在你的项目目录中，打开 src/App.jsx 文件，里面已经有默认的 React 代码了。
我们将在这个文件里一步一步写出我们的 Todo App。
第二步：显示一个静态的任务列表
修改 App.jsx 内容如下：
function App() {
return (
<div>
<h1>我的待办事项</h1>
<ul>
<li>学习 React 基础知识</li>
<li>练习写一个简单项目</li>
<li>分享学到的内容</li>
</ul>
</div>
);
}
export default App;
保存文件后，回到浏览器刷新页面，你应该能看到一个待办事项列表。
第三步：让任务列表变成动态的
我们现在来把上面的静态列表变成可以从 JS 控制的动态内容。
import { useState } from 'react';
function App() {
const tasks = ['学习 React', '写第一个项目', '分享成果'];
return (
<div>
<h1>我的待办事项</h1>
<ul>
{tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
</div>
);
}
export default App;
这里我们用了数组 map 方法遍历 tasks 数组，并渲染出每一个 li。
第四步：添加任务输入框和按钮
现在我们来加上一个输入框和“添加”按钮。
import { useState } from 'react';
function App() {
const [tasks, setTasks] = useState(['学习 React', '写第一个项目']);
const [newTask, setNewTask] = useState('');
const handleAddTask = () => {
if (newTask.trim() === '') return;
setTasks([...tasks, newTask]);
setNewTask('');
};
return (
<div>
<h1>我的待办事项</h1>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={handleAddTask}>添加</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
</div>
);
}
export default App;
现在你可以输入新的任务并点击“添加”按钮，任务列表就会自动更新。
第五步：添加删除功能
最后，我们给每项任务加一个“删除”按钮：
import { useState } from 'react';
function App() {
const [tasks, setTasks] = useState(['学习 React', '写第一个项目']);
const [newTask, setNewTask] = useState('');
const handleAddTask = () => {
if (newTask.trim() === '') return;
setTasks([...tasks, newTask]);
setNewTask('');
};
const handleDeleteTask = (index) => {
const updatedTasks = tasks.filter((_, i) => i !== index);
setTasks(updatedTasks);
};
return (
<div>
<h1>我的待办事项</h1>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={handleAddTask}>添加</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleDeleteTask(index)}> 删除 </button>
</li>
))}
</ul>
</div>
);
}
export default App;
好了！现在你可以添加任务、展示任务、还能删除任务。
✅ 你已经完成了第一个 React 应用！
新手常见问题解答（FAQ）
Q1：为什么我不能在 <input> 上直接赋值？为什么要用 value 和 onChange？
这是因为在 React 中，输入框的状态是由 React 控制的，这种模式叫做 受控组件（controlled component）。
如果你不使用 value 和 onChange，你将无法准确获取或更新用户的输入内容。
Q2：报错说 key is not unique 怎么回事？
React 要求在循环生成元素时给每个元素加一个唯一的 key。这个 key 一般用 index 就可以，但如果列表会发生变化（比如排序、删除），最好用唯一 ID 更好。
Q3：React 是不是必须学完 HTML 和 JavaScript 才能学？
是的！React 本质还是基于 JavaScript 构建的框架，不了解基础的话会让你很难理解和调试问题。建议先熟练掌握 HTML/CSS/JavaScript 的基础知识再学习 React。
Q4：什么时候用类组件，什么时候用函数组件？
现在 React 推荐使用 函数组件 + Hook，因为它写法更简洁，逻辑也更清晰。类组件已经被逐步淘汰，但仍可在旧项目中见到。
学习建议：下一步该怎么做？
你现在成功入门 React 了，接下来可以往以下几个方向继续深入：
🧑💻 1. 学习更多 React 核心知识
- 使用
useEffect处理生命周期 - 学习使用
context和useContext来共享全局状态 - 理解虚拟 DOM 和 diff 算法的原理
- 使用第三方库如
axios、styled-components等
💡 2. 构建更有挑战的小项目
- 记账 App
- 电影资讯查询系统
- 登录注册系统（配合本地存储或 API）
🌐 3. 进阶学习路线
- 学习路由管理：React Router
- 学习状态管理工具：Redux、MobX、Zustand
- 探索服务端渲染：Next.js
- 研究 TypeScript 在 React 中的应用
总结
恭喜你走完了 React 的第一步！在这篇文章中，我们从最基础的环境搭建讲起，一步步介绍了 React 的核心概念，并亲手完成了一个简单的待办事项应用。
React 看起来复杂，其实只要你一步一步跟着动手练习，你会发现它非常有趣又有用。前端的世界大门已经向你打开了！
继续保持好奇心，动手实践每一个知识点，相信你一定能成为出色的 React 开发者！
🎯 课后作业： 试着在本次项目的 Todo 列表中，加上“标记已完成”功能（比如点击某项任务，将其字体变灰或划掉）。
欢迎在评论区晒出你的实现代码，一起交流进步！🌟
评论 0