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

开篇：React 是什么，用来做什么？

你好！欢迎来到这篇面向完全零基础新手的 React 入门教程。在我们开始写代码之前，先来了解一下 React 到底是什么。

简单来说：

React 是一个由 Facebook 开发和维护的 JavaScript 库，专门用来构建用户界面（也就是网页上的“看得见摸得着”的部分）。

你可以把它想象成一个拼图游戏中的工具包：React 提供了一些现成的“积木块”，你可以把它们组合起来，快速搭建出复杂的互动页面，比如：

• 社交平台的动态墙（如微博、朋友圈）
• 电商网站的商品展示列表
• 在线文档编辑器
• 实时聊天界面
• ……

而你不需要一次性就掌握所有的内容，只需要一点点学习它的基本“玩法”就可以了。

---

第一步：环境准备 —— 安装 React 开发环境

作为一个新手，你肯定担心：“我要学很多东西才能运行 React 吗？”其实不用！现在我们可以使用一个叫做 Create React App 的工具，它可以帮助我们快速创建一个标准的 React 项目，而且几乎不需要配置。

下面我们就一步一步来设置开发环境吧！

✅ 前提条件

你需要安装以下两个工具：

1. Node.js
2. npm（Node Package Manager）

这两个工具会帮你下载和管理 JavaScript 相关的软件包。

💡 小提示：npm 随 Node.js 一起安装。

如何安装 Node.js：

• 打开 https://nodejs.org
• 点击 LTS 版本 下载（稳定版本推荐新手使用）
• 按照安装向导一步步完成即可

安装完成后，在命令行中输入：

node -v

你应该看到类似这样的输出：

v18.x.x

再输入：

npm -v

应该显示 npm 的版本号，说明安装成功了！

---

🛠️ 创建你的第一个 React 项目

接下来我们要使用 Create React App 这个官方工具来创建我们的项目。

在命令行中运行以下命令（请确保已经连接网络）：

npx create-react-app my-first-app

这个命令的意思是：
“使用 create-react-app 工具创建一个名叫 my-first-app 的项目。”

等待一段时间后（可能几分钟），你会看到如下提示：

We suggest that you begin by typing:

  cd my-first-app
  npm start

恭喜你，项目已经创建成功！

---

▶️ 启动开发服务器

继续在命令行中执行：

cd my-first-app
npm start

这时候浏览器会自动打开一个网页，地址是：

http://localhost:3000

你会看到一个带有 React Logo 的欢迎页面。这说明你的 React 项目已经跑起来了！

🎯 当前效果：你已经在本地建立了一个完整的 React 开发环境，并且看到了初始页面。

---

第二步：理解 React 的核心概念

接下来我们来认识一些 React 中的基础概念。别担心，我会用非常简单的语言解释清楚每一个术语，并配上实例。

---

1. 组件（Component）

React 的核心思想就是组件化开发，你可以把它理解为一个个“小零件”。

就像搭积木一样，我们把整个页面拆分成多个功能明确的小模块，然后分别制作、测试，最后拼在一起。

比如：

• 一个按钮是一个组件
• 一个商品卡片是一个组件
• 一个导航栏是一个组件

实例：定义一个最简单的组件

进入你的项目文件夹：

my-first-app/
└── src/
    └── App.js

找到 App.js 文件，这是你的主组件。

将里面的内容替换为以下代码：

import React from 'react';

function Hello() {
  return <h1>你好，React！</h1>;
}

export default Hello;

保存文件之后，刷新浏览器，你就会看到页面上出现了一句话：“你好，React！” ✅

✅ 知识点总结：

• 使用函数定义一个组件（Hello）
• 返回一个 JSX 内容
• 通过 export default 导出这个组件，这样其他文件可以引用它

---

2. JSX 语法

上面你看到的 <h1>你好，React！</h1> 并不是普通的 HTML，而是 React 的专属语法，叫做 JSX（JavaScript XML）。

简单理解：
JSX 就是可以直接写 HTML 标签的 JavaScript 代码。

比如：

return (
  <div>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个 React 页面</p>
  </div>
);

💡 注意：

• JSX 必须有一个根元素（比如最外层有个 <div> 或者 <>）
• class 要写成 className，因为 class 是 JavaScript 关键字

---

3. Props（属性传值）

组件之间常常需要传递数据。在 React 中，这种“传数据”的方式叫做 props（简写自 properties）。

举个例子，如果我有一个组件叫 Greeting，我希望它能接收名字参数：

function Greeting(props) {
  return <h1>你好，{props.name}！</h1>;
}

然后使用这个组件：

function App() {
  return (
    <div>
      <Greeting name="小明" />
      <Greeting name="小红" />
    </div>
  );
}

渲染结果：

你好，小明！
你好，小红！

👌 总结：

• props 是一个对象，里面包含父组件传递给子组件的数据
• 子组件通过 props.xxx 访问这些值

---

4. State（状态）

State 是组件内部的状态数据。通俗来说，它是组件“自己知道”的数据。

比如一个点击计数器：

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={handleClick}>点我试试</button>
    </div>
  );
}

解释一下：

• useState(0) 初始化一个状态变量 count，默认值是 0
• setCount() 是修改 count 的方法
• 每次点击按钮，count 的值都会更新，并触发重新渲染

🧠 类比：state 就像组件的“记事本”，它可以记住一些临时的信息

---

5. 事件处理（Event Handling）

前面的按钮我们用了 onClick，这就是 React 中常见的事件处理方式。

除了点击事件，还有：

事件类型	对应的事件名
鼠标点击	onClick
输入框变化	onChange
表单提交	onSubmit
鼠标移入/移出	onMouseEnter / onMouseLeave

例如，监听输入框的变化：

function InputBox() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>你输入的是：{value}</p>
    </div>
  );
}

---

第三步：实战项目 —— 创建一个待办事项应用（To-Do List）

现在我们已经了解了 React 的基础知识。接下来，我们将动手做一个完整的小项目：待办事项清单（To-Do List）。

这个项目将帮助你巩固：

• 组件划分
• state 状态管理
• 表单提交
• 动态渲染列表

---

项目目标：

创建一个简单的任务清单：

1. 输入新任务并添加
2. 显示所有任务
3. 可以标记任务为“已完成”

---

一、项目结构设计

我们可以把项目分成以下几个部分：

• 主组件：TodoApp
• 输入组件：AddTodo
• 列表组件：TodoList
• 每项任务组件：TodoItem

---

二、编写代码

1. 添加任务的功能

修改 src/App.js：

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

function AddTodo({ onAdd }) {
  const [text, setText] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    if (text.trim()) {
      onAdd(text);
      setText('');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="添加新任务..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">添加</button>
    </form>
  );
}

2. 展示任务列表

继续在同一个文件中添加：

function TodoItem({ text, completed, onToggle }) {
  return (
    <li style={{ textDecoration: completed ? 'line-through' : 'none' }} onClick={onToggle}>
      {text}
    </li>
  );
}

function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem
          key={index}
          text={todo.text}
          completed={todo.completed}
          onToggle={() => onToggle(index)}
        />
      ))}
    </ul>
  );
}

3. 把所有组件组织起来

function TodoApp() {
  const [todos, setTodos] = useState([]);

  function addTodo(text) {
    setTodos([...todos, { text, completed: false }]);
  }

  function toggleTodo(index) {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  }

  return (
    <div>
      <h1>待办事项清单</h1>
      <AddTodo onAdd={addTodo} />
      <TodoList todos={todos} onToggle={toggleTodo} />
    </div>
  );
}

export default TodoApp;

---

三、运行项目

保存文件，回到终端看看有没有报错。如果没有问题，浏览器应该会自动刷新，显示如下内容：

待办事项清单

[输入框] [添加按钮]

（下方会列出你添加的任务）

每添加一个任务，列表就会更新；点击某一项任务，就可以切换“完成”状态！

🎉 恭喜你完成了你的第一个 React 项目！

---

第四步：常见问题解答（FAQ）

刚上手 React 的朋友常遇到的问题有哪些呢？下面是几个高频提问及答案👇

---

Q1：什么是虚拟 DOM？

A1：
虚拟 DOM 是 React 的一大特点。它并不是真正的网页元素，而是 JavaScript 对象的一种“快照”。当数据变化时，React 会对比虚拟 DOM 和真实 DOM 的差异，只更新必要的部分，从而提高性能。

---

Q2：为什么不能直接修改 state？

A2：
React 不允许你直接修改 state，因为这样会导致 UI 不同步。你要通过 setState 或 useState 提供的方法来更新状态，React 才会知道去刷新页面。

---

Q3：组件里为什么要有 key 属性？

A3：
当你渲染一个列表的时候（比如 todo 列表），React 需要一个唯一标识符（key）来识别每个元素。key 越准确，React 渲染效率越高。

---

Q4：找不到 react 包怎么办？

A4：
确认你是否运行过 npm install react react-dom
或者删除 node_modules 和 package-lock.json 后重新运行 npm install

---

Q5：为什么页面不更新？

A5：
可能的原因包括：

• 没有正确地更新 state（如用了 push 代替生成新数组）
• 事件绑定出错了（如未加 event.preventDefault()）
• key 设置错误导致重复组件无法更新

---

第五步：下一步学习建议

恭喜你已经走完了 React 的第一步！但 React 还有很多有意思的内容可以探索，下面是一些推荐的学习路径：

---

🔹 基础进阶

• 条件渲染（if...else，&& 运算符）
• 列表遍历（map 函数）
• 样式控制（内联样式 vs CSS 类名）
• 生命周期（useEffect）
• 表单处理（受控组件 vs 非受控组件）

---

🔹 React 高级概念

• Hook：useState、useEffect、useRef
• Context API：全局状态共享
• 自定义 Hook：提升复用性
• React Router：实现多页面跳转
• Redux（可选）：集中管理大型项目的 state

---

🔹 推荐练习项目

你可以尝试做这些项目来巩固知识：

1. 天气预报应用
2. 博客系统（展示文章+评论）
3. 用户注册登录系统
4. 图书管理系统
5. 计时器 / 倒计时

---

🔹 推荐学习资源

• React 官方中文文档：https://zh-hans.reactjs.org
• React 教程视频（B站搜索“React 新手入门”）
• LeetCode / CodeSandbox 上练手小项目
• 交流社区：掘金、知乎、Stack Overflow

---

结语

至此，你已经：

✅ 安装好了 React 开发环境
✅ 编写了自己的第一个 React 组件
✅ 掌握了 React 的五大基础概念
✅ 完成了一个完整的实战项目
✅ 解决了常见问题
✅ 得到了未来学习方向

坚持走下去，你会发现 React 是一个非常有趣又实用的前端工具！

如果你觉得这篇教程对你有帮助，别忘了点赞、收藏、分享给更多想要学习的朋友！

祝你编程快乐，早日成为 React 大牛 😎！

---

📅 文章总字数：约 3650 字
📝 配套代码可在 GitHub 找到或自行实践
🎯 适合人群：前端零基础或 HTML/CSS/JS 入门者