React入门教程：从安装到第一个应用
🌟 开篇：React 是什么？它能做什么？
你有没有想过，为什么有些网页看起来那么酷、那么智能、那么流畅？
像 Facebook、Instagram、Airbnb 这些我们每天都用的网站，其实背后都离不开一个强大的前端框架 —— React。
什么是 React？
React 是由 Facebook 团队开发并维护的一个前端 JavaScript 库，专门用于构建用户界面（UI）。你可以把它想象成一套“乐高积木”，帮助开发者快速搭建复杂又漂亮的网页。
✅ 通俗理解：React 让你更容易地把网页拆分成小块，单独管理，然后拼接起来。
React 能做什么？
- 构建单页应用（SPA）
- 实现交互式界面（比如点击按钮弹出菜单、输入内容实时显示等）
- 管理页面状态和数据流动
- 高性能，适合大型项目
- 支持服务端渲染（SSR）、移动端（React Native）
如果你的目标是成为一名前端工程师，或者想做自己的网页项目，那 React 就是你必须掌握的工具之一。
🧰 环境准备：搭建你的第一个 React 开发环境
在正式学习 React 之前，我们需要先准备好开发环境。这里我们会一步步带你完成安装和配置，不需要你懂太多命令行操作。
所需工具：
| 工具 | 作用 |
|---|---|
| Node.js | 提供运行 JavaScript 的环境 |
| npm / yarn / pnpm | 包管理器，用来安装依赖 |
| VS Code | 推荐使用的代码编辑器 |
| React Developer Tools（可选） | 浏览器插件，用于调试 React 组件 |
步骤1：安装 Node.js 和 npm
👉 官网下载地址
- 推荐下载 LTS 版本（稳定版）
- 安装时使用默认设置即可
安装完成后，在终端（Windows 使用 cmd，Mac 使用 终端）运行：
node -v
npm -v
如果能看到版本号（如 v20.x.x），说明安装成功！
步骤2：创建你的第一个 React 应用
我们可以使用官方推荐的工具：Create React App（简称 CRA），它可以自动帮你生成 React 应用的基础结构。
安装 Create React App：
npx create-react-app my-first-app
⚠️ 解释一下：npx 是 npm 的一个命令工具，用来执行包命令。上面这句的意思是：“运行一次 create-react-app，并创建名为 my-first-app 的项目”。
这个过程可能需要几分钟，取决于网络速度。完成后进入项目目录：
cd my-first-app
启动开发服务器：
npm start
稍等片刻，浏览器会自动打开，访问 http://localhost:3000，你应该会看到如下画面：
恭喜！你的第一个 React 应用已经运行起来了！
🧠 核心概念：React 初学者必须了解的几个关键词
1. JSX：像写 HTML 一样的语法扩展
你可能会问：“React 里怎么写 HTML？”
答案是：JSX。它是 JavaScript 的一种语法扩展，让你可以在 JS 中直接写类似 HTML 的结构。
const element = <h1>Hello, world!</h1>;
虽然长得像 HTML，但它其实是在 JavaScript 中写的，所以被称为 JSX。
💡 注意：JSX 不是必须的，但它非常方便，React 官方也强烈推荐使用。
2. 组件（Component）：React 的基本单位
React 的核心思想就是：一切皆组件。你可以把网页的每个部分都看作是一个组件，比如一个按钮、一个导航条、一个登录表单等等。
组件示例：定义一个简单的函数组件
function Welcome() {
return <h1>Hello from the Welcome component!</h1>;
}
如何使用组件
在 src/index.js 中修改：
import React from 'react';
import ReactDOM from 'react-dom/client';
function Welcome() {
return <h1>Hello from the Welcome component!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Welcome />);
保存后刷新页面，你会看到新的文字出现。
3. props：向组件传递参数
想象一下：你想给组件传递一些信息，比如用户名。
可以通过 props 实现：
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
root.render(<Greeting name="Alice" />);
输出结果：Hello, Alice!
💬 通俗解释：props 就像是你给组件写的小纸条，告诉它要显示什么内容。
4. 状态（state）：让组件记住一些数据
组件有时候需要记住一些东西，比如计数器的当前数值，这时候就要用到 useState。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 初始化 count 为 0
return (
<div>
<p>点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>点击我</button>
</div>
);
}
当用户点击按钮时，count 值就会更新，页面也会重新显示新的值。
💻 实战项目：做一个简单的待办事项（Todo）应用
现在我们来一起动手，做一个可以添加和删除待办事项的小应用。这是很多初学者的第一个实战项目，非常适合练手。
第一步：初始化组件结构
在 src/App.js 中，我们先创建一个基本结构：
import React from 'react';
function TodoApp() {
return (
<div>
<h1>我的待办清单</h1>
<ul>
<li>买菜</li>
<li>洗衣服</li>
</ul>
</div>
);
}
export default TodoApp;
然后在 src/index.js 中调用它：
import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoApp from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TodoApp />);
刷新页面，你会看到两个待办事项。
第二步：使用 state 来动态管理待办事项
我们将使用 useState 来管理待办事项列表：
import React, { useState } from 'react';
function TodoApp() {
const [todos, setTodos] = useState(['买菜', '洗衣服']);
return (
<div>
<h1>我的待办清单</h1>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
这里的 .map() 方法相当于对数组中的每一项进行处理，返回一个新的元素列表。
第三步：添加新任务功能
我们加一个输入框和一个按钮，实现新增功能：
import React, { useState } from 'react';
function TodoApp() {
const [todos, setTodos] = useState(['买菜', '洗衣服']);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim() !== '') {
setTodos([...todos, input]);
setInput('');
}
};
return (
<div>
<h1>我的待办清单</h1>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={addTodo}>添加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
效果：输入内容 → 点击“添加” → 待办事项就增加了！
第四步：删除任务功能
再增加一个删除按钮：
function TodoApp() {
const [todos, setTodos] = useState(['买菜', '洗衣服']);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim() !== '') {
setTodos([...todos, input]);
setInput('');
}
};
const deleteTodo = (index) => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
return (
<div>
<h1>我的待办清单</h1>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="输入新任务"
/>
<button onClick={addTodo}>添加</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => deleteTodo(index)}>删除</button>
</li>
))}
</ul>
</div>
);
}
现在你不仅可以添加任务，还可以点击删除按钮来移除它啦！
❓常见问题解答
Q1：React 报错：“TypeError: Cannot read property ‘map’ of undefined”
这是因为你在 todos.map(...) 之前没有给 todos 设置初始值。请确保：
const [todos, setTodos] = useState([]);
Q2：新增内容后输入框没有清空怎么办？
检查是否设置了 setInput('')，并确认 onChange 是否正确绑定到 input。
Q3：为什么每项都要有 key？
key 是 React 在渲染列表时用来区分每一个元素的唯一标识符。没有 key 可能会导致渲染异常或性能问题。
🚀 学习建议：下一步该学什么？
恭喜你完成了第一个 React 应用！接下来你可能想继续深入的方向包括：
🔹 进阶知识：
- React Hooks（useState、useEffect、useContext 等）
- React Router（实现多个页面之间的跳转）
- Redux / MobX（状态管理）
- React 组件生命周期（class 组件 vs 函数组件）
🔹 工程化：
- 了解 Webpack / Vite 等构建工具
- 掌握 React 开发规范（ESLint、Prettier）
- 接口调用（fetch / axios）
- 单元测试（Jest + React Testing Library）
🔹 进阶项目：
- 写一个记账本（涉及本地存储）
- 博客系统（配合后端 API）
- 天气预报小程序（API 请求）
- 图书管理系统（结合数据库）
📝 总结
在这篇《React 入门教程》中，我们完成了以下任务：
✅ 安装了 Node.js 和 React 开发环境
✅ 了解了 JSX、组件、props、state 这些核心概念
✅ 动手写了一个简单的待办事项应用
✅ 解答了一些常见问题
✅ 给出了下一步的学习方向
React 是一个强大的工具，但并不难上手。只要你跟着实践，不断练习，就能很快掌握它。
📌 如果你觉得自己跟得上节奏，请尝试自己改写这个 Todo 应用，比如加上标记完成、搜索过滤等功能。别忘了在评论区分享你的成果哦！
祝你学习愉快，成为 React 小能手！🌟
评论 0