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

上周五晚上，杭州下着小雨，我窝在阿里西溪园区的工位上，盯着屏幕上一个诡异的白屏——那是我们新项目的前端页面，上线前最后一天居然挂了。PM在群里@我说：“亲，这个页面双11必须能用啊！”我一边在心里默念“冷静，我是Vim党，不能砸机械键盘”，一边点开Chrome DevTools，发现是某个React组件没渲染出来。

说来惭愧，作为一个老后端工程师（之前主要搞Java和Go），我一直对前端敬而远之，觉得“切图仔”的活儿太琐碎。但最近两年，随着前后端分离架构成为标配，连我们后端都得懂点React才能和前端同学高效联调。尤其是跳槽面试时，HR问“会不会React”已经成了默认题。去年我面网易的时候，就被问了一道React Hooks的实现原理，当场懵圈。

痛定思痛，我决定系统学一遍React。试过VS Code、WebStorm，甚至一度想回到Sublime Text的怀抱，但最后还是被Cursor圈粉了——它对Vim键位支持贼好，还能直接解释React报错信息，对我这种IDE苦手太友好了。

今天这篇教程，就是给像我一样“被迫转全栈”的后端兄弟们写的。不讲虚的，直接上手，让你今晚就能跑起第一个React应用。

---

为什么后端也得会React？

先别急着反驳。我知道你心里在想：“我又不是前端，为啥要学这个？”

现实很骨感。在杭州这片互联网热土上，无论是阿里还是网易，现在推行的都是“小前台、大中台”模式。一个典型场景：后端写完API，前端还没排期，PM就催着看效果。这时候，如果你能自己搭个简易页面调用接口，不仅显得你全能，还能提前验证接口设计是否合理。

更别说现在很多BFF（Backend For Frontend）层直接用Next.js写了，后端不碰React根本没法维护。

---

安装环境：别被Node.js劝退

第一步永远是最劝退的。很多后端看到要装Node.js就头大，毕竟习惯了go run或者java -jar这种简单粗暴的方式。

别慌！React现在有官方脚手架 Create React App（简称CRA），一行命令搞定：

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

注意：这里用的是 npx，不是 npm。npx 会临时下载并运行最新版的create-react-app，避免全局安装带来的版本冲突——这是我踩过的坑，之前因为全局装了旧版，新建项目直接报错“Invalid hook call”。

进入目录，启动开发服务器：

cd my-first-react-app
npm start

浏览器自动打开 http://localhost:3000，看到那个旋转的React logo了吗？恭喜，你已经跨过了80%新手的门槛。

小贴士：如果你和我一样用Vim，可以配置一下.vimrc让它识别JSX语法高亮。不过说实话，我现在写React基本都靠Cursor，它能直接在Vim里显示组件预览，爽翻。

---

理解React的核心思想：组件化

React最核心的概念就一个：一切皆组件。

想象你是个乐高玩家，整个页面就是由一堆小积木（组件）拼起来的。每个组件负责一小块UI，比如Header、Sidebar、ProductCard。

打开 src/App.js，你会看到这样的代码：

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

这就是你的根组件。注意几点：

• 文件扩展名是 .js，但里面写的是JSX（JavaScript + XML），React的语法糖
• className 而不是 class，因为class是JS关键字
• 所有标签必须闭合，比如 <img /> 不能写成 <img>

作为后端，你可能会觉得这很怪。但习惯就好——就像当初第一次写Spring Boot的@RestController一样。

---

写个真实点的例子：用户列表

光看Hello World没意思。我们来模拟一个后端常见的需求：展示用户列表，并调用后端API。

假设你的后端已经提供了 /api/users 接口，返回JSON格式的用户数据。

首先，创建一个新组件 UserList.js：

// src/components/UserList.js
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]); // 状态管理
  const [loading, setLoading] = useState(true);

  // 组件加载时获取数据
  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        console.error('Failed to fetch users:', err);
        setLoading(false);
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

export default UserList;

然后在 App.js 中引入它：

import UserList from './components/UserList';

function App() {
  return (
    <div className="App">
      <h1>用户管理系统</h1>
      <UserList />
    </div>
  );
}

这里用到了两个关键概念：

• useState：管理组件内部状态（比如users列表）
• useEffect：处理副作用（比如发起网络请求）

吐槽时间：第一次写useEffect时，我总忘记加依赖数组，结果请求发了无数次，差点把测试环境的数据库打爆。运维大哥在群里吼：“谁在疯狂调/user接口？！” 我默默缩回工位……

---

和后端联调：代理设置

开发时，前端通常运行在 localhost:3000，而后端API在 localhost:8080，直接调用会遇到跨域问题。

CRA提供了一个超简单的解决方案：在 package.json 同级目录下创建 setupProxy.js：

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

这样，前端所有以 /api 开头的请求都会被代理到你的后端服务。再也不用求前端同事帮你改Nginx配置了！

---

性能与兼容性：别让老板背锅

虽然这是入门教程，但作为注重代码质量的老兵，我还是得提两句：

1. 性能优化：React默认不做太多优化，列表渲染记得加 key（如上面的 key={user.id}），避免不必要的重渲染。
2. 浏览器兼容：CRA默认使用Babel转译，支持到IE11（虽然现在没人用了）。但如果你用了一些新API（比如fetch），记得加polyfill。

另外，本地开发时可以用React Developer Tools浏览器插件，实时查看组件树和状态变化——比console.log香多了。

---

总结：后端学React，值不值？

说实话，花三天时间学React基础，比我预想的收获大得多。

• 联调效率提升50%：不用再等前端排期，自己就能验证接口
• 面试加分项：上周面一家创业公司，现场让我改个React组件，轻松拿下offer
• 更理解前端痛点：以前总觉得“不就是个按钮吗”，现在知道状态管理有多头疼

当然，我不是让你转行当前端。但在这个全栈模糊的时代，多一项技能，就多一分主动权。

最后送大家一句我在阿里学到的话：“技术人的护城河，不是精通某一门语言，而是快速学习并解决问题的能力。”

现在，关掉这篇文章，去跑通你的第一个React应用吧。搞定了记得回来评论区打卡——说不定下次团建，我们就坐同一桌吐槽产品经理了。

---

附：常用命令速查表

场景	命令
创建新项目	npx create-react-app my-app
启动开发服务器	npm start
构建生产包	npm run build
运行测试	npm test
添加依赖	npm install axios

P.S. 如果你也在杭州，欢迎约咖啡聊技术（或者一起骂deadline）。我的Cursor配置文件也可以分享——毕竟，Vim党要团结！