React入门教程：从安装到第一个应用——一个老广程序员的深夜自白
去年十月的一个晚上，11点47分，我坐在越秀区旧楼5楼的小书房里，台灯照着发烫的MacBook Pro，窗外是熟悉的恩宁路夜市收摊的声音。老婆在隔壁房间轻声哄娃睡觉，而我，正盯着屏幕上一行报错信息：
Module not found: Can't resolve 'react' in '/Users/chen/workspace/my-first-app'
那一刻，我差点把键盘砸了。
不是因为这行错误本身有多难——毕竟干了6年大厂开发，React也算熟面孔。而是因为，就在三周前，我被裁了。
被裁那天，我还在改一个“微不足道”的bug
那是2023年9月15日，周五下午3点，HR约我在公司楼下星巴克见面。一杯美式，一张N+1的补偿单，一句“公司战略调整”。我的工龄刚好5年8个月，算下来能拿8.5个月工资——约18.7万。不算差，但也不够撑太久。广州房租3500，房贷6800，孩子早教每月2200……数字像算法里的时间复杂度一样，压得人喘不过气。
回家路上，老婆打来电话：“老公，听说你们部门……？”
我没敢说，只回了句：“可能要换家公司了。”
那晚，我翻遍了所有招聘网站。岗位要求清一色写着：“熟练掌握React”、“有大型React项目经验”、“熟悉Hooks、Context、Redux”……而我过去三年主要写的是Vue + Node.js。虽然Javascript基础扎实，也啃过《算法导论》（面试时被问过快排和红黑树），但React？说实话，只是“用过”，不是“会用”。
重拾React，从“Hello World”开始
于是，就有了开头那个深夜的崩溃时刻。
我决定从零开始，重新学一遍React。不是为了炫技，是为了活下去。
第一步：环境搭建，别被Webpack吓跑
很多人卡在第一步：怎么装React？网上教程五花八门，有的让你用Create React App，有的推Vite，还有人直接手搓Webpack配置。作为一个经历过“jQuery时代”、“Angular 1地狱”、“Vue崛起”的老程序员，我劝你：别折腾环境。
就用官方脚手架，简单粗暴：
npx create-react-app my-first-app
cd my-first-app
npm start
两分钟，本地http://localhost:3000跑起来一个旋转的React logo。那一刻，我居然有点感动——就像当年第一次在IE6里跑通Ajax那样。
小贴士：别一上来就学Webpack、Babel、ESLint。先让代码跑起来，再慢慢拆解。就像煮云吞面，先学会下锅，再研究汤底配方。
第二步：理解“组件”——React的灵魂
我打开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>
);
}
这时候我才真正体会到React的核心思想：一切皆组件。
以前写jQuery，DOM操作满天飞；写Vue，靠指令和双向绑定。而React，就是把UI拆成一个个函数或类，每个函数返回一段JSX（其实就是JavaScript + XML的语法糖）。
我试着写了个最简单的组件：
function Greeting({ name }) {
return <h1>你好啊，{name}！老广靓仔！</h1>;
}
// 在App里用
function App() {
return (
<div>
<Greeting name="阿强" />
</div>
);
}
页面上立刻出现：“你好啊，阿强！老广靓仔！”
那一刻，我笑了。原来React没那么可怕。
第三步：状态管理——useState是你的朋友
接下来，我加了个按钮，想实现点击计数：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
+1
</button>
</div>
);
}
注意这里用了useState——这是React Hooks的核心之一。它让函数组件也能拥有“状态”，不用再写class组件那一套繁琐的this.setState。
面试题预警：很多面试官会问：“useState 和 class 组件的 setState 有什么区别？”
答案很简单：useState的更新是替换，而setState是合并。而且useState支持函数式更新，避免闭包陷阱。
我当年面试字节时就被问过这题，答错了，挂在了二面。现在想想，要是早点理解这些细节，或许结局不同。
第四步：副作用处理——useEffect搞定异步逻辑
再进一步，我想加个功能：页面加载时自动获取天气（假装调API）：
import { useState, useEffect } from 'react';
function Weather() {
const [weather, setWeather] = useState('加载中...');
useEffect(() => {
// 模拟API请求
setTimeout(() => {
setWeather('今日晴，28°C，适合饮茶');
}, 1000);
}, []); // 注意这个空数组！
return <p>{weather}</p>;
}
关键在useEffect的第二个参数——依赖数组。传空数组 [] 表示“只在组件挂载时执行一次”，相当于class组件的componentDidMount。
这也是高频面试题：“useEffect 的依赖数组作用是什么？漏写会怎样？”
答案：漏写会导致闭包捕获旧状态，比如count永远是0。我见过太多新人栽在这上面。
从“会用”到“理解”：算法思维其实无处不在
你可能会问：学React和算法有啥关系？
还真有。
React的Diff算法（也叫Reconciliation）就是典型的树形结构对比优化。它通过O(n)的时间复杂度找出最小DOM更新路径，而不是暴力比对整棵树（那会是O(n³)）。这背后是计算机科学家们对递归 + 哈希 + 双指针的精妙运用。
而我们在写组件时，也要有算法思维：
- 列表渲染必须加
key，否则React无法高效复用节点； - 大量数据展示要用虚拟滚动，避免内存爆炸；
- 状态更新要考虑性能，别在render里做高复杂度计算。
甚至，我最近面试一家创业公司，技术面最后一题就是：“请手写一个React的简易版useState。”
我愣了三秒，然后笑着写下了：
let state;
function myUseState(initial) {
state = state === undefined ? initial : state;
function setState(newState) {
state = newState;
render(); // 假设有个render函数
}
return [state, setState];
}
面试官点点头：“不错，理解了闭包和状态保存。”
最后，我拿到了offer，月薪从15k涨到22k。虽然不如大厂，但团队氛围好，老板是潮汕人，每周五请大家吃牛肉丸。
给正在学React的你：慢一点，稳一点
写到这里，已经是凌晨1点。窗外安静了，孩子睡了，老婆留了碗糖水在桌上——是她煲的陈皮绿豆沙。
回想这几个月，从被裁的慌乱，到深夜debug的崩溃，再到如今能从容应对React项目，我最大的感悟是：
技术从来不是最难的，最难的是在焦虑中保持学习的节奏。
如果你现在也在学React，别怕。从create-react-app开始，写个计数器，做个待办列表，哪怕只是显示一句“Hello World”。每一个大厂前端，都是从这些小东西堆起来的。
别被那些“三天精通React源码”的毒鸡汤骗了。真正的成长，是在无数个像今晚这样的深夜，你一次次按下npm start，看着页面终于跑起来时，那种微小却真实的成就感。
最后几句真心话
React只是工具，Javascript才是根基。而算法，是你思考问题的方式。
面试题会变，框架会过时，但解决问题的能力永远不会贬值。
我现在带实习生，第一件事不是教他们用Redux，而是让他们手写一个防抖函数，或者解释闭包如何实现私有变量。因为我知道，这些底层能力，才是你在裁员潮中站稳脚跟的底气。
所以，别急着追新框架。先把Javascript吃透，把React的基础概念搞明白，把常见的面试题想清楚。剩下的，时间会给你答案。
对了，上周五晚上，我又去那家星巴克坐了坐。这次是和新公司的CTO谈期权。他问我：“为什么选我们？”
我说：“因为我还能写代码，还想写好代码。”
他笑了，说：“欢迎回来，程序员。”
愿你写的每一行代码，都不被辜负。
愿你熬的每一个夜，都有糖水收尾。
—— 一个住在广州老城区、爱吃肠粉、正在努力还房贷的老广程序员，于2024年春
评论 0