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

大家好，我是技术团队的培训负责人，过去五年带过上百位应届生进入前端开发领域。很多同学在刚接触 React 时都感到“门槛高”、“看不懂”，其实 React 并没有想象中那么难。我当初学的时候，也是一步步从零开始，踩过不少坑。今天这篇教程，就是专门为完全零基础的同学准备的——不需要你懂任何前端知识，只要会用电脑、能上网，就能跟着做出来你的第一个 React 应用。

---

一、React 是什么？为什么我们要学它？

React 是由 Facebook（现 Meta）开发的一个 前端 JavaScript 框架，专门用来构建用户界面（比如网页上的按钮、表单、列表等）。它的最大特点是“组件化”——把页面拆成一个个小积木，每个积木可以独立开发、重复使用。

举个例子：你在淘宝看到的商品列表、购物车、搜索框，其实都可以看作一个个 React 组件。这样开发起来更清晰、维护也更容易。

📌 小贴士：虽然本教程聚焦前端，但实际工作中，前端（React）经常要和后端（比如 SpringBoot）配合。后端负责处理数据和业务逻辑，前端负责展示数据。我们也会简单提一下它们怎么协作。

---

二、环境准备：5 分钟搭建开发环境

1. 安装 Node.js

React 需要 Node.js 环境来运行开发工具。
✅ 步骤：

1. 打开 https://nodejs.org
2. 下载 LTS 版本（长期支持版，最稳定）
3. 安装时一路“下一步”即可

安装完成后，打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：

node -v
npm -v

如果看到类似 v18.17.0 和 9.6.7 的版本号，说明安装成功！

2. 创建你的第一个 React 项目

我们使用官方推荐的工具 create-react-app（简称 CRA）来快速搭建项目。

在终端中执行：

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

💡 解释：

• npx：临时下载并运行一个工具（不用全局安装）
• my-first-react-app：你的项目文件夹名字，可自定义
• npm start：启动开发服务器

几秒钟后，浏览器会自动打开 http://localhost:3000，你会看到一个旋转的 React Logo —— 恭喜！你已经成功跑起第一个 React 应用了！

---

三、核心概念：用最简单的语言讲清楚

1. 组件（Component）

React 的核心是“组件”。你可以把它想象成一个函数，输入一些数据，输出一段 HTML。

// src/App.js
function Welcome() {
  return <h1>你好，React 新手！</h1>;
}

export default Welcome;

注意：文件扩展名是 .js，但里面写的是 JSX（JavaScript + XML 的混合语法），React 允许我们在 JS 里直接写类似 HTML 的代码。

2. Props（属性）

组件之间如何传递数据？靠 props。

// Parent.js
function App() {
  return <Welcome name="小明" />;
}

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

这里 name="小明" 就是传给 Welcome 组件的 prop。

3. State（状态）

如果想让页面动起来（比如点击按钮改变文字），就需要 状态（State）。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 声明一个叫 count 的状态，默认值是 0

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我加 1
      </button>
    </div>
  );
}

✨ 关键点：useState 是 React 提供的“钩子”（Hook），用来管理组件内部的数据变化。

---

四、实战：做一个简单的待办事项（Todo List）

现在，我们把这些知识串起来，做一个超简版的 Todo 应用。

步骤 1：修改 src/App.js

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

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

  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, input]);
      setInput(''); // 清空输入框
    }
  };

  return (
    <div className="App">
      <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>
  );
}

export default App;

步骤 2：保存并查看效果

回到浏览器，你应该能看到一个输入框和按钮。输入内容后点击“添加”，任务就会出现在下方列表中！

🔍 技术细节：

• value={input}：让输入框受控于 state
• onChange：监听用户输入
• key={index}：React 要求列表项必须有唯一 key（实际项目中建议用 ID）

---

五、与后端（SpringBoot）和 GitHub 的关系

你可能会问：这个 Todo 列表数据存在哪里？关掉页面就没了！

没错，当前数据只存在浏览器内存中。真实项目中，我们会把数据存到后端数据库里。

• 后端（如 SpringBoot）：提供 API 接口，比如 POST /api/todos 添加任务，GET /api/todos 获取任务列表。
• 前端（React）：通过 fetch 或 axios 调用这些接口，实现数据持久化。

例如：

// 从 SpringBoot 后端获取数据
useEffect(() => {
  fetch('http://localhost:8080/api/todos')
    .then(res => res.json())
    .then(data => setTodos(data));
}, []);

而 GitHub 是代码托管平台。你写完的 React 代码可以上传到 GitHub，方便团队协作、备份或部署。

🚀 部署提示：你可以用 Vercel 或 Netlify 免费部署 React 应用，只需连上 GitHub 仓库即可。

---

六、新手常见问题解答

问题	原因	解决方案
npm start 报错	端口 3000 被占用	终端按 Ctrl+C 停止，或改端口：PORT=4000 npm start
页面没更新	忘记保存文件	检查编辑器是否保存（VS Code 右上角有 ● 标志表示未保存）
JSX 报错	忘记 import React	在 React 17+ 不需要，但确保用的是新版本
列表不显示	忘记加 key	每个 map 出来的元素必须有唯一 key

💬 我带过的实习生常犯的错误：直接修改 state（如 todos.push(...)）。永远用 setTodos 来更新状态！

---

七、下一步学习建议

恭喜你完成了第一个 React 应用！接下来，我建议你：

1. 深入理解 Hook：除了 useState，还要学 useEffect（处理副作用，如请求数据）
2. 学习路由：用 react-router-dom 实现多页面跳转
3. 尝试调用真实 API：自己写一个 SpringBoot 后端，或用免费 Mock API（如 JSONPlaceholder）
4. 把项目上传到 GitHub：

   git init
   git add .
   git commit -m "first commit"
   git branch -M main
   git remote add origin https://github.com/你的用户名/项目名.git
   git push -u origin main
   

🌟 最后一句忠告：不要试图一次性学会所有东西。React 生态很大，先掌握基础，再逐步扩展。我当初也是从一个 <h1>Hello</h1> 开始的。

---

坚持写代码，你离成为一名合格的前端开发者，只差无数次“运行成功”的喜悦。加油！