从培训班出来的前端讲师告诉你：如何用React做出你的第一个应用？

大家好！我是一名从培训班“毕业”的前端开发，现在在一家互联网公司做React开发。回想起当初刚学React的时候，我踩过的坑、熬过的夜、掉过的头发……真的不想让你们再经历一遍。所以今天，我决定写一篇真正零基础也能看懂的React入门教程，带你从安装到跑起第一个应用，一步到位！

你可能会问：“现在AI这么强，比如Kimi都能帮我写代码了，我还用学吗？”我的回答是：AI是工具，但理解原理才能掌控工具。Kimi可以帮你生成代码片段，但如果你连React是什么都不清楚，生成出来的代码你也看不懂、改不动。所以，打好基础永远是最关键的一步。

---

什么是React？它能干什么？

简单说，React是一个用来做网页界面的JavaScript库，由Facebook（现在叫Meta）开发并开源。它的核心思想是：把页面拆成一个个小零件（我们叫“组件”），每个零件自己管理自己的样子和行为。这样写代码更清晰、更容易维护。

举个例子：你看到的微信聊天界面，消息列表、输入框、发送按钮——在React里可能就是三个独立的组件。改其中一个，不会影响其他部分。

💡 我当初学的时候，最困惑的就是“为什么不用原生JS直接写？”后来才明白：项目越大，越需要结构化。React就是帮我们把混乱的代码变得有条理。

---

环境准备：三步搞定开发环境

别被“环境配置”吓到！现在工具已经非常傻瓜化了。你只需要：

1. 一台能上网的电脑（Windows / Mac / Linux 都行）
2. 安装 Node.js（这是运行JavaScript后端环境的基础）
3. 一个代码编辑器（推荐 VS Code，免费又好用）

第一步：安装Node.js

打开浏览器，访问 https://nodejs.org，下载 LTS版本（长期支持版，更稳定）。安装时一路“下一步”就行，不用改设置。

安装完成后，打开终端（Windows按 Win+R 输入 cmd；Mac打开“终端”），输入：

node -v
npm -v

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

⚠️ 常见问题：如果提示“command not found”，请重启电脑，或者检查是否勾选了“自动添加到PATH”选项（安装时默认会勾）。

第二步：安装VS Code

去 https://code.visualstudio.com 下载安装。装好后，建议安装两个插件：

• ES7+ React/Redux/React-Native snippets（快速生成React代码）
• Prettier（自动格式化代码，让你的代码更整洁）

第三步：创建你的第一个React项目

打开终端，进入你想放项目的文件夹（比如桌面），执行以下命令：

npx create-react-app my-first-app

📌 这里的 my-first-app 是项目名字，你可以改成自己喜欢的，比如 hello-react。

这个命令会自动帮你：

• 下载React所需的所有依赖
• 创建标准项目结构
• 配置好开发服务器

耐心等几分钟（第一次会慢一点，后续就快了）。完成后，进入项目目录并启动：

cd my-first-app
npm start

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

🔍 小知识：npx 是Node自带的工具，可以直接运行远程包，不用全局安装。比以前用 npm install -g create-react-app 更干净！

---

核心概念：用大白话讲清楚React三大支柱

别被“JSX”“状态”“组件”这些词吓到。我用最直白的方式解释：

1. 组件（Component）：网页的乐高积木

在React里，一切皆组件。一个按钮是一个组件，一个导航栏也是一个组件。组件可以嵌套，就像搭积木。

比如，下面这个代码就是一个最简单的函数组件：

// src/App.js
function App() {
  return (
    <div>
      <h1>你好，React！</h1>
      <p>这是我的第一个组件</p>
    </div>
  );
}

export default App;

💬 注意：这里用的是 <h1> 而不是字符串，这种写法叫 JSX —— 它看起来像HTML，其实是JavaScript的语法糖。React会自动把它转成真正的JS代码。

2. 状态（State）：让页面“动”起来

静态页面谁都会写。但用户点个按钮，数字+1，这就需要状态管理。

React提供了 useState 这个“钩子”（Hook），让你在函数组件里也能用状态：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值是0

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

🧠 我当初学的时候总记不住 setCount 是干嘛的。后来想通了：count 是当前值，setCount 是改变它的方法，就像遥控器换台——你看的是画面（count），按的是按钮（setCount）。

3. 事件处理：用户交互的桥梁

上面代码里的 onClick 就是事件处理。注意两点：

• 事件名是驼峰写法（onClick 而不是 onclick）
• 传入的是函数，不是函数调用！所以写 () => setCount(...)，而不是 setCount(...)

---

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

光看不练假把式！我们现在动手做一个超简版Todo List。

步骤1：清理默认代码

打开 src/App.js，删掉所有内容，替换成：

import './App.css';

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

export default App;

同时清空 src/App.css，只保留：

.App {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}

步骤2：创建输入框和添加按钮

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

function App() {
  const [inputValue, setInputValue] = useState('');
  const [todos, setTodos] = useState([]);

  const handleAdd = () => {
    if (inputValue.trim() === '') return; // 空内容不添加
    setTodos([...todos, inputValue]); // 把新任务加到数组末尾
    setInputValue(''); // 清空输入框
  };

  return (
    <div className="App">
      <h1>我的待办清单</h1>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入任务..."
        />
        <button onClick={handleAdd}>添加</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

🔑 关键点解释：

• value={inputValue}：让输入框受控（内容由state控制）
• onChange：每次输入都更新state
• key={index}：React渲染列表时需要唯一key，这里用索引（实际项目建议用ID）

步骤3：试试效果！

保存文件，浏览器会自动刷新。你现在可以：

• 在输入框打字
• 点“添加”按钮
• 看到任务出现在下方列表

恭喜！你已经做出了一个可交互的React应用！

---

新手常见问题 & 避坑指南

根据我带培训班的经验，新手最容易卡在这几个地方：

问题	原因	解决方案
页面没更新	直接修改state（如 todos.push()）	必须用 setTodos([...]) 创建新数组
点击没反应	事件处理函数写成 onClick={handleAdd()}	应该写 onClick={handleAdd}（不加括号）
中文乱码	文件保存编码不是UTF-8	在VS Code右下角确认是“UTF-8”
启动报错	Node版本太低	升级到Node 16+

💡 额外提醒：不要一上来就学Redux、TypeScript！先把React核心搞明白，再逐步加复杂度。

---

下一步怎么学？我的学习路径建议

1. 巩固基础：多写几个小项目（计数器、天气卡片、简易博客）
2. 理解Hooks：除了 useState，还要学 useEffect（处理副作用，比如发请求）
3. 学会调试：安装React Developer Tools（浏览器插件），能直接查看组件状态
4. 善用GitHub：把你的代码上传到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
   

5. 借助AI但别依赖：可以用Kimi帮你解释错误信息或生成模板代码，但一定要自己敲一遍、理解每一行！

---

最后的话

我当初在培训班时，老师一句话让我记到现在：“编程不是记住语法，而是学会解决问题的思维。” React只是工具，核心是你如何用它把想法变成现实。

你现在做出的这个Todo List，虽然简单，但已经包含了React最核心的思想：组件化 + 状态驱动。接下来，大胆去尝试更多功能吧——比如给任务加删除按钮、本地存储、甚至连接真实API！

如果你觉得这篇教程有帮助，欢迎去GitHub给我点个Star（假设我开源了示例代码 😄）。也欢迎在评论区留言你遇到的问题，我会尽力解答。

记住：每一个大神，都是从“Hello World”开始的。 你已经在路上了，坚持下去！