React入门教程：从安装到第一个应用

---

一、什么是React？它能用来做什么？

React 是一个由 Facebook 开发并维护的 JavaScript 库，专门用于构建用户界面（也就是网页中最直观的部分，比如按钮、输入框、导航栏等）。

你可能会问：“那我用 HTML 和 CSS 不就可以做出网页了吗？”没错，HTML 和 CSS 确实能让我们创建静态页面。但当我们想要制作更复杂、更动态的网页时（例如社交软件、电商平台、在线办公系统等），直接使用传统方式就会变得非常复杂和难以维护。

而 React 的出现就是为了解决这个问题。它的核心思想是：

把复杂的界面拆分成一个个小模块（称为组件）来开发，每个部分都能独立更新、复用和测试。

这样做的好处是：

• 代码结构清晰
• 开发效率高
• 易于团队协作
• 更容易维护与升级

简单来说，React 就是一个帮你更好更快地开发交互式网页的强大工具。

---

二、环境准备：搭建你的第一个 React 开发环境

在开始编写 React 代码之前，我们需要准备好开发环境。

步骤1：安装 Node.js 和 npm

React 项目通常依赖于 Node.js 来运行。Node.js 是一个 JavaScript 的运行环境，npm 则是它的包管理器，我们以后会经常用它来安装各种库。

下载地址：

👉 https://nodejs.org/

下载“LTS”版本（稳定版），然后一步步安装即可。

安装完成后，在命令行中分别输入以下两个命令查看是否安装成功：

node -v   # 查看 node 版本
npm -v    # 查看 npm 版本

如果显示了类似 v18.17.1 的信息，说明已经安装成功。

---

步骤2：创建第一个 React 项目

现在我们要用一个叫 create-react-app 的工具来快速创建一个 React 项目。

执行以下命令安装这个工具（也可以不全局安装，不过为了方便我们先这么做）：

npm install -g create-react-app

接下来我们创建项目：

npx create-react-app my-first-app

这里 my-first-app 是我们项目的名称，你可以根据喜好改名字。

等待安装完成后，进入项目目录并启动开发服务器：

cd my-first-app
npm start

这时浏览器会自动打开一个默认页面，显示 “Welcome to React”，恭喜你，React 环境已经搭建完成！

---

三、React 核心概念：通俗易懂的讲解

在真正写代码之前，我们先来认识几个 React 中最关键的概念。

1. 组件（Component）

你可以把组件理解成 网页上的一个模块或部件。比如一个按钮、一个导航条、一个表单、甚至整个页面都可以是一个组件。

React 的一大优势就是可以将这些组件组合起来，像搭积木一样构建整个网站。

组件有两种形式：

• 函数组件（推荐初学者使用）
• 类组件（稍复杂，进阶阶段学习）

我们来看一个简单的函数组件例子：

function Welcome() {
  return <h1>Hello, I'm a React Component!</h1>;
}

这就是一个组件，它返回了一个标题 <h1>。

---

2. JSX：一种写法

上面例子中 <h1>Hello...</h1> 这种写法看起来像是 HTML，但它其实是 JSX（JavaScript XML），这是 React 提供的一种语法扩展。

虽然本质上仍然是 JavaScript，但用 JSX 可以让组件结构更直观、更接近 HTML。

注意：在 JSX 中可以直接嵌入变量、表达式、函数调用等内容。

例如：

function Greeting() {
  const name = "Tom";
  return <h2>Hello, {name}!</h2>;
}

上面的例子中，我们在 JSX 中插入了 {name}，结果将是：

<h2>Hello, Tom!</h2>

---

3. 状态（State）

状态（state）就像是组件的大脑，它保存了当前组件的数据，并且数据一旦变化，组件也会重新渲染。

举个例子：点击一个按钮后数字加一。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

解释：

• useState(0) 表示定义一个状态变量，默认值是 0
• setCount(count + 1) 是修改状态的方法
• 当状态变化后，组件会自动刷新画面

---

4. props：组件之间传数据

如果我们想让某个组件接收外部传递过来的信息，可以用 props。

例如父组件向子组件传递数据：

function Child(props) {
  return <p>{props.message}</p>;
}

function Parent() {
  return <Child message="Hello from parent!" />;
}

在这个例子里，Child 接收到了来自 Parent 的 message，并显示出来。

---

四、实战项目：做一个待办事项列表（To-Do List）

接下来我们将动手做一个完整的 React 小项目 —— 待办事项列表（To-Do List）。

目标功能：

• 输入新任务内容
• 添加新任务
• 展示任务列表
• 删除某项任务

第一步：创建项目并替换 App.js 文件

继续使用之前的项目 my-first-app，找到 /src/App.js 文件，将里面的内容全部删除，替换为我们自己的代码。

// src/App.js
import React, { useState } from 'react';
import './App.css';

function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim()) {
      const newTask = {
        id: Date.now(),
        text: task,
        completed: false
      };
      setTasks([...tasks, newTask]);
      setTask(''); // 清空输入框
    }
  };

  const deleteTask = (id) => {
    const filteredTasks = tasks.filter(task => task.id !== id);
    setTasks(filteredTasks);
  };

  return (
    <div className="App">
      <h1>我的待办清单</h1>
      <input
        type="text"
        placeholder="输入新任务..."
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button onClick={addTask}>添加任务</button>

      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            <span>{task.text}</span>
            <button onClick={() => deleteTask(task.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

第二步：美化一下样式（可选）

修改 /src/App.css 文件内容如下：

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 500px;
  margin: auto;
}

input[type='text'] {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  font-size: 16px;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

---

第三步：运行项目

保存所有文件后，回到终端运行：

npm start

访问 http://localhost:3000，你应该就能看到一个可以添加和删除任务的小程序啦！

---

五、常见问题解答

以下是一些新手朋友经常会遇到的问题和对应的解决办法。

Q1：为什么我不能在 JSX 中写 HTML 注释？

A：React 使用 JSX 写法，在其中无法直接使用 HTML 风格的注释 <!-- ... -->。如果你想在组件里添加注释，应该用 JavaScript 的注释风格：

{/* 这是一个 JSX 注释 */}

---

Q2：报错 “TypeError: Cannot read property ‘map’ of undefined” 是什么意思？

A：这通常表示你在用 .map() 遍历的时候，这个变量还没有被赋值（可能是 null 或 undefined）。建议检查初始状态是否正确设置，以及数据是否成功加载。

例如：

const [list, setList] = useState([]); // 正确初始化为空数组

---

Q3：为什么我的组件没有重新渲染？

A：在 React 中，只有当 state 发生变化时才会触发组件重新渲染。确保你使用了正确的状态管理方法（如 useState）、并且是通过更新函数（如 setCount）来改变状态。

错误示范（请勿模仿）：

count = count + 1; // ❌ 错误！这不会触发组件更新

正确做法：

setCount(count + 1); // ✅ 正确！

---

Q4：能不能多个组件共用一个 state？

A：当然可以，但需要把 state 放在它们共同的父级组件中，并通过 props 把 state 和修改方法共享给子组件。

---

六、学习建议：下一步该怎么做？

掌握了基础之后，你可以朝着以下几个方向继续深入学习：

✅ 建议1：掌握更多组件生命周期与 Hooks

React 16.8 之后引入了 Hook，极大简化了类组件时代的复杂逻辑。重点掌握：

• useState
• useEffect
• useContext
• 自定义 Hook

✅ 建议2：学习路由（React Router）

如果你要构建一个有多页内容的 Web 应用（比如首页、详情页、登录页等），就要学会使用 React Router。

官方文档：https://reactrouter.com/

✅ 建议3：尝试用 Redux / Zustand 等状态管理工具

当你构建的项目越来越复杂时，使用 React 自带的状态管理可能不够用了。可以学习：

• Redux（经典的 Flux 架构）
• Zustand（轻量高效的替代方案）

✅ 建议4：学习 TypeScript

TypeScript 是 JavaScript 的超集，提供类型检查机制，让代码更安全、更容易维护。很多公司都要求 React 工程师掌握 TypeScript。

---

总结

在这篇《React入门教程》中，我们从零开始介绍了：

• React 是什么，有什么作用；
• 如何搭建开发环境；
• 重要概念如组件、状态、props；
• 实战做了一个 To-Do List 应用；
• 新手常见问题及解决办法；
• 后续学习路径建议。

只要你跟着步骤多练习几遍，相信很快就能上手 React，并开发出属于你自己的网页应用。

💬 温馨提示：编程最重要的不是记住了多少语法，而是动手实践、不断试错。加油，前端世界等你来探索！