React入门教程：从安装到第一个应用 —— 一个双休国企程序员的实践手记

上周五下午四点半，我正打算关掉 Vim，泡杯碧潭飘雪，准备迎接又一个成都式悠闲周末。结果产品经理小王突然冒出来：“老张，咱们那个内部审批系统的前端能不能重构一下？现在用 jQuery 写得跟意大利面条似的，新来的实习生看一眼就哭了。”

我叹了口气，心想：又来了。但转念一想，反正我们部门 deadline 向来“弹性”——毕竟在成都这家节奏堪比茶馆的国企，项目延期三天顶多被请喝一顿火锅。而且领导最近也在推技术栈升级，说要“拥抱现代化前端”。行吧，那就试试 React 吧。

虽然我平时主要搞后端架构和数据库优化（毕竟在国企，系统稳定压倒一切），但前端这块也不能完全甩锅给外包。况且，React 现在都快成行业标配了，再不学点皮毛，下次团建打王者荣耀我连辅助都当不好（别问，问就是团队梗）。

于是，就有了这篇 React 入门实战记录。不是那种照搬官网文档的复读机教程，而是我这个 Vim 党 + 国企码农 在真实环境中踩坑、填坑、最终跑通第一个 React 应用的全过程。希望能帮到像我一样“被迫成长”的同学。

---

为啥选 React？而不是 Vue 或 Svelte？

先说清楚：我不是 React 原教旨主义者。在我们团队内部，Vue 的拥护者其实更多——毕竟上手快、文档友好，特别适合我们这种偶尔才碰前端的“兼职选手”。

但这次选 React 主要有三个现实原因：

1. 公司技术路线图明确：今年 Q3 的技术评审会上，CTO 亲自拍板“新项目优先使用 React”，理由是“生态成熟、人才储备多、利于长期维护”。
2. TypeScript 集成更顺畅：我们后端已经全面 TS 化，React 的类型支持比 Vue 2（对，我们还在用 Vue 2！）强太多。
3. 我自己想跳槽（嘘，别声张）：最近刷招聘网站发现，80% 的中高级前端岗都要求 React 经验。为了简历好看，硬着头皮也得上。

所以，别纠结“哪个框架最好”，能让你老板满意、简历加分、线上不出事的框架，就是好框架。

---

环境搭建：别被 Webpack 吓退

作为一个常年 vim + gcc + make 的老派程序员，我对现代前端工程化工具链一度非常抗拒。记得去年双11期间，隔壁组用 Create React App 搞了个促销页，结果 build 出来 5MB 的 JS 文件，运维差点拿拖鞋抽人。

但时代变了。现在官方推荐的 Vite 真香！启动速度飞快，配置极简，连我这种讨厌配置文件的人都能接受。

安装步骤（实测于 macOS + Node 18）

# 先确保你有 node 和 npm（别用太老的版本）
node -v  # 我用的是 v18.17.0
npm -v   # 9.x 起步

# 使用 Vite 创建 React + TypeScript 项目
npm create vite@latest my-first-react-app -- --template react-ts

cd my-first-react-app
npm install
npm run dev

打开浏览器访问 http://localhost:5173，看到那个旋转的 React logo，我差点感动哭——这可比当年配 Webpack 快了十倍！

💡 小贴士：如果你在公司内网，可能要配代理。我们这边因为用了奇奇怪怪的 CA 证书，还得加 --host 0.0.0.0 才能让手机调试。

---

写第一个组件：告别“全局变量地狱”

以前用 jQuery，页面逻辑全靠 $(document).ready() 里塞函数，状态管理靠 window.xxx，测试？不存在的。上线前 QA 报 bug：“点击 A 按钮后 B 按钮没反应”，我只能手动模拟操作十几次，最后发现是因为某个 setTimeout 没清理。

React 的核心思想——组件化 + 单向数据流——正好治这种“状态混乱症”。

我写了个最简单的审批状态展示组件：

// src/components/ApprovalStatus.tsx
import { useState } from 'react';

export default function ApprovalStatus() {
  const [status, setStatus] = useState<'pending' | 'approved' | 'rejected'>('pending');

  const handleApprove = () => setStatus('approved');
  const handleReject = () => setStatus('rejected');

  const getStatusText = () => {
    switch (status) {
      case 'approved': return '✅ 已通过';
      case 'rejected': return '❌ 已驳回';
      default: return '⏳ 审批中';
    }
  };

  return (
    <div className="approval-card">
      <h2>当前状态</h2>
      <p>{getStatusText()}</p>
      {status === 'pending' && (
        <div>
          <button onClick={handleApprove}>通过</button>
          <button onClick={handleReject}>驳回</button>
        </div>
      )}
    </div>
  );
}

然后在 App.tsx 中引入：

// src/App.tsx
import ApprovalStatus from './components/ApprovalStatus';

function App() {
  return (
    <div className="app">
      <header>内部审批系统</header>
      <main>
        <ApprovalStatus />
      </main>
    </div>
  );
}

跑起来，点击按钮，状态实时更新——没有 DOM 操作，没有全局变量，逻辑清晰得让我怀疑人生。这不比写一百行 $('#btn').on('click', ...) 强？

---

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

当然，过程不可能一帆风顺。以下是我在周五下班前 1 小时遇到的几个典型问题：

1. “React is not defined” 错误

报错信息：

Uncaught ReferenceError: React is not defined

原因：Vite 默认使用 React 18 的新 JSX 转换（自动导入 jsx-runtime），但如果你手写了 import React from 'react'，反而会冲突。

解决方案：直接删掉 import React from 'react'！现代 React 不需要它了。

🤦‍♂️ 自嘲一下：我因为习惯性加上这行，浪费了 20 分钟查文档。老程序员的肌肉记忆，有时候真是毒药。

2. 样式不生效

我写了个 .approval-card，但页面毫无变化。

排查步骤：

• 检查是否忘了 import './ApprovalStatus.css'
• 检查 CSS 选择器是否被其他样式覆盖
• 最后发现：Vite 默认不处理 CSS modules，除非文件名带 .module.css

改成这样就 OK 了：

import styles from './ApprovalStatus.module.css';

// 使用时
<div className={styles.approvalCard}>

3. 热更新失效

改了代码，浏览器没刷新。重启 dev server 才生效。

根因：我在 Vim 里用 :w 保存，但某些终端（比如公司老旧的 SecureCRT）会触发多次文件写入事件，导致 Vite 监听器混乱。

临时方案：切换到 VS Code（虽然我不爱用 IDE，但为了效率忍了）。长期方案？等 IT 部门升级终端软件……（估计要等到我退休）

---

性能与兼容性：国企也不能太摆烂

虽然我们系统只在 Chrome 内网使用，但该做的优化一点不能少。毕竟上次因为内存泄漏，服务器半夜 OOM，值班同事在群里发了 20 个“🔪”表情。

关键实践：

优化点	做法	效果
懒加载组件	React.lazy(() => import('./HeavyComponent'))	首屏加载快 40%
避免内联回调	用 useCallback 包裹事件处理器	减少子组件无谓重渲染
图片压缩	所有资源走公司 CDN + WebP 格式	流量下降 60%
错误边界	ErrorBoundary 捕获组件级异常	不再整个页面白屏

另外，务必在 package.json 里加上 browserslist，否则打包出来的代码可能在 IE11（对，我们还有 IE 用户！）上直接报语法错误：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "Chrome >= 70",
    "Firefox >= 68",
    "Edge >= 79"
  ]
}

---

调试技巧：Vim 党的倔强

虽然不用 VS Code，但调试 React 还是有办法的：

1. React Developer Tools：浏览器插件必备，能看组件树、props、hooks 状态。
2. console.log 大法：在关键 useEffect 里打日志，配合 useDebugValue 自定义 hook 名称。
3. strict mode 双渲染：开发环境故意触发两次渲染，帮你提前发现副作用问题（比如重复请求）。

最骚的操作是我写了个 Vim 插件，一键在当前组件顶部插入 console.log('rendering', Date.now()) —— 别笑，实用主义才是国企程序员的生存之道。

---

结语：技术分享的意义

折腾完这个小 demo，已经是晚上七点。窗外成都的夜色温柔，玉林路的小酒馆刚亮起灯。我提交代码，push 到 GitLab，顺手在团队 wiki 里写了这篇总结。

有人问我：“国企程序员搞这些新技术有啥用？反正系统能跑就行。”

但我觉得，技术分享不是为了炫技，而是为了让明天的自己少加班。今天花两小时学 React，未来可能避免三天的 jQuery 修 Bug；现在写清楚文档，以后实习生接手不会骂娘。

更重要的是，在这个双休不加班、节奏舒服的城市里，保持对技术的好奇心，才是对抗职业倦怠的良药。

所以，别管你是被产品经理逼的，还是为了跳槽镀金，动手写点代码，总比刷短视频强。

共勉。

P.S. 本文所有代码已上传内网 GitLab，路径：/frontend/react-starter-kit。欢迎提 PR，但别改我的 Vim 配置文件（.vimrc 里可是有我十年功力）。