React入门教程：从安装到第一个应用
上周五晚上九点半，我还在深圳家里远程办公，一边啃着老婆点的外卖肠粉，一边改一个微信小程序的样式 bug。产品经理又在群里@我说：“这个按钮点击反馈不够明显，用户可能以为没点成功。” 我叹了口气——这需求听起来简单，但要兼顾体验、性能、兼容性，真不是三两行代码的事。
突然想起半年前我刚被安排转岗做部分 H5 页面开发时，连 React 是啥都搞不清楚。现在虽然能用，但总觉得自己是“会用但不懂原理”的野路子。加上最近看招聘网站上“熟悉 React”几乎成了前端岗标配，连我们部门新来的实习生都在 GitHub 上 star 了一堆 React 相关的开源项目……得，看来是时候系统梳理一下了。
于是趁着周末娃睡午觉，我决定从零搭一个 React 应用，顺便写篇教程。一来巩固基础，二来万一哪天面试被问“说说 React 生命周期”不至于当场社死（别笑，真有同事去年跳槽面字节就被问懵了）。
装环境：别让 node_modules 拖垮你的 SSD
React 官方推荐用 Create React App（简称 CRA），一行命令搞定：
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
看到 Local: http://localhost:3000 就说明跑起来了！但别高兴太早——我第一次跑的时候，因为公司网络策略限制，下载依赖慢得像区块链交易确认（对，就是那种等了十分钟还没上链的感觉）。后来换成淘宝镜像才救回来：
npm config set registry https://registry.npmmirror.com
💡 小贴士：如果你和我一样在家办公、网速不稳定，建议提前装好 Yarn，它比 npm 更快更稳，尤其在处理大型依赖树时。我们团队现在内部项目基本都切 Yarn 了。
启动后你会看到经典的 React 旋转原子 logo。这时候别急着删代码，先打开开发者工具看看——React DevTools 装了吗？没装的话去 Chrome 商店搜一下，这是调试 React 组件的神器。我上次排查一个状态更新不触发 re-render 的问题，全靠它定位到某个 context 没正确传递。
写点东西：别只写 “Hello World”
光显示个标题太无聊。既然我在做小程序相关业务，不如模仿一个简单的任务列表界面，毕竟我们内部管理后台就长这样（UI 设计师看了可能会打人，但功能优先嘛）。
修改 src/App.js：
import React, { useState } from 'react';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTask = () => {
if (inputValue.trim()) {
setTasks([...tasks, { id: Date.now(), text: inputValue }]);
setInputValue('');
}
};
return (
<div className="App">
<h1>我的待办清单</h1>
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="输入任务..."
onKeyPress={(e) => e.key === 'Enter' && addTask()}
/>
<button onClick={addTask}>添加</button>
</div>
<ul>
{tasks.map(task => (
<li key={task.id}>{task.text}</li>
))}
</ul>
</div>
);
}
export default App;
这段代码用了 React 最核心的 Hook —— useState。说实话，刚从 class component 切过来时我也很不适应，总觉得“函数怎么能存状态”。但用熟了才发现真香：逻辑更集中，测试也更容易。
不过要注意一点：别直接修改 state！比如你写 tasks.push(newTask)，页面不会更新。必须用 setTasks([...tasks, newTask]) 这种不可变方式。我上线前就踩过这个坑，测试环境没问题，生产环境死活不渲染，最后发现是误用了 mutable 操作。
调试与优化：别等线上炸了才后悔
本地跑得好好的，不代表线上没问题。我们团队有个血泪教训：去年双11期间，一个 H5 活动页因为没做列表虚拟滚动，iPhone 8 用户一加载就卡死。后来紧急回滚，CTO 在群里发了个 😳 表情包，场面一度非常尴尬。
所以哪怕只是 demo，也要考虑性能。比如上面的任务列表，如果未来可能上千条，就得上 react-window 或 useMemo 优化。另外，别忘了加错误边界（Error Boundary）——虽然新手教程很少提，但在真实项目里，防止一个组件崩溃导致整个页面白屏是基本素养。
至于浏览器兼容性？CRA 默认支持到 IE11（虽然现在没人用了），但如果你公司还有老系统要维护，记得检查 .browserslistrc 文件。我们有个政府项目就硬性要求支持 Edge Legacy，每次 build 都要多花 3 分钟转译，心累。
关于“区块链”的强行关联（别打我）
你可能会问：标题里不是有“区块链”吗？怎么到现在都没出现？
咳咳……其实是我为了凑关键词硬塞的（手动狗头）。不过认真说一句：虽然 React 和区块链八竿子打不着，但如果你真想用 React 做 DApp（去中心化应用），比如连接 MetaMask、读取智能合约状态，那这套基础就特别重要。我 GitHub 上就 fork 过一个用 React + web3.js 做 NFT 展示的项目，代码结构和普通 React 应用几乎一样，只是多了钱包交互逻辑。
所以说，技术栈底层逻辑是相通的。掌握 React，等于拿到了 Web3 开发的入场券之一——虽然我本人对炒币敬而远之，但技术本身值得学。
总结：别怕开始，但要持续深入
从安装到跑起第一个应用，其实不到半小时。但真正难的是理解“为什么这么设计”。比如：
- 为什么 React 要用虚拟 DOM？
- useEffect 的依赖数组怎么写才安全？
- Context 和 Redux 什么时候该用哪个？
这些问题，光看教程是不够的。建议你：
- 多读官方文档（英文版更新更快）
- 看 React GitHub 仓库 的 issue 讨论
- 遇到面试题别死记硬背，试着自己实现一个 mini React
我自己就是靠翻源码搞懂了 reconciliation 算法，虽然工作中用不到，但面试聊起来底气足多了（而且显得很 geek，产品经理都对我高看一眼 😎）。
最后送大家一句我们 leader 常说的话：“技术债可以欠，但不能赖。” 基础不牢，地动山摇。React 看似简单，水却很深。与其临阵磨枪，不如每天花 30 分钟扎实学一点。
好了，教程就到这里。我去给娃换尿布了——程序员的生活，一半是代码，一半是生活。下次见！
| 工具/概念 | 推荐指数 | 适用场景 |
|---|---|---|
| Create React App | ⭐⭐⭐⭐☆ | 快速原型、中小型项目 |
| Vite | ⭐⭐⭐⭐⭐ | 追求极速 HMR 的新项目 |
| Next.js | ⭐⭐⭐⭐☆ | 需要 SSR/SEO 的企业级应用 |
| Remix | ⭐⭐⭐☆☆ | 对路由和数据加载有高要求 |
注：以上内容基于我个人在腾讯做微信小程序及 H5 业务的经验总结，如有偏差，欢迎在评论区拍砖（但别人身攻击，我玻璃心）。
评论 0