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

大家好！我是小林，一名211高校的计算机专业研究生，平时喜欢写技术博客帮助刚入门前端的新同学。今天这篇《React入门教程：从安装到第一个应用》，正是源于我当初学React时踩过的坑——那时候网上教程要么太深奥，要么跳过关键步骤，让我折腾了好几天才跑通第一个“Hello World”。

所以，我希望用最清晰、最实践的方式，带你从零开始搭建环境、理解核心概念，并亲手写出你的第一个React应用。无论你是完全没碰过前端，还是只会HTML/CSS，都能跟上。

---

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

简单说：React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现 Meta）开发并开源。

• 它不是框架（比如 Vue 或 Angular），而是一个“库”，专注做一件事：高效地更新和渲染 UI。
• 你看到的很多大厂网站（如 Instagram、Netflix、Airbnb）都用了 React。
• 它的核心思想是“组件化”——把页面拆成一个个可复用的小零件（组件），像搭积木一样组合起来。

📚 书籍 & 教程推荐：
如果你喜欢系统学习，可以搭配《React 学习手册》（O'Reilly 出版）；如果偏好动手实践，官方文档（react.dev）本身就是最好的免费教程。

---

二、环境准备：5 分钟搞定开发环境

要写 React，你需要以下工具：

工具	作用	是否必须
Node.js	运行 JavaScript 的环境	✅ 必须
npm / yarn	包管理器，安装依赖	✅ 必须
代码编辑器（如 VS Code）	写代码的地方	✅ 推荐

步骤 1：安装 Node.js

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

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

node -v
npm -v

如果看到版本号（如 v18.17.0），说明安装成功！

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

我们使用官方脚手架 Vite（比 Create React App 更快），命令如下：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

执行完后，你会看到类似这样的输出：

  ➜  Local:   http://localhost:5173/

打开浏览器访问 http://localhost:5173，就能看到默认的 React 页面了！

💡 避坑指南：
我当初卡在 npm install 报错，后来发现是因为网络问题。如果你在国内，建议配置淘宝镜像：

npm config set registry https://registry.npmmirror.com

---

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

1. 组件（Component）—— React 的基本单位

在 React 中，一切皆组件。比如一个按钮、一个导航栏、一个用户卡片，都可以是一个组件。

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

• App 是一个函数组件
• return 里写的是 JSX（JavaScript + XML 的混合语法）
• 看起来像 HTML，但其实是 JavaScript 对象

2. JSX 是什么？

JSX 允许你在 JS 里写类似 HTML 的结构。它会被自动编译成 React.createElement() 调用。

✅ 正确写法：

const element = <h1>Hello</h1>;

❌ 错误写法（注意：HTML 属性要用驼峰命名）：

// ❌ class 应该写成 className
<div class="box">...</div>

// ✅ 正确
<div className="box">...</div>

3. 状态（State）—— 让页面“动”起来

状态是组件的“记忆”。比如点击按钮，计数器加 1。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 声明状态

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

• useState(0) 返回一个数组：当前值 + 更新函数
• 点击按钮 → 调用 setCount → React 自动重新渲染页面

🔍 我当初的困惑：
为什么不能直接写 count = count + 1？
因为 React 需要知道“状态变了”，只有通过 setCount 才会触发重新渲染！

---

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

现在，我们整合前面的知识，做一个超简版 Todo 应用。

第 1 步：修改 App.jsx

替换 src/App.jsx 的内容：

import { useState } from 'react';

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

  const addTodo = () => {
    if (input.trim() === '') return;
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>我的待办事项</h1>
      
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入新任务..."
      />
      <button onClick={addTo do}>添加</button>

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

export default App;

⚠️ 注意：key={index} 在真实项目中不推荐（用唯一 ID 更好），但初学者可以先这样写。

第 2 步：运行看看效果

保存文件后，浏览器会自动刷新。你可以在输入框打字，点“添加”，任务就会出现在列表里！

✅ 你已经完成了：

• 状态管理（todos 和 input）
• 事件处理（onClick, onChange）
• 列表渲染（map 循环）

---

五、新手常见问题解答（FAQ）

问题	原因	解决方案
页面空白，控制台报错	JSX 标签未闭合或大小写错误	检查 <div> 是否有 </div>，组件名首字母大写
修改代码后不更新	浏览器缓存或 HMR 失效	刷新页面，或重启 npm run dev
useState is not defined	忘记导入 useState	在文件顶部加 import { useState } from 'react';
中文显示乱码	文件编码不是 UTF-8	用 VS Code 打开文件，右下角点“UTF-8”确认

---

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

恭喜你完成了第一个 React 应用！但这只是开始。我建议你按以下路径深入：

1. 巩固基础

   • 精读 React 官方教程（那个井字棋游戏超经典！）
   • 动手改写 Todo List：支持删除、标记完成

2. 搭配学习资源

   • 书籍：《React 学习手册》《深入浅出 React》
   • 视频：B站搜索“React 入门 2024”，选播放量高、评论好的系列

3. 进阶方向

   • 学习 React Router（实现页面跳转）
   • 了解 状态管理（如 Context API、Redux）
   • 尝试用 TypeScript + React 提升代码健壮性

🌟 最后鼓励：
我当初学 React 时，也觉得 JSX 和状态管理很抽象。但只要你坚持写代码、多调试、多问“为什么”，两周后回头看，你会发现：“原来这么简单！”

编程不是记住语法，而是培养解决问题的思维。现在，去修改你的 Todo 应用吧——比如加个“清空所有”按钮，就是很好的练习！

祝你编码愉快！如果有问题，欢迎在我的博客留言交流 😊