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

凌晨1点27分，咖啡已经凉了第三杯，我的终端窗口还开着。窗外城市早已安静下来，只有键盘敲击声和偶尔的报错提示在陪伴。最近一边准备跳槽刷题，一边还要赶项目上线，真是刺激。说起来，上周五测试同学又来找我：“你们前端页面怎么点一下卡半天？产品经理那边急着要演示！” 我内心翻了个白眼——这都怪我们那个古老的 jQuery 项目，代码比我的发际线还老。

所以，为了不再被“前端性能问题”追着跑，也为了简历上能多一行亮点，我决定认真学 React。今天这篇技术分享，就带大家从零开始搭一个 React 应用。顺便也给像我一样白天搬砖、晚上卷题的兄弟们一点参考。

---

为啥选 React？Java 老兵的前端初体验

我之前主要搞后端，公司主力语言是 Java（Spring Boot + MyBatis 那一套），对前端一直敬而远之。但现在的全栈趋势太猛了，连我们组的运维大哥都在偷偷学 Vue。更别说现在招聘要求里，“熟悉 React/Vue” 几乎成了标配。

其实我一直觉得，前端框架无非就是换个写法，底层还是 HTML/CSS/JS。直到某次线上事故——用户反馈点击按钮没反应，查了半天发现是事件绑定在动态加载的 DOM 上失效了……那一刻我才意识到：原生 JS 写复杂交互，真的容易把自己绕晕。

React 的声明式编程、组件化思想，正好能解决这类问题。而且它跟 Java 里的“模块化”“面向对象”理念还挺像的，学起来不那么痛苦。

---

环境搭建：别被 node_modules 吓到

React 官方推荐用 create-react-app（简称 CRA）快速启动项目。虽然现在 Vite 更火，但 CRA 对新手友好，而且我司目前还在用 Webpack，先保持一致吧。

打开终端（没错，我这种命令行党从来不用 GUI 工具），执行：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

注：如果你还没装 Node.js，请先去 nodejs.org 下载 LTS 版本。别用最新版，我上次用了 v21，结果某些包兼容性炸了，差点通宵。

几秒后浏览器自动打开 http://localhost:3000，看到那个旋转的 React logo —— 恭喜，你已经跑起来了！

不过，别高兴太早。等你 ls -la 一看，好家伙，node_modules 居然占了 200MB+。我当年第一次见这阵仗时还以为中病毒了。后来才知道，这就是现代前端的“生态税”——为了方便，我们把全世界的轮子都搬进来了。

---

第一个组件：Hello World 也能玩出花

CRA 自动生成的 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>
  );
}

典型的 JSX 语法——在 JS 里写 HTML，乍看有点反人类，但用多了真香。比如我想加个“当前时间”显示：

import { useState, useEffect } from 'react';

function App() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(timer); // 别忘了清理！
  }, []);

  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>当前时间：{time}</p>
    </div>
  );
}

这里用到了 React 的两个核心 Hook：useState 管状态，useEffect 做副作用（比如定时器、API 请求）。说实话，刚学的时候我对“函数组件+Hook”这套很懵——以前不是有 class 组件吗？后来发现，官方早就主推函数式了，class 反而成了“历史遗产”。

吐槽一句：我们组有个老哥坚持用 class 写 React，结果新来的实习生看不懂，PR 被拒三次。时代变了，兄弟。

---

从 Java 思维理解 React 组件

作为一个 Java 程序员，我习惯把 React 组件想象成一个个“可复用的 UI 类”。比如：

• Button 组件 ≈ 一个封装好的 JButton 子类
• props ≈ 构造函数参数或 setter
• state ≈ 对象内部字段

举个例子，我想做一个计数器按钮：

// CounterButton.js
export default function CounterButton({ initialCount = 0, label = "Click me" }) {
  const [count, setCount] = useState(initialCount);

  return (
    <button onClick={() => setCount(count + 1)}>
      {label}: {count}
    </button>
  );
}

然后在 App.js 里用：

import CounterButton from './CounterButton';

function App() {
  return (
    <div>
      <CounterButton label="点赞" />
      <CounterButton initialCount={10} label="收藏" />
    </div>
  );
}

是不是有点 Spring Bean 注入那味儿了？传参、复用、隔离状态——React 把这些做得非常干净。

---

踩坑实录：那些让我想砸键盘的瞬间

当然，学习过程不可能一帆风顺。分享几个我踩过的坑：

1. 忘记 key 导致列表渲染错乱

// 错误示范
{items.map(item => <li>{item.name}</li>)}

// 正确做法
{items.map(item => <li key={item.id}>{item.name}</li>)}

有一次做商品列表，删掉中间一项，结果后面的图片全错位了。查了半小时才发现是没加 key。React 靠 key 来追踪元素变化，不然它会以为你是改了内容而不是删了元素。

2. 异步 setState 拿不到最新值

// 危险操作
setCount(count + 1);
console.log(count); // 还是旧值！

// 安全做法
setCount(prev => {
  console.log(prev); // 拿到最新前值
  return prev + 1;
});

这让我想起 Java 里线程安全的问题——状态更新不是同步的，别假设“改完就能读”。

3. CSS 样式污染

React 默认不隔离样式。我在 Button.css 里写了 .btn { color: red; }，结果整个页面的按钮都红了。后来改用 CSS Modules：

/* Button.module.css */
.btn {
  color: blue;
}

import styles from './Button.module.css';
<button className={styles.btn}>Click</button>

编译后类名会变成类似 Button_btn__abc123，彻底隔离。建议新手直接上这个，省心。

---

性能与兼容性：别让用户体验掉链子

虽然 React 帮我们做了 Virtual DOM 优化，但乱写照样卡成 PPT。几点建议：

• 列表数据超过 100 项？考虑虚拟滚动（react-window）
• 频繁更新的状态，用 useMemo / useCallback 缓存
• 生产环境记得 build：npm run build，体积能小 80%

至于浏览器兼容性，CRA 默认支持到 IE11（虽然现在没人用了）。如果公司还在用老旧系统，记得检查 Babel 配置。

---

为什么 React 比我司的 Java Web 项目更“敏捷”？

说到这里，忍不住对比下我们现在的 Java 后台管理系统：JSP + jQuery + 手动拼 HTML。每次改个页面，要重启 Tomcat，等 2 分钟。而 React 改完保存，浏览器秒级热更新——开发体验差距太大了。

更别说组件复用、状态管理、TypeScript 支持……现代前端工具链简直是对生产力的降维打击。

当然，我也知道不能盲目追新。我们线上核心交易系统还是稳稳的 Java + Oracle，毕竟“稳定压倒一切”。但新项目、内部工具，完全可以试试 React。技术选型就像穿衣——上班穿正装（Java），下班穿潮牌（React），各得其所。

---

结语：凌晨三点的成就感

写完这个简单的计数器应用，已经是凌晨 3 点。虽然功能简单，但看着页面流畅响应、代码结构清晰，心里还是有点小骄傲。更重要的是，我终于跨过了 React 的门槛。

接下来打算用 React + TypeScript 重写一个刷题网站的前端界面（LeetCode 风格），顺便练手。跳槽面试时也能说：“我不仅会背八股文，还能手撸 React 项目。”

如果你也是从 Java 或其他后端语言转向前端，别怕。React 的学习曲线前期陡峭，但一旦理解“状态驱动 UI”的核心思想，后面就越来越顺。记住：每一个复杂的 SPA，都是从 npx create-react-app 开始的。

最后送大家一句我贴在显示器边的话：

“代码不会背叛你，除非你忘了加分号。” 😏

共勉。

---

工具/概念	推荐指数	适合场景
create-react-app	⭐⭐⭐⭐	新手入门、中小型项目
Vite	⭐⭐⭐⭐⭐	追求极速启动、现代浏览器项目
Next.js	⭐⭐⭐⭐	SSR、SEO 友好、大型应用
Remix	⭐⭐⭐	新兴框架，关注数据流和路由模型

本文所有代码已上传 GitHub：github.com/yourname/react-starter（伪链接，别点）
实际项目请自行创建 repo，别偷懒！

---

P.S. 如果你也在深夜 coding，欢迎留言交流。说不定下次加班，咱俩能在 Stack Overflow 上偶遇呢 😉