React入门教程：从安装到第一个应用
一、开篇：什么是React，它能做什么？
在学习前端开发的过程中，你可能会听到“React”这个名字。那么，React到底是什么呢？
简单来说，React 是一个由 Facebook 开发和维护的前端框架（也可以说是库），它专门用来构建用户界面（UI），尤其是交互性很强的网页应用。
它适合用在哪里？
- 构建现代网页应用（如电商网站、社交平台）
- 单页应用（SPA）：页面切换更快，用户体验更好
- 高频更新的界面：比如聊天应用、实时数据仪表盘等
- 移动端也可以：通过 React Native 可以开发手机App
它的核心思想是“组件化开发”，你可以把整个页面拆分成很多个“零件”，然后一个一个地组装起来。这种开发方式更清晰、更易维护，也更适合团队协作。
二、环境准备：一步步搭建你的React开发环境
第一步：安装Node.js 和 npm
React 的项目创建需要依赖 Node.js 和 npm（Node Package Manager）。
👉 到官网 https://nodejs.org 下载并安装 LTS 版本即可。
安装完成后，在命令行工具中输入：
node -v
npm -v
如果能看到版本号输出，说明安装成功。
第二步：使用 Vite 或 Create React App 创建项目
目前有两种主流的方式可以创建React项目：
- 使用官方推荐的
create-react-app工具（简称 CRA） - 使用轻量快速的
Vite
我们选择更现代化、速度更快的 Vite + React 模板来搭建我们的第一个项目。
✅ 安装步骤（使用Vite）
打开终端，输入以下命令开始创建项目：
npm create vite@latest my-first-react-app --template react
等待片刻后，会提示你选择是否使用 TypeScript，这里我们选 “No”。
进入项目目录，并安装依赖：
cd my-first-react-app
npm install
启动开发服务器：
npm run dev
然后打开浏览器访问：http://localhost:5173
如果你看到 Vite 的欢迎页面，说明开发环境已经搭建成功啦！
三、核心概念：轻松理解React的基本结构与原理
现在我们有了开发环境，接下来我们来看看 React 最基础、最重要的几个概念。
1. 组件（Component）
在 React 中，一切都基于组件。可以把组件看成一个 UI 的“积木块”。
组件分为两种类型：
- 函数组件（Function Component）
- 类组件（Class Component） —— 现在较少使用了
我们先来写一个最简单的函数组件。
function Hello() {
return <h1>你好，React！</h1>;
}
这个组件会在页面上显示一行文字：“你好，React！”。
2. JSX语法：让 HTML 和 JavaScript 共舞
你可能注意到了上面代码中 <h1>你好，React！</h1> 这样的写法。这不是普通的字符串，也不是HTML，而是 JSX语法。
JSX 是 JavaScript XML 的缩写，它允许我们在 JS 文件中像写 HTML 一样写标签结构。
📌 小贴士：
- 所有自定义组件必须以大写字母开头，比如：
Hello - JSX 中的属性要用驼峰命名，例如：
className="title"，而不是原生的class
3. 渲染组件：把组件展示出来
要让组件出现在页面上，我们需要把它渲染出来。通常我们在入口文件中进行渲染操作。
在 Vite 创建的项目中，入口文件通常是 main.jsx（或 .tsx 如果用了TypeScript），内容如下：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
这行 <App /> 表示我们要渲染 App 这个组件到 id 为 root 的 DOM 容器中。
4. 状态（State）：动态变化的数据管理
React 为我们提供了管理状态的机制，叫做 useState Hook。
下面是一个例子：点击按钮改变名字
import { useState } from 'react';
function ChangeName() {
const [name, setName] = useState("小明");
function handleClick() {
setName("小花");
}
return (
<div>
<p>当前名字是：{name}</p>
<button onClick={handleClick}>换名字</button>
</div>
);
}
useState返回一个数组，包含当前值和更新方法setName改变 name 后，React 自动重新渲染组件
5. Props：组件间传递信息
组件之间可以通过 props 传递信息。想象一下，父组件给子组件传话。
// ParentComponent.jsx
function ParentComponent() {
return <ChildComponent message="这是来自父组件的消息" />;
}
// ChildComponent.jsx
function ChildComponent(props) {
return <p>{props.message}</p>;
}
四、实战项目：创建你的第一个React应用——待办事项列表（To-Do List）
让我们动手做一个完整的React小应用，加深理解！
我们将要做的是一个简单的“待办事项”功能：可以添加任务、标记完成、删除任务。
步骤1：创建基础组件结构
先在 App.jsx 中创建一个基础布局：
export default function App() {
return (
<div>
<h1>我的待办清单</h1>
<AddTodoForm />
<TodoList />
</div>
);
}
这里我们用了两个组件：
AddTodoForm用于添加新任务TodoList展示所有任务
步骤2：实现 AddTodoForm 组件
function AddTodoForm({ onAdd }) {
const [text, setText] = useState("");
function handleSubmit(e) {
e.preventDefault();
if (!text.trim()) return;
onAdd(text);
setText("");
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="输入任务内容"
/>
<button type="submit">添加</button>
</form>
);
}
步骤3：实现 TodoList 组件
function TodoList() {
const [todos, setTodos] = useState([]);
function addTodo(text) {
setTodos([...todos, { text, completed: false }]);
}
function toggleComplete(index) {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
}
function deleteTodo(index) {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
}
return (
<ul>
{todos.map((todo, index) => (
<li key={index} style={{ textDecoration: todo.completed ? "line-through" : "" }}>
<span onClick={() => toggleComplete(index)}>{todo.text}</span>
<button onClick={() => deleteTodo(index)}>删除</button>
</li>
))}
<AddTodoForm onAdd={addTodo} />
</ul>
);
}
效果演示
运行项目后，你会看到一个页面，可以：
- 添加新的任务
- 点击任务名称切换完成状态（划掉）
- 删除某个任务
恭喜你，完成了第一个实用的 React 应用！
五、常见问题解答（FAQ）
Q：为什么不能直接修改 state？
A：React 要求你通过 setState 更新状态，这样才能触发组件重新渲染。
Q：为什么每个循环都要加 key 属性？ A：React 需要用 key 来识别每一个列表项，避免错误更新或重排时出错。
Q：可以用 class 写组件吗？ A：可以，不过目前社区更推荐使用函数组件 + Hooks 的方式，代码更简洁清晰。
Q：我应该怎么调试 React 应用？ A：可以使用 React Developer Tools 浏览器插件来检查组件树、state等。
Q：为什么点击按钮没反应？
A：可能是事件未绑定或函数没有被正确调用，请检查 onClick 是否拼写正确，或者函数有没有参数传递错误。
六、学习建议：下一步该学什么？
学完基础之后，你已经可以开始做简单的 React 项目了。以下是几个推荐继续深入的方向：
📚 学习路线图建议：
| 学习模块 | 推荐学习内容 |
|---|---|
| React进阶 | useEffect、useRef、自定义Hooks |
| 路由 | React Router v6 |
| 状态管理 | Context API / Redux Toolkit |
| 表单处理 | Formik、Yup |
| 样式方案 | CSS Modules、Tailwind CSS、styled-components |
| 实战项目 | 博客系统、商城前台、笔记应用等 |
| 测试 | Jest + React Testing Library |
| 性能优化 | memo、lazy、Suspense |
你还可以尝试用 React Native 做跨平台应用，或者配合 GraphQL 做前后端分离。
结语
React 是现代前端开发非常重要的技术栈之一，掌握它将为你打开更多职业发展的机会。
希望这篇入门教程能帮你顺利迈出学习的第一步！记住：多写、多练、不怕错，才是学会编程的关键。
加油，未来的大神正在诞生中🚀！
如果你对后续内容感兴趣，欢迎关注我，我会持续更新系列课程：《React进阶篇》《React项目实战训练营》《从零构建Vue+React双栈前端体系》等等。
Happy Coding!
评论 0