React入门教程：从安装到第一个应用
一、什么是React？它能做什么？
React 是一个由 Facebook 开发并维护的前端 JavaScript 库，专门用于构建用户界面（UI）。你可以把它看作是一个“积木盒子”，里面有很多组件（Component），我们可以通过组合这些组件来搭建一个漂亮的网页或 Web 应用。
React 的特点：
- 📌 组件化开发：每个页面都可以拆分成多个小部分，单独开发和管理。
- 📌 声明式编程：你只需告诉 React 要显示什么内容，而不是怎么一步步操作。
- 📌 单向数据流：让状态管理和调试更加简单清晰。
- 📌 支持服务端渲染（SSR）：提高 SEO 和首屏加载速度。
✅ 小结：React 就是一个帮助你快速高效开发现代 Web 应用的“工具包”。
二、环境准备：开始前的基础设置
2.1 安装 Node.js 和 npm
React 项目通常使用 npm（Node.js 的包管理器）来进行依赖管理和打包。所以在开始之前，我们需要先安装好 Node.js。
- 访问 https://nodejs.org
- 点击 LTS 版本进行下载
- 安装完成后，在终端运行以下命令查看版本：
node -v # 查看 node 版本
npm -v # 查看 npm 版本
如果能看到类似 v16.14.2 这样的输出，说明已经安装成功！
2.2 使用 Vite 创建 React 项目
我们推荐新手使用 Vite 来创建 React 项目。相比传统的 Create React App (CRA)，Vite 启动更快、配置更灵活。
步骤如下：
- 在终端中执行以下命令（以项目名为
my-react-app为例）：
npm create vite@latest my-react-app --template react
- 进入项目目录：
cd my-react-app
- 安装依赖：
npm install
- 启动开发服务器：
npm run dev
此时终端会显示一个本地地址（比如 http://localhost:5173），在浏览器中打开即可看到初始页面。
⚠️ 注意：不同机器启动端口可能不同，请根据终端提示访问对应地址。
2.3 编辑器推荐
建议使用 VS Code，它是目前最流行的前端开发编辑器之一，免费且功能强大。
- 下载地址：https://code.visualstudio.com/
- 推荐插件：
- Prettier（格式化代码）
- ES7+ React/Redux/React-Native Snippets（自动补全 React 模板）
三、React 核心概念讲解（零基础也能理解）
学习 React，你至少要了解以下几个关键词：组件、JSX、状态、props、函数组件 vs 类组件。
3.1 组件：React 的最小单位
你可以把组件想象成一个个乐高积木，它们可以独立开发，也可以组合在一起形成完整页面。
示例：定义一个按钮组件
function Button() {
return <button>点我！</button>;
}
然后可以在别的地方调用它：
function App() {
return (
<div>
<h1>欢迎来到我的 React 应用！</h1>
<Button />
</div>
);
}
✅ 小结：组件是 React 最基本的构成单元，用来封装 UI 部分。
3.2 JSX：像 HTML 一样的写法
JSX 是一种混合了 JavaScript 和 HTML 的语法结构，React 就是靠它来描述页面结构的。
比如下面这段代码：
<h1 style={{ color: "red" }}>我是红色标题</h1>
看起来像 HTML，其实是 JavaScript 对象的一种写法。
❗ JSX 必须在 React 项目中使用，并且返回的内容只能有一个顶层标签。
3.3 状态（State）：组件内部的数据
状态就像一个组件的“记忆”，可以让它记住一些信息。
例如：一个点击计数器。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击加一</button>
</div>
);
}
useState 是 React 提供的一个“钩子函数”（Hook），它允许我们在不使用类的情况下使用状态。
✅ 小结：状态是保存在组件内部的数据，可以用
useState来管理。
3.4 Props：组件之间传递数据的方式
有时候你需要把父组件中的数据传递给子组件，这就需要用到 props。
示例：父组件传数据给子组件
function Greeting(props) {
return <h2>你好，{props.name}</h2>;
}
function App() {
return <Greeting name="Tom" />;
}
在这个例子中，name="Tom" 就是通过 props 传递进来的。
✅ 小结：Props 是父子组件之间沟通的桥梁。
3.5 函数组件 vs 类组件（简单介绍）
现在 React 更推荐使用函数组件 + Hook的方式开发，因为：
- 写法更简单
- 可读性更高
- 更容易测试与复用
类组件比较复杂，适合深入学习时再了解。
四、实战项目：做个简单的待办事项应用
目标：做一个可以添加、删除待办事项的简易 Todo List。
4.1 创建组件结构
我们将用到两个主要组件：
App：整个应用的根组件TodoList：显示待办事项列表AddTodo：添加新的待办事项
4.2 添加状态管理
我们用 useState 来管理 todo 列表。
import { useState } from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';
export default function App() {
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
const newTodo = { id: Date.now(), text };
setTodos([...todos, newTodo]);
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div>
<h1>我的待办清单</h1>
<AddTodo onAdd={addTodo} />
<TodoList todos={todos} onDelete={deleteTodo} />
</div>
);
}
4.3 实现 AddTodo 组件
// src/AddTodo.jsx
export default function AddTodo({ onAdd }) {
const handleSubmit = (e) => {
e.preventDefault();
const text = e.target.todo.value;
if (text.trim()) {
onAdd(text);
e.target.reset();
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="todo" placeholder="输入你的任务..." />
<button>添加</button>
</form>
);
}
4.4 实现 TodoList 组件
// src/TodoList.jsx
export default function TodoList({ todos, onDelete }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.text}
<button onClick={() => onDelete(todo.id)}>删除</button>
</li>
))}
</ul>
);
}
4.5 总结一下项目结构
src/
├── App.jsx
├── TodoList.jsx
└── AddTodo.jsx
完成以后运行项目：
npm run dev
访问本地地址就能看到你的第一个 React 应用了！
五、常见问题解答
❓ Q1：React 是不是必须要学 Vue 或 Angular 之前的基础？
不需要。React 是一个独立的库，和其他框架并不冲突。完全可以直接从 React 学起。
❓ Q2：为什么不能直接修改 state？
React 的原则是不可变性（Immutability）。你必须使用 setXXX 方法来更新状态，这样才能保证 React 能正确地识别变化并重新渲染。
❓ Q3：组件名称为什么要大写？
在 JSX 中，小写开头的元素会被当成 HTML 原生标签，比如 <div>、<p>。如果你写的是自定义组件，必须使用大写开头，如 <MyComponent />。
❓ Q4：组件可以没有 return 吗？
不可以。每一个 React 组件都必须返回一段 JSX，或者 null。
六、下一步学习路径建议
恭喜你完成了第一个 React 应用！接下来你可以继续学习以下内容，逐步提升你的 React 水平：
✅ 初级阶段可掌握：
- 熟悉常用的 Hook：
useEffect,useRef,useCallback - 数据请求：配合 Axios 或 fetch 获取远程数据
- 使用 CSS 模块或 Tailwind CSS 设计样式
- 表单处理和验证
✅ 中高级阶段可扩展：
- 使用 React Router 实现页面跳转
- 状态管理：Redux Toolkit / Zustand
- 构建部署流程：Vite + GitHub Pages
- TypeScript 支持（类型检查神器）
✅ 推荐学习资源：
- 官方文档：https://react.dev
- React 教程视频：Bilibili 搜索 “React 入门”
- 书籍推荐：《React 学习手册》《React 精髓》
七、总结
React 是现代 Web 开发中非常重要的一环。虽然一开始可能会有点抽象，但只要你动手实践、不断尝试，你会发现它的逻辑其实很清晰，也非常好上手。
本文带你完成了从环境搭建、核心概念理解到实战项目的全流程，希望你能坚持练习，真正掌握 React！
继续加油，你正在成为优秀的前端开发者！
📌 文章约 2650 字，涵盖理论 + 实践，适合零基础初学者系统学习 React。
评论 0