零基础也能写出第一个React应用：从安装到运行

大家好，我是团队的前端培训负责人，过去五年带过近百名应届生入门前端开发。很多人一听到“React”就紧张，觉得是高深莫测的框架。其实不然——React 的核心思想非常朴素：用 JavaScript 描述界面，让数据驱动视图自动更新。

我当初学的时候，也卡在环境配置这一步整整两天。npm 报错、node 版本不兼容、create-react-app 卡住……这些坑我都踩过。所以今天这篇教程，我会手把手带你避开这些陷阱，用最清晰的步骤，从零写出你的第一个 React 应用。

顺便说一句，虽然本文聚焦 React，但你会发现它常和 Spring Boot 搭配使用（后端提供 API），而爬虫技术有时也会用来获取外部资源供前端展示。理解这些关联，能帮你构建更完整的开发视野。

---

为什么选择 React？

React 是由 Facebook 开发并开源的 JavaScript 库，用于构建用户界面。它的核心优势在于：

• 组件化：把页面拆成独立、可复用的小块（比如按钮、导航栏）
• 声明式：你只需描述“界面应该长什么样”，不用手动操作 DOM
• 高效更新：通过虚拟 DOM 最小化真实 DOM 操作，提升性能

注意：React 本身只是一个视图层库，不像 Vue 那样“全家桶”。但它生态强大，配合其他工具（如 React Router、Redux）可构建大型应用。

---

第一步：搭建开发环境

要写 React，你需要先装好以下工具：

工具	作用	安装方式
Node.js	运行 JavaScript 的运行时环境	官网下载 LTS 版本
npm / yarn	包管理器，用于安装依赖	Node.js 自带 npm；yarn 可通过 npm install -g yarn 安装

检查是否安装成功

打开终端（Windows 用 PowerShell 或 CMD，Mac/Linux 用 Terminal），输入：

node -v
npm -v

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

⚠️ 建议使用 Node.js 18 或 20 版本。太旧的版本可能不支持新特性，太新的可能有兼容问题。

---

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

我们使用官方推荐的脚手架工具 Vite（比 create-react-app 更快、更现代）。

在终端中执行：

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

这四行命令分别做了什么？

1. npm create vite@latest ...：创建一个名为 my-react-app 的项目，模板选 React
2. cd my-react-app：进入项目文件夹
3. npm install：安装所有依赖包（如 react、react-dom）
4. npm run dev：启动开发服务器

成功后，你会看到类似：

  VITE v4.4.9  ready in 289 ms

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

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

💡 如果你习惯用 create-react-app，也可以用 npx create-react-app my-app，但 Vite 启动速度更快，更适合新手快速看到效果。

---

第三步：理解 React 的核心概念

别急着写代码，先搞懂三个关键概念：

1. 组件（Component）

React 应用由组件构成。每个组件是一个 JavaScript 函数，返回 JSX（一种类似 HTML 的语法）。

// src/App.jsx
function App() {
  return (
    <div>
      <h1>你好，React！</h1>
    </div>
  );
}

这个 App 就是最顶层的组件。你可以把它想象成一个“乐高积木”。

2. JSX：JavaScript + XML

JSX 允许你在 JS 中写类似 HTML 的结构。注意：

• 属性名用驼峰（如 className 而不是 class）
• 必须闭合标签（如 <img />）
• 可以嵌入 JavaScript 表达式：{变量名}

const name = "小明";
return <p>欢迎你，{name}！</p>;

3. 状态（State）与响应式更新

状态是组件“记忆”的数据。当状态变化，界面自动更新。

使用 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 变化，页面自动刷新——这就是 React 的魔力。

我当初学的时候总想手动改 DOM，后来才明白：不要操作 DOM，只管更新状态。

---

第四步：实战——构建一个“资源展示器”

假设我们要做一个简单的页面，展示一些学习资源（比如教程链接）。这些资源可能来自后端（比如 Spring Boot 提供的 API），甚至可能通过爬虫抓取公开数据（仅用于学习，遵守 robots.txt！）。

步骤 1：修改 App.jsx

替换 src/App.jsx 的内容：

import { useState, useEffect } from 'react';

function App() {
  const [resources, setResources] = useState([]);

  // 模拟从后端获取数据
  useEffect(() => {
    // 实际项目中这里会 fetch('http://localhost:8080/api/resources')
    const mockData = [
      { id: 1, title: 'React 官方文档', url: 'https://react.dev' },
      { id: 2, title: 'MDN Web Docs', url: 'https://developer.mozilla.org' },
      { id: 3, title: '免费编程课程', url: 'https://freecodecamp.org' }
    ];
    setResources(mockData);
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h1>前端学习资源</h1>
      <ul>
        {resources.map(resource => (
          <li key={resource.id}>
            <a href={resource.url} target="_blank" rel="noopener noreferrer">
              {resource.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

关键点解析：

• useEffect：相当于组件“加载完成”后的回调，常用于发起网络请求
• mockData：模拟后端返回的数据。真实场景中，Spring Boot 项目会提供 /api/resources 接口
• map：将数组转为 JSX 元素列表
• key：React 识别列表项的唯一标识，必须提供

🌐 如果你有 Spring Boot 后端，只需把 mockData 替换为 fetch('/api/resources').then(res => res.json()) 即可对接。

关于爬虫的说明

有些同学问：“能不能用 React 写爬虫？”
不能。React 是前端框架，运行在浏览器中，受同源策略限制，无法直接爬取第三方网站。

但你可以：

1. 用 Python/Node.js 写爬虫，抓取公开数据
2. 存入数据库
3. 用 Spring Boot 提供 API
4. React 前端调用该 API 展示数据

这样，爬虫 → Spring Boot → React 就形成了完整链路。

---

新手常见问题解答

Q1：为什么我的页面一片空白？

检查控制台（F12 → Console）是否有报错。常见原因：

• 组件没导出（忘记 export default App）
• JSX 语法错误（比如用了 class 而不是 className）
• 端口被占用（换端口：npm run dev -- --port 3000）

Q2：如何引入 CSS？

可以直接在组件中导入：

import './App.css';

function App() {
  return <div className="container">...</div>;
}

或者使用内联样式（如前面的 style={{ padding: '20px' }}）。

Q3：每次改代码都要重启吗？

不用！Vite 和 CRA 都支持热重载（Hot Reload），保存文件后浏览器自动更新。

Q4：React 和 Vue/Angular 有什么区别？

框架	特点	适合场景
React	轻量、灵活、生态庞大	大型应用、需要高度定制
Vue	渐进式、上手快、文档友好	中小型项目、快速开发
Angular	全功能框架、TypeScript 优先	企业级应用、强类型需求

作为新人，选 React 不会错——大厂使用率高，岗位多。

---

下一步学习建议

你已经完成了第一个 React 应用！接下来建议按顺序学习：

1. 掌握基础 Hook：useState、useEffect、useContext
2. 路由管理：学习 react-router-dom，实现多页面跳转
3. 状态管理：小型项目用 useState 足够；大型项目可学 Zustand 或 Redux Toolkit
4. 对接后端：用 fetch 或 axios 调用 Spring Boot API
5. 构建部署：npm run build 生成静态文件，部署到 Nginx 或 Vercel

📌 避坑指南：不要一上来就学 Redux！90% 的项目用不到它。先精通组件通信和 Context。

---

结语

React 并不可怕。它只是帮你用更聪明的方式写界面。记住：组件 + 状态 = 应用。

我带过的很多应届生，第一天还在问“JSX 是什么”，一周后就能做出 TodoList，两周后开始对接 Spring Boot 后端。你也可以。

如果你对爬虫感兴趣，建议先学 Python 的 requests + BeautifulSoup；如果想深入前后端协作，就去搭一个 Spring Boot 项目，提供几个 RESTful 接口，再用 React 调用它们——这种实战最能提升能力。

技术没有捷径，但有清晰的路径。希望这篇教程能成为你 React 之旅的第一块铺路石。

有问题？欢迎留言讨论。下期我打算写《React + Spring Boot 实现用户登录全流程》，敬请期待！