React入门教程：从安装到第一个应用 —— 一个30岁转行程序员的深夜独白
去年十月的一个周五晚上，我在武汉光谷软件园旁租的单间里，盯着屏幕上闪烁的光标发呆。房租3500，工资卡余额不到8000，老婆在老家带孩子，微信里刚发来一条消息：“你确定要辞职学编程吗？”
我回她：“再给我三个月，要是找不到工作，我就回去做运营。”
那时候我在一家本地电商公司做了五年运营，每天和KPI、转化率、用户画像打交道。虽然也能混个15k的月薪，但总觉得像在原地打转——产品改版我提建议，开发说“技术上实现不了”；活动上线我熬夜盯数据，最后功劳却算在产品经理头上。更糟的是，每次面试新工作，HR总会问：“你会不会点前端？至少懂点React吧？”
React？那是什么？泡面品牌吗？
从“运营狗”到“码农预备役”：我的第一行JSX
真正让我下定决心转行的，是一次内部转岗失败。那天下午，我和产品总监老张在茶水间碰头。他说：“小陈啊，你对业务理解不错，要不要试试转产品？不过……得会点技术，至少能看懂前端代码，不然跟开发沟通都是鸡同鸭讲。”
我硬着头皮点头，回家就搜“前端入门”。结果一搜吓一跳：HTML、CSS、JavaScript 还算眼熟，但什么 Vue、Angular、React 跟天书一样。朋友推荐我直接学 React——“现在大厂都在用，面试题挑战里八成都有它”。
于是，我花99元买了某平台的《React零基础速成课》，白天上班摸鱼看视频，晚上回家敲代码。但装环境这关就差点把我劝退。
“npm install -g create-react-app？啥是 npm？Node.js 又是什么？我的 Windows 为啥报错？”
折腾三天，终于在 WSL（Windows Subsystem for Linux）里跑通了第一个命令。那一刻我激动得差点叫出声——不是因为多厉害，而是终于感觉自己像个“程序员”了。
第一个 React 应用：一个会数数的按钮
按照教程，我创建了人生第一个 React 应用：
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
浏览器自动打开 localhost:3000，熟悉的蓝色 React logo 出现。我深吸一口气，打开 src/App.js，把默认内容删掉，手抖着敲下：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点我加一！
</button>
</div>
);
}
export default Counter;
保存，刷新。页面上出现一个按钮。我点了十几次，数字稳稳增长。那一刻，我忽然想起五年前第一次在Excel里写VLOOKUP成功的那种爽感——原来创造东西的感觉，真的会上瘾。
面试题挑战：当“运营思维”撞上“组件化思想”
学了一个月后，我鼓起勇气投了几份简历。果然，面试官一上来就问：
“说说 React 的核心思想？”
“useState 和 useEffect 的区别？”
“组件通信有哪些方式？”
我支支吾吾答得不好，但突然灵机一动，结合自己做运营的经历说：
“在我以前做活动页的时候，经常要把‘用户头像’‘优惠券状态’‘倒计时’这些模块复用。如果每个页面都重写一遍，效率太低。而 React 就像把每个功能拆成独立的‘积木’（组件），哪里需要就拼哪里——这不就跟我们做活动模板一个道理吗？”
面试官眼睛亮了一下，点点头：“嗯，有产品思维的人学前端确实有优势。”
这句话让我醍醐灌顶。原来我过去五年的运营经验，并不是废柴经历，反而成了理解 React 组件化、状态管理、复用逻辑的独特视角。
产品视角：为什么 React 能让“非技术人”也爱上开发？
后来我入职了现在这家 SaaS 公司，做内部工具的前端开发。上周和产品经理小林开会，她抱怨：“这个筛选条件改起来好麻烦，每次加个字段都要前后端联调。”
我笑着说：“下次我们用 React 写个动态表单组件，字段配置全放 JSON 里，你们产品自己就能改，不用求开发。”
她瞪大眼睛：“真的假的？”
我说：“React 的核心之一就是数据驱动视图。你给它数据，它自动渲染界面。只要把逻辑抽象好，非程序员也能‘配置’功能——这不就是你们产品经理梦寐以求的‘低代码’吗？”
她当场拍板：“那你下周做个 demo 给我看！”
那一刻我突然意识到：React 不只是工具，更是一种思维方式——把复杂问题拆解、封装、复用。 而这种思维，其实在运营、产品岗位早就潜移默化地培养过我。
吐槽时间：那些让我想砸键盘的坑
当然，学习过程绝非一帆风顺。举几个让我半夜抓狂的例子：
- Node 版本冲突：今天装个包要 Node 16，明天另一个要 Node 18，nvm 切来切去，差点卸载重装系统。
- 依赖地狱：
node_modules文件夹比我家冰箱还占地方，删了重装三次才跑起来。 - “它在我机器上是好的！”：本地完美运行，提交到 GitLab CI 直接报错，查了两天发现是大小写问题（Mac 不区分，Linux 区分）。
最崩溃的一次，是我写了个列表组件，点击删除某项，结果删错了。调试一小时才发现：key 值用了 index，导致 React 复用 DOM 出错。 从此我把“永远不要用 index 当 key”刻在了脑门上。
但正是这些坑，让我从“复制粘贴工程师”慢慢变成能看懂报错、会查文档、敢读源码的真·开发者。
从30岁开始，重新定义自己
现在回头看，转行做程序员，是我30岁做过最冒险但也最正确的决定。虽然起步晚，但过去的运营经验反而成了我的“隐藏技能”：
- 我知道用户真正关心什么（比如加载速度、错误提示友好度）；
- 我能和产品经理高效沟通，因为他们说的话我都听得懂；
- 我甚至能帮团队优化埋点方案——毕竟以前天天看数据报表。
上个月发薪日，工资条显示 22k。虽然比不上科班出身的同事，但比起做运营时的15k，已经足够让我在武汉安顿下来。更重要的是，每天下班不再觉得“今天又混过去了”，而是“我又搞定了一个小功能”。
给同样想转行的朋友几点真心话
如果你也像我一样，30岁左右，困在传统行业，想学 React 却不敢迈出第一步，我想说：
- 别怕年龄：程序员不是青春饭，经验+技术才是王炸。我同事里有35岁转行的前老师，现在带新人比谁都稳。
- 用你的旧经验赋能新技能：运营懂用户，产品懂流程，销售懂需求——这些都能转化成技术优势。
- 先做出来，再做完美：别纠结“该学 Vue 还是 React”，直接选市场主流的（React），做出东西比空想强一百倍。
- 面试题挑战是你的朋友：每天刷一道，坚持一个月，你会发现“原来我也可以答上来”。
最后：那个会数数的按钮，还在我的桌面上
现在我的开发机桌面，依然保留着那个最简陋的 Counter 应用。每次写复杂项目卡壳时，我就点开它，点几下按钮，看数字增长。
它提醒我：编程的本质，不是炫技，而是解决问题。 无论是做一个电商活动页，还是一个企业级后台，底层逻辑都一样——接收输入，处理状态，输出结果。
而 React，只是帮我更优雅、更高效地完成这件事的工具。
上周五晚上，我又在光谷软件园加班到九点。走出大楼，秋风吹得外套猎猎作响。路过楼下那家常去的牛肉粉店，老板笑着打招呼：“小陈，又这么晚啊？”
我点点头：“嗯，赶个需求。”
回家路上，我打开手机，给老婆发了条语音：“下个月，接你和孩子来武汉吧。房子看好了，两室一厅，离地铁近。”
这一次，我没有焦虑，没有犹豫。因为我知道，30岁不是终点，而是新故事的开始。
而我的第一个 React 应用，还在那里，静静地数着未来的每一天。
评论 0