零基础也能学会：React从安装到第一个应用

大家好，我是团队的前端培训负责人，过去五年带过上百位应届生入门前端开发。很多同学第一次接触 React 时，面对复杂的工具链和抽象概念常常感到无从下手。我当初学的时候，也曾在命令行里反复报错、在组件嵌套中迷失方向。所以今天，我想写一篇真正“手把手”的教程——不讲大道理，只带你一步步跑通第一个 React 应用。

你可能会好奇：为什么这篇教程还要提到区块链和通义千问？别急，这并非硬凑关键词。一方面，现代 Web 开发正越来越多地与区块链前端（如钱包交互、DApp）结合；另一方面，像通义千问这样的 AI 工具，其实能成为你学习过程中的强力助手（比如帮你解释报错信息或生成示例代码）。但今天我们聚焦核心：用最安全、最稳妥的方式，迈出 React 的第一步。

---

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

简单说，React 是一个由 Facebook（现 Meta）开发的 JavaScript 库，专门用来构建用户界面（UI）。它的核心思想是“组件化”——把页面拆成一个个独立、可复用的小部件，比如按钮、导航栏、卡片等。

💡 举个例子：你看到的微信聊天界面，其实是由“消息列表组件”、“输入框组件”、“联系人头像组件”拼起来的。React 就是帮我们高效组装这些“乐高积木”的工具。

React 不是框架（如 Angular），它只负责“视图层”，因此非常灵活，可以和其他技术（比如处理数据的 Redux、路由的 React Router）自由搭配。正因为这种轻量和高效，React 成为了全球最流行的前端库之一，也被广泛用于构建传统网站、移动端应用（通过 React Native），甚至一些区块链 DApp 的前端界面。

---

二、环境准备：安全、干净地搭建开发环境

作为新手，我强烈建议使用 Vite 来创建 React 项目。相比老一代的 Create React App，Vite 启动更快、配置更简洁，且默认启用了现代 JavaScript 特性，减少初学者踩坑。

前置条件

• 安装 Node.js（推荐 LTS 版本，如 18.x 或 20.x）
• 一个代码编辑器（推荐 VS Code）

🔒 安全提示：请务必从官网下载 Node.js 和 VS Code，避免使用第三方渠道提供的安装包，以防植入恶意软件。

创建第一个 React 项目

打开终端（Windows 用 PowerShell 或 CMD，Mac/Linux 用 Terminal），依次执行以下命令：

# 1. 创建项目（my-react-app 可替换为你喜欢的文件夹名）
npm create vite@latest my-react-app -- --template react

# 2. 进入项目目录
cd my-react-app

# 3. 安装依赖
npm install

# 4. 启动开发服务器
npm run dev

如果一切顺利，你会看到类似这样的输出：

  VITE v4.3.9  ready in 210 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

复制 http://localhost:5173/ 到浏览器打开，就能看到默认的 React 欢迎页面！

常见问题速查表

问题现象	可能原因	解决方案
npm: command not found	Node.js 未正确安装	重新从官网安装 Node.js，并重启终端
启动后页面空白	端口被占用	在 vite.config.js 中修改端口： server: { port: 3000 }
报错缺少依赖	网络问题导致安装中断	删除 node_modules 文件夹和 package-lock.json，重新运行 npm install

---

三、核心概念：用生活化语言理解 React

1. 组件（Component）：你的 UI 积木

在 React 中，一切皆组件。每个组件就是一个 JavaScript 函数，返回你想显示的 HTML 内容。

// 定义一个组件
function WelcomeMessage() {
  return <h1>你好，欢迎来到 React 世界！</h1>;
}

// 使用组件（就像用 HTML 标签一样）
<Welcome日消息 />

⚠️ 注意：组件名必须以大写字母开头（如 WelcomeMessage），这是 React 的约定，否则会被当成普通 HTML 标签。

2. JSX：在 JavaScript 中写 HTML

上面代码中的 <h1>...</h1> 看起来像 HTML，但它其实是 JSX——一种 JavaScript 的语法扩展。它最终会被编译成普通的 JavaScript 函数调用。

// JSX 写法（推荐）
const element = <div className="greeting">Hello!</div>;

// 等价于纯 JavaScript（无需手写）
const element = React.createElement('div', { className: 'greeting' }, 'Hello!');

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

静态页面很无聊。要实现交互（比如点击按钮计数），就需要 状态（State）。React 提供了 useState Hook 来管理状态。

import { useState } from 'react';

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

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

🧠 小知识：useState 返回一个数组，第一个元素是当前状态值，第二个是更新它的函数。这是 JavaScript 的“解构赋值”语法。

---

四、实战：构建一个简单的“待办事项”应用

现在，让我们把知识串起来，做一个极简的 Todo List。这个应用虽然简单，但涵盖了 React 的核心模式。

步骤 1：清理默认代码

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

import './App.css';

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

export default App;

步骤 2：添加状态和输入框

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

function App() {
  const [todos, setTodos] = useState([]); // 存储所有待办项
  const [inputValue, setInputValue] = useState(''); // 输入框的值

  const addTodo = () => {
    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={addTodo}>添加</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

关键点解析

• value={inputValue} + onChange：实现“受控组件”，确保输入框内容始终由 React 状态控制。
• key={index}：React 要求列表项必须有唯一 key，这里用索引临时替代（实际项目建议用 ID）。
• [...todos, inputValue]：使用展开运算符创建新数组，避免直接修改原状态（React 要求状态不可变）。

🔒 安全编码习惯：永远不要直接修改状态（如 todos.push(...)），而应创建新副本。这能防止意外的副作用，也是 React 响应式更新的基础。

步骤 3：测试你的应用

保存文件后，Vite 会自动刷新浏览器。试试输入任务并点击“添加”——列表应该实时更新！

---

五、新手常见问题解答

Q1：为什么我的组件不更新？

• 原因：你可能直接修改了状态（如 array.push()）。
• 解决：始终使用状态更新函数（如 setArray([...array, newItem])）。

Q2：JSX 中如何写 if 判断？

• JSX 不支持 if 语句，但可以用三元表达式或逻辑与（&&）：

  {isLoggedIn && <p>欢迎回来！</p>}
  {count > 0 ? <p>有任务</p> : <p>空空如也</p>}
  

Q3：如何调试 React 应用？

• 安装 React Developer Tools 浏览器插件。
• 在组件中使用 console.log 打印状态（但记得上线前删除）。

Q4：React 和区块链有什么关系？

• 虽然 React 本身不涉及区块链，但它是构建 去中心化应用（DApp）前端 的主流选择。例如，你可以用 React + Web3.js 与以太坊智能合约交互。不过，那是进阶内容，先把基础打牢！

---

六、下一步学习建议

恭喜你完成了第一个 React 应用！但这只是起点。以下是安全、高效的学习路径：

1. 巩固基础：深入理解 Props、条件渲染、列表渲染、事件处理。
2. 学习 Hook：掌握 useEffect（处理副作用）、useContext（跨组件传值）。
3. 项目驱动：尝试重构你的 Todo List，加入删除功能、本地存储（localStorage）。
4. 善用 AI 工具：遇到报错时，可以把错误信息粘贴给 通义千问 等 AI，让它帮你分析原因（但别盲目复制代码，要理解原理！）。
5. 关注安全：永远不要在前端代码中硬编码 API 密钥；对用户输入做校验，防止 XSS 攻击。

最后提醒：编程不是记忆语法，而是培养解决问题的能力。我带过的优秀应届生，往往不是最聪明的，而是最肯动手试错的。所以，大胆写、大胆改，你的第一个 React 应用，已经比昨天的自己更进一步了！

---

字数统计：3048 字
适用人群：完全零基础的前端初学者
技术栈版本：React 18 + Vite 4（截至 2024 年）