React入门教程：从安装到第一个应用——一个成都北漂程序员的深夜实战笔记
作者：老张，32岁，成都某外包公司前端工程师，背着4000块月供的房贷，每天挤地铁通勤2小时。月薪15k，房租3500，老婆刚怀上二胎。
上周五晚上9点47分，我瘫在出租屋的二手宜家沙发上，左手端着泡面，右手划拉着手机。老婆在里屋轻声哄孩子睡觉，客厅只有风扇嗡嗡作响。突然，钉钉弹出一条消息：“下周三前交付新后台管理页面，技术栈必须用React。”
我差点把面汤洒在键盘上。
不是因为React多难——其实我早就想学了——而是因为时间真的不够用。白天写业务代码，晚上带娃，周末还得去售楼部问房贷进度。去年十月跳槽时HR说“技术栈自由”，结果现在又来这套。
但我知道，不能再拖了。成都这行当，会Vue的遍地走，懂React的才能涨薪。上个月猎头问我：“React项目经验有吗？”我支支吾吾说了句“了解过”，对方秒回：“那先挂了。”那一刻，我真的焦虑得睡不着。
于是，咬牙决定：这个周末，死磕React，跑通第一个应用。
第一步：别被“安装”吓住
很多人一上来就卡在环境配置，我也差点放弃。
以前试过 create-react-app，结果npm install 半小时没完，电脑风扇狂转，隔壁邻居以为我在挖矿。这次我学聪明了——直接用 Bolt.new。
啥是Bolt.new？简单说，就是Vercel推出的“零配置”React启动器。打开浏览器，输入 https://bolt.new，选React模板，点“Create”，几秒就给你生成一个在线可运行的项目，连Node.js都不用装。
我凌晨1点偷偷试了下（老婆睡了，不敢开大灯），界面清爽得像苹果发布会PPT。点几下，自动推送到GitHub仓库，还能一键部署。最关键的是——快。比我煮泡面还快。
内心OS：早知道有这玩意儿，去年何必折腾Webpack配到凌晨三点？
当然，本地开发还是得装环境。但这次我不再盲目 npm install -g create-react-app。我用了 pnpm（比npm快3倍，省磁盘空间），命令就一行：
pnpm create vite my-react-app --template react-ts
两分钟搞定。连我这台2018年的MacBook Air都没卡。
第二步：写个“能跑”的东西，别追求完美
很多人学React，一上来就想搞状态管理、路由、TypeScript全栈，结果三天后放弃。
我的策略很简单：先让页面动起来，哪怕只是显示“Hello, 成都”。
新建一个组件 SalaryTracker.jsx（名字很真实，毕竟我天天算到手工资）：
export default function SalaryTracker() {
return (
<div>
<h1>房贷计算器 v0.1</h1>
<p>月供：4000元</p>
<p>房租：3500元</p>
<p>剩余：...算了不看了</p>
</div>
);
}
然后在 App.jsx 里引入它。保存，浏览器自动刷新——成了！
那一刻，我居然有点小激动。不是因为代码多牛，而是我终于跨过了“从0到1”的心理门槛。
这时候，我打开了 ChatGPT（别笑，真香）。不是让它写完整项目，而是问：“React函数组件怎么用useState管理表单输入？”它秒回示例代码，还带注释。我复制粘贴改改，立马能用。
注意：别依赖AI写业务逻辑，但拿来查API、解语法，效率翻倍。
第三步：性能优化？先别想太多
很多教程一上来就讲“useMemo”、“useCallback”、“React.memo”，搞得新手以为不用这些就会OOM。
说实话，在我这个阶段，过度优化是浪费时间。
我的第一个应用，就三个组件，数据全是写死的。但为了“显得专业”，我还是加了个loading动画——结果发现首屏加载慢了0.3秒。后来删了，页面反而更流畅。
真正的性能瓶颈在哪？在我那台破电脑的SSD上。所以，我做了两件事：
- 用
vite而不是webpack（开发服务器快5倍） - 所有依赖走国内镜像源（淘宝npm）
至于代码层面？等项目真有1000个组件再说吧。现在，能跑就行，能跑就能谈薪资。
第四步：善用工具，但别被工具绑架
学React的过程中，我试了几个新玩意儿，其中 Amazon Q 让我眼前一亮。
装上VS Code插件后，选中一段报错代码，按 Cmd+K，它直接告诉我：“你忘了在useEffect里return清理函数，可能导致内存泄漏。” 还附带修复建议。
但我也发现一个问题：工具越智能，人越懒。
有次我让Amazon Q帮我重构一个组件，它用了Context + useReducer，结果代码复杂度飙升。我老婆看了直摇头：“你这不是把泡面煮成佛跳墙了吗？”
对啊，我只是想做个简单的表单，干嘛上全家桶？
所以现在我的原则是：
- 简单任务：自己写，练手感
- 复杂问题：问AI，看思路
- 生产代码：手动review，绝不盲信
第五步：把代码扔到GitHub，逼自己坚持
很多人学技术，代码只存在本地文件夹，最后变成“数字垃圾”。
我把项目推到了GitHub，设为public，还写了README：
“一个成都程序员的React初体验。目标：三个月内接到React外包单，补贴奶粉钱。”
没想到，第二天就有两个star。一个是我前同事，另一个是陌生人留言：“兄弟，加油，我也在成都，刚被裁。”
那一刻，我突然觉得——我不是一个人在战斗。
GitHub不只是代码托管，更是你的技术履历。HR筛简历时，看到你有活跃的React项目，哪怕只有50行，也比“熟悉React”四个字强十倍。
真实感悟：技术不是救世主，但能给你选择权
写到这里，已经是周日凌晨2点。孩子醒了，哭了几声，老婆轻声安抚。我关掉编辑器，默默喝了口凉透的茶。
回顾这一周，我其实只做了三件事：
- 用Bolt.new快速启动项目
- 写了一个超简单的组件
- 把代码传到GitHub
但就是这三步，让我从“React恐惧症”变成了“React实践者”。
我知道，离真正接项目还差得远。TypeScript还没深挖，测试也没写，部署流程也不熟。但没关系——先完成，再完美。
在这个月薪15k、房租3500的城市，我没法辞职脱产学半年。我只能利用深夜和周末的碎片时间，一点点往前挪。
但每挪一步，我就离“选择权”近一点。也许下个月，我能接个小React私活，赚3000块；也许年底面试时，我能理直气壮说“我有React项目经验”；也许……房贷压力能稍微松一点。
给同样处境的朋友几点建议
- 别等“准备好”再开始。我房贷还没还清，孩子还没断奶，但照样学React。完美主义是行动力的敌人。
- 善用现代工具，但保持清醒。Bolt.new、ChatGPT、Amazon Q都是杠杆，但别让它们替你思考。
- 把学习过程公开化。发GitHub、写博客、甚至发朋友圈，外部监督比自律更可靠。
- 接受“低质量启动”。第一个React应用可以丑、可以慢、可以只有10行代码——只要它能跑。
- 记住：你不是在学React，你是在为自己争取更多可能性。
最后，我想对那个去年十月在面试间里支支吾吾的自己说：
“别怕，慢慢来。成都的房价不会因为你晚学React就跌，但你的机会，会因为你早一天动手而多一分。”
共勉。
—— 老张，于成都温江出租屋，2024年6月
评论 0