React入门教程：从安装到第一个应用 —— 一个刚升组长的前端老油条的碎碎念

上周五晚上十点半，我正瘫在工位上调试一个诡异的 CSS-in-JS 渲染错乱问题（别问，问就是产品经理临时加了个“微调”需求），手机突然震动。是我们组新来的小张：“哥，React 到底怎么搭环境啊？我 npm install 安了一堆包，结果项目跑不起来，报 Cannot find module 'react'……”

我叹了口气，点开他发来的终端截图——好家伙，node_modules 都快比我的租房押金还厚了，结果连个 Hello World 都没跑通。那一刻我突然意识到：虽然 React 现在已经是前端界的“空气和水”，但对于真正零基础的新手来说，光是把项目跑起来这一步，就已经能劝退一半人了。

毕竟，我也不是天生就会写 hooks 的。五年前刚入职那会儿，我还是个只会用 jQuery 操作 DOM 的“原始人”。直到去年我们团队接了个区块链相关的 Web3 产品原型，要求快速迭代、组件化强、还能无缝对接钱包 SDK——领导拍板：“上 React，两周出 demo。” 我当时内心 OS：React？不就是那个 Facebook 出的库吗？能有多难？

结果第一周我就在配置 webpack 和 babel 中迷失了自我，差点以为自己要转行去送外卖。

---

为什么是 React？别被“区块链”吓到

先澄清一点：这篇文章虽然提到了“区块链”，但你完全不需要懂区块链也能学会 React。之所以提它，是因为我们最近做的一个内部创新产品——一个基于以太坊的 NFT 铸造平台（对，就是那种“数字小图片”），前端技术栈清一色 React + TypeScript + Web3.js。

产品经理画的原型图里动不动就“实时同步链上状态”、“支持多钱包切换”、“Gas 费动态预估”……这些需求要是用原生 JS 写，怕不是得写到明年双11。而 React 的声明式 UI和组件化思想，让这类复杂交互变得可维护、可测试、甚至……可读（对，我说的就是你，三年前写的 callback 地狱）。

所以，React 不是什么“高大上”的黑科技，它就是一个帮你少写 bug、早点下班的工具。尤其当你开始带人之后，你会发现：统一技术栈 = 统一沟通语言 = 少背锅。

---

从零开始：别再手动配 webpack 了！

回到小张的问题。现在都 2024 年了，没人应该再手写 webpack 配置来启动 React 项目（除非你是 webpack 核心贡献者，或者想给自己找罪受）。

官方早就给了终极答案：Create React App (CRA)。虽然社区现在流行 Vite，但对于纯新手，CRA 依然是最稳的选择——开箱即用，零配置，连 ESLint 和 Prettier 都给你配好了。

第一步：确认你的 Node.js 版本

node -v
# 建议 >= 18.x（LTS）
npm -v
# 建议 >= 8.x

如果你还在用 Node 14（别笑，我们运维上周还在线上发现一个服务跑着 Node 12），赶紧升级！不然装包时各种 peer dependency 报错能让你怀疑人生。

吐槽时间：我们公司有个“历史遗留项目”，Node 版本锁死在 10.x，每次新同学接手都得单独配个 nvm 环境。运维大哥说：“别动，线上跑得好好的。” —— 好吧，我闭嘴。

第二步：创建项目

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

看到 Local: http://localhost:3000 就说明成功了！浏览器自动打开，经典的 React 旋转 logo 出现——恭喜，你已经跨过了 80% 新手的第一道坎。

VSCode 插件推荐（我的插件列表都快 50 个了）：

• ES7+ React/Redux/... Snippets：打 rfc 自动补全函数组件
• Prettier - Code formatter：保存自动格式化，拯救代码洁癖
• Import Cost：实时显示 import 的包大小，防“不小心引入整个 lodash”

---

写你的第一个组件：别只写 Hello World

默认的 App.js 太无聊了。让我们来点有“产品感”的东西——比如一个区块链地址展示器（假装我们在做 Web3 产品）。

// src/components/WalletDisplay.jsx
import React from 'react';

const WalletDisplay = ({ address }) => {
  // 简单处理：显示前6位 + ... + 后4位
  const formatAddress = (addr) => {
    if (!addr) return 'Not connected';
    return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
  };

  return (
    <div style={{
      padding: '16px',
      backgroundColor: '#f5f5f5',
      borderRadius: '8px',
      fontFamily: 'monospace', // 区块链地址就得用等宽字体！
      fontSize: '14px'
    }}>
      <strong>Your Wallet:</strong> {formatAddress(address)}
    </div>
  );
};

export default WalletDisplay;

然后在 App.js 中使用：

// src/App.js
import React, { useState, useEffect } from 'react';
import WalletDisplay from './components/WalletDisplay';
import './App.css';

function App() {
  const [walletAddress, setWalletAddress] = useState('');

  // 模拟从钱包 SDK 获取地址（实际项目中会调用 MetaMask 等）
  useEffect(() => {
    // 假设这是从区块链钱包拿到的地址
    const mockAddress = '0x742d35Cc6634C0532925a3b8D4C9db96C0b21E37';
    setWalletAddress(mockAddress);
  }, []);

  return (
    <div className="App" style={{ padding: '20px' }}>
      <h1>My Web3 Product Demo</h1>
      <WalletDisplay address={walletAddress} />
    </div>
  );
}

export default App;

刷新页面，你会看到一个格式化的钱包地址。虽然只是静态数据，但组件化思维已经体现出来了：WalletDisplay 只关心“怎么展示地址”，不关心“地址从哪来”。

---

关于“产品”和“工程化”的一点思考

很多新人觉得：“我只要功能跑起来就行，管他什么架构、什么代码质量。” —— 直到他被叫去改三个月前自己写的代码，发现连 state 放哪都不记得了。

React 的核心价值，从来不是“能做什么”，而是“让复杂的东西变得简单维护”。

比如我们那个 NFT 铸造平台，最初 MVP 只有一个 mint 按钮。但随着产品迭代，加入了：

• 链上状态监听（pending / success / failed）
• Gas 费估算
• 多网络切换（Ethereum / Polygon）
• 用户操作历史记录

如果用原生 JS，这些逻辑会散落在各个 onclick 里。但在 React 中，我们通过自定义 Hook（比如 useBlockchainStatus）把逻辑抽离，组件只负责渲染。测试？Mock 一下 Hook 返回值就行。

真实事故回顾：上个月上线前，测试发现用户切换网络后，Gas 费没更新。排查发现是因为某个组件直接读取了全局 window.ethereum 对象，而不是通过 context。重构后，问题消失。那一刻我深刻体会到：好的抽象 = 少加班。

---

性能与兼容性：别只顾功能

虽然 CRA 默认做了很多优化（比如 code splitting、gzip），但作为技术组长，我必须提醒几点：

1. 别在 render 里定义函数或对象
   每次 re-render 都会创建新引用，导致子组件不必要的更新。

   // ❌ 危险！
   <Child onClick={() => doSomething()} />
   
   // ✅ 正确
   const handleClick = useCallback(() => doSomething(), []);
   <Child onClick={handleClick} />
   

2. 浏览器兼容性
   CRA 默认支持到 IE11（虽然我们早就不 care 了），但如果你用到了新语法（比如 optional chaining ?.），记得检查 .browserslistrc。

3. 开发体验 > 一切
   我们团队规定：所有新项目必须开启 React DevTools 的 Highlight Updates 功能。谁要是写出频繁 re-render 的组件，团建请奶茶。

---

最后：React 只是起点

学完这篇，你能跑起项目、写组件、用 state 和 effect —— 但这只是 React 的冰山一角。真正的挑战在于：

• 如何设计可复用的组件 API？
• 如何管理跨组件状态（Context vs Redux vs Zustand）？
• 如何做性能 profiling？

不过别慌。我刚晋升组长那会儿，也以为自己啥都得会。后来发现，带团队的核心不是技术多牛，而是知道什么时候该用什么工具，以及怎么让队友少踩坑。

所以，如果你刚接触 React，别被“区块链”、“微前端”、“Server Components”这些词吓到。先跑通一个应用，再慢慢深入。就像我司 PM 常说的：“先做出个能点的按钮，剩下的我们边做边改。”

---

附：常用命令速查表

场景	命令
创建新项目	npx create-react-app my-app
启动开发服务器	npm start
构建生产包	npm run build
运行测试	npm test
检查代码规范	npm run lint

---

写完这篇已经是凌晨一点。窗外上海的写字楼还有几盏灯亮着，不知道是不是又有哪个倒霉蛋在修线上 bug。希望这篇文章能帮小张（以及正在看的你）少熬几个夜。

记住：代码写不好可以改，头发掉了可长不回来。早点学会 React，早点准时下班，多陪陪家人——这才是技术人的终极 KPI。

（完）

作者注：本人坐标上海，某不知名互联网公司技术组长，日常在 VSCode 和 Jira 之间反复横跳。欢迎交流，但别问我怎么配 webpack，我真的会哭。