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

开篇：React是什么？它能用来做什么？

在前端开发领域，React 是目前最流行的 JavaScript 库之一。它由 Facebook 团队开发和维护，被广泛用于构建用户界面，尤其是单页应用程序（SPA）。

简单地说，React 的作用是帮助我们更容易地创建交互式、动态的网页内容。比如你可能使用过的一些热门网站——如Facebook、Instagram、Netflix 等，它们的部分功能就用到了 React。

为什么选择 React 学习？

• 学习曲线相对平缓：对于初学者来说，React 相对容易上手。
• 组件化开发思想：让你可以把页面拆分成小块来分别开发，提升效率。
• 庞大的社区支持：遇到问题可以轻松找到答案。
• 就业需求大：掌握 React 可以打开很多前端岗位的大门。

接下来，我们就一步步带你从零开始学 React！

---

第一步：环境准备 —— 搭建你的开发环境

要开始写 React 应用，我们需要做一些基础的准备工作。这包括：

1. 安装 Node.js 和 npm
2. 安装 VS Code（推荐编辑器）
3. 使用 create-react-app 创建项目

1. 安装 Node.js 和 npm

React 应用通常依赖于 Node.js 和 npm（Node Package Manager）来运行和管理项目。

👉 去官网下载并安装：https://nodejs.org

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

node -v
npm -v

如果看到类似这样的版本号输出，说明安装成功了！

2. 安装 VS Code（或你喜欢的编辑器）

VS Code 是一个免费、强大的代码编辑器，非常适合前端开发。

👉 下载地址：https://code.visualstudio.com/

安装完成后打开它，我们就准备好了编写代码的环境。

3. 创建第一个 React 项目

我们将使用官方提供的工具 Create React App 来快速搭建一个 React 项目。

在终端中执行以下命令（假设你想把项目放在桌面）：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

等待几秒钟，浏览器会自动打开一个页面，默认显示的是 React 的欢迎页面。

🎉 恭喜你！你的第一个 React 项目已经跑起来了！

---

第二步：核心概念讲解（通俗易懂）

React 的核心并不复杂，但它有一些新概念需要你理解。我们会用尽可能简单的语言和例子来解释这些概念。

1. JSX 是什么？

在 React 中，我们经常看到像下面这样的代码：

const element = <h1>Hello, world!</h1>;

看起来有点像 HTML？但其实它是 JSX，是一种 JavaScript 的扩展语法。

✅ JSX 让我们在 JS 文件中写 HTML 风格的代码。

React 最终会把这些 JSX 转换成标准的 JavaScript 对象。

2. 组件（Component）

React 的核心理念是“一切皆组件”。你可以把整个网页看成是由一个个小部件（组件）拼起来的。

组件分为两种：

• 类组件（Class Component）
• 函数组件（Function Component）

我们现在主要使用的是 函数组件，因为更简单。

示例：定义一个函数组件

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

然后你可以在别的组件里这样使用它：

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

✅ 组件就像积木一样，可以重复使用。

3. props（属性）

组件之间可以通过 props 传递数据。比如：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

使用方式如下：

function App() {
  return (
    <div>
      <Greeting name="Tom" />
      <Greeting name="Jerry" />
    </div>
  );
}

上面的例子会在页面上显示两个问候语：

• Hello, Tom!
• Hello, Jerry!

✅ props 就像参数，可以传给组件一些信息。

4. 状态（State）

有时候，我们的组件内部需要保存一些自己的数据，比如按钮的状态、输入框的内容等。这时就要用到 state（状态）。

我们可以用 React 提供的 useState 这个 Hook 来创建状态。

示例：计数器组件

import React, { useState } from 'react';

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

  return (
    <div>
      <p>当前数字是：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击加一</button>
    </div>
  );
}

每次点击按钮，数字就会更新。

✅ state 是组件自己维护的数据，可以随时间改变。

---

第三步：实战项目 —— 构建一个待办事项应用（Todo App）

现在让我们动手做一个完整的 React 小项目吧！这是一个待办事项应用（Todo List）。

Step 1：创建项目

如果你之前没创建好项目，请运行：

npx create-react-app todo-app
cd todo-app
npm start

然后，打开 src/App.js，清空里面的内容，准备写我们的代码。

Step 2：写出基本结构

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>我的待办事项</h1>
    </div>
  );
}

export default App;

Step 3：添加输入框与按钮

function App() {
  const [input, setInput] = React.useState('');

  function handleInputChange(e) {
    setInput(e.target.value);
  }

  return (
    <div className="App">
      <h1>我的待办事项</h1>
      <input value={input} onChange={handleInputChange} placeholder="添加新任务" />
      <button>添加</button>
    </div>
  );
}

这段代码实现了：

• 输入框绑定状态 input
• 按钮占位符

Step 4：添加列表功能

function App() {
  const [input, setInput] = React.useState('');
  const [todos, setTodos] = React.useState([]);

  function handleInputChange(e) {
    setInput(e.target.value);
  }

  function handleAddClick() {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  }

  return (
    <div className="App">
      <h1>我的待办事项</h1>
      <input value={input} onChange={handleInputChange} placeholder="添加新任务" />
      <button onClick={handleAddClick}>添加</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

现在你应该可以看到：

• 可以输入文字
• 点击“添加”后，会出现在下方列表中

恭喜！你完成了一个最基本的 Todo App！

---

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

作为新手，你在学习过程中可能会遇到一些常见的坑。下面是几个典型问题与解决方法：

Q1：为什么控制台报错说不能在函数组件外使用 Hooks？

❗你可能错误地在顶层或类组件之外调用了 useState 或其他 Hook。

✅ 正确做法：只在函数组件或者自定义 Hook 中调用 Hooks。

---

Q2：组件没有重新渲染怎么办？

❗你直接修改了 state 的值，而不是使用 setXXX() 函数。

✅ 正确做法：永远使用设置函数来更新状态，例如：

setTodos([...newArray]); // ✔ 正确
todos.push(newItem);     // ❌ 错误

---

Q3：导入组件后不显示怎么办？

❗可能是没有导出或导入路径写错了。

✅ 检查：

• 是否导出组件：export default
• 是否正确导入：import MyComponent from './MyComponent'

---

Q4：JSX 报错或样式不生效怎么办？

❗注意标签是否正确闭合，CSS 类名是否正确使用。

✅ 特别注意：

• 所有标签必须闭合（如 <img />）
• 类名要用 className 而不是 class
• 内联样式需要用对象写法：style={{ color: 'red' }}

---

第五步：下一步的学习建议

你现在已经了解了 React 的基本概念，并完成了第一个应用。接下来你可以沿着以下几个方向继续学习：

推荐学习路线图：

1. 📘 组件通信（父子组件如何传值）
2. 🔁 React 生命周期（组件如何加载和卸载）
3. 💾 React Context（跨组件共享状态）
4. 🧠 React Hooks（更多高级 Hook 如 useEffect、useReducer）
5. 🛠️ 状态管理（Redux、Zustand 等）
6. 🖼️ UI 组件库（Ant Design、Material UI）
7. 🚀 部署上线（部署 React 到 GitHub Pages、Netlify）
8. 🧪 测试（Jest + Testing Library）

---

结语

通过本篇教程，你现在应该对 React 有了一个初步的认识，并能够独立创建一个基础的 React 应用。

记住一句话：“编程是练出来的，不是看出来的。”

多写代码，多练习，你也会很快成长为一名优秀的前端开发者！

---

🔚 教程结束！有任何疑问，欢迎留言交流 😊