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

大家好！我是一个从中文系转行做前端开发的“文科生程序员”。当初为了找工作，我啃过无数技术文档，踩过无数坑——比如装环境装到半夜、看不懂报错信息急得睡不着觉。今天写这篇《React入门教程》，就是想用最通俗的语言，带你从零开始搭建第一个React项目，避免我当年走过的弯路。

这篇文章特别适合完全没接触过编程或前端的新手。我会一步步解释每个概念，并配上可运行的代码示例。哪怕你只听说过“区块链”或“面试题”这些词，也不用担心——我们今天的目标很明确：亲手跑起一个React应用。

---

一、React到底是什么？用来做什么？

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

你可以把它想象成“搭积木”：网页上的每一个按钮、输入框、列表，都是一个“组件”（Component）。React 帮你把这些组件拼起来，还能在数据变化时自动更新页面，不用手动刷新。

💡 举个生活化的例子：
你在一个电商网站看到商品价格变了，页面自动刷新显示新价格——这背后很可能就是 React 在工作。

虽然现在常听到“区块链”、“AI”这些高大上的词，但作为前端开发者，你每天打交道最多的，其实是像 React 这样的工具。而且，React 几乎是前端面试题里的“必考项”。掌握它，是你求职路上的重要一步。

---

二、环境准备：安装开发工具

别被“环境配置”吓到！现在有工具可以一键搞定。我们要装三样东西：

1. Node.js：让 JavaScript 能在电脑上运行（不只是浏览器里）
2. npm 或 yarn：包管理器，用来安装 React 等工具
3. 代码编辑器：推荐 VS Code（免费、轻量、插件多）

步骤 1：安装 Node.js

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

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

node -v
npm -v

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

步骤 2：创建 React 项目

我们使用官方推荐的脚手架工具 Create React App，它能自动生成项目结构。

在终端中运行：

npx create-react-app my-first-react-app

📌 npx 是 npm 自带的命令，可以直接运行远程包，无需全局安装。

这个过程可能需要几分钟（取决于网速）。完成后，进入项目文件夹：

cd my-first-react-app

然后启动开发服务器：

npm start

浏览器会自动打开 http://localhost:3000，你会看到一个旋转的 React logo —— 恭喜！你的第一个 React 项目跑起来了！

---

三、核心概念：用大白话讲清楚

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

在 React 中，一切皆组件。一个按钮是一个组件，一个导航栏也是一个组件。

组件有两种写法：函数组件（推荐新手用）和类组件（旧写法，逐渐淘汰）。

// src/App.js（这是你项目里已有的文件）
function App() {
  return (
    <div>
      <h1>你好，React！</h1>
    </div>
  );
}

export default App;

• function App() 是一个函数，返回 JSX（后面解释）
• export default App 表示这个组件可以被其他文件使用

2. JSX：JavaScript + HTML 的混合语法

JSX 看起来像 HTML，但其实是在 JavaScript 里写的标记语言。

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

⚠️ 注意：

• 所有标签必须闭合：<img /> 而不是 <img>
• 属性名用驼峰：className 而不是 class
• 可以嵌入 JavaScript 表达式：用 {} 包起来

function Greeting({ name }) {
  return <p>欢迎你，{name}！今天是 {new Date().toLocaleDateString()}</p>;
}

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

状态是组件的记忆。比如点击按钮后数字加 1，这个数字就存在状态里。

用 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>
  );
}

• count 是当前值
• setCount 是修改它的函数
• 每次调用 setCount，React 会自动重新渲染组件

---

四、实战项目：做一个“待办事项”列表

现在，我们动手做一个简单的 Todo List。它包含：

• 输入框：添加新任务
• 列表：显示所有任务
• 删除按钮：移除某项任务

步骤 1：替换 App.js 内容

打开 src/App.js，替换成以下代码：

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(''); // 清空输入框
  };

  const removeTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  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}
            <button onClick={() => removeTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤 2：理解关键点

代码片段	作用说明
useState([])	初始化一个空数组作为任务列表
onChange={...}	输入框内容变化时，同步更新 inputValue
setTodos([...todos, inputValue])	用展开运算符复制原数组，再添加新任务（不可变原则）
key={index}	React 需要每个列表项有唯一 key，方便追踪变化

✅ 安全提示：虽然这里用了 index 作为 key，在简单 demo 中没问题，但在真实项目中，建议用唯一 ID（如数据库主键），避免列表顺序变化时出错。

步骤 3：保存并查看效果

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

• 输入“学习 React”，点“添加”
• 再输入“准备面试题”，点“添加”
• 点击“删除”移除任意任务

恭喜！你已经做出了一个交互式应用。

---

五、新手常见问题解答

Q1：为什么我的 npm start 报错？

• 端口被占用：可能是 3000 端口已被其他程序占用。可以改端口：

  PORT=4000 npm start
  

• Node 版本太低：确保 Node ≥ 16。用 node -v 查看。
• 网络问题：尝试用国内镜像源（如淘宝 npm 镜像）。

Q2：JSX 里为什么不能用 class？

因为 class 是 JavaScript 的保留字。React 用 className 代替，编译后会变成 HTML 的 class。

Q3：每次都要重启服务器吗？

不用！React 开发服务器支持 热重载（Hot Reload），你保存代码后，浏览器会自动更新，无需手动刷新。

Q4：这个和区块链有关系吗？

没有直接关系。React 是前端 UI 库，区块链是后端/分布式技术。不过，有些区块链项目（如钱包、DApp）的前端也会用 React 开发。作为初学者，先专注掌握 React 本身。

---

六、学习建议与避坑指南

下一步学什么？

阶段	推荐学习内容
初级	React 官方文档（beta.react.dev）、Hooks（useEffect, useContext）
中级	路由（React Router）、状态管理（Redux / Zustand）
高级	性能优化、TypeScript + React、测试（Jest + React Testing Library）

面试题准备小贴士

很多公司面试会问：

• “React 的生命周期是怎样的？” → 现在主要用 Hooks，类组件生命周期已过时
• “state 和 props 有什么区别？” → state 是组件自己的记忆，props 是从父组件传来的数据
• “如何优化 React 性能？” → 用 React.memo、避免在 render 里创建函数等

建议动手写几个小项目（如天气 App、博客首页），比死记硬背更有用。

我的避坑经验

• 不要一开始就学 Redux：90% 的小型项目用 useState + useContext 就够了。
• 别追求最新语法：先掌握基础（组件、状态、事件），再学高级特性。
• 多看官方文档：React 官方文档写得非常清晰，且有中文版。

---

结语

从文科生到前端工程师，我深知“从零开始”的艰难。但请相信：每一个复杂的系统，都是由简单的零件组成的。今天你跑通了第一个 React 应用，明天就能做出更酷的产品。

记住：编程不是天才的专利，而是耐心和练习的结果。遇到问题别慌，查文档、搜错误信息、问社区——这些都是程序员的日常。

现在，关掉这篇文章，打开你的编辑器，亲手敲一遍代码吧！你的第一个项目，正在等着你点亮。

加油，未来的开发者！🚀