React入门教程：从安装到第一个应用 —— 一个脱单程序员的代码人生
坐标上海浦东，合租第8个月，房租3500，女友在隔壁房间改PPT。
上周日，我终于用React跑通了第一个Hello World。
去年十月，我还是那个相亲App上划了快两年、简历投了上百份却始终卡在“前端初级”标签里的普通码农。月薪15k，住在杨浦一个老小区里，每天挤地铁两小时去张江，唯一的社交活动就是和同事点外卖时讨论“Vue好还是React香”。
转折点发生在一个周五晚上。那天我和现在的女友（当时还是相亲对象）在陆家嘴一家人均128的烤肉店见面——别笑，这已经是我在相亲预算里咬牙拔高的“高端局”了。她穿着米色针织衫，问我：“你是做IT的？具体做什么产品？”
我说：“写代码的，最近在学React。”
她点点头，没接话。但眼神里有一丝……困惑？或者说是礼貌性敷衍？那一刻我突然意识到：光会写代码不够，得让人看懂你在创造什么。
回家路上，地铁十号线晃得我心烦。我打开手机，翻到自己GitHub上那个空荡荡的仓库，连个README都没有。而她的朋友圈里，全是她在做的市场方案、用户调研、产品迭代——她是个产品经理。
那一刻我下定决心：我要做出一个能让她看懂、甚至觉得“哇，这还能这么玩？”的小产品。
于是，React学习计划正式启动。
第一步：别被“安装”吓退——我的Node.js血泪史
很多人一听到“React入门”，第一反应是：“要装Node吧？要配环境吧？我电脑会不会炸？”
去年十一月的第一个周末，我就栽在这上面。我在Windows 10上直接下了最新版Node.js，结果npx create-react-app my-app死活跑不通，报了一堆EACCES权限错误。折腾到凌晨两点，差点把笔记本砸了。
后来才知道，安全第一：千万别随便用sudo，也别乱改系统PATH。正确的做法是：
- 用官方LTS版本（不是最新版！），我当时选的是18.17.0；
- 别全局装太多包，
create-react-app现在官方都推荐用npx临时调用； - 国内用户加镜像源，不然npm install能等到你脱单又分手。
我最后是在WSL2（Windows Subsystem for Linux）里搞定的。虽然多花了一天配置Ubuntu子系统，但从此告别权限地狱。代码人生第一条：环境干净，心才不乱。
第二步：跑通第一个应用——Hello, 我的“产品”！
上周六下午，女友在客厅开腾讯会议，我在书房敲代码。窗外下雨，空调嗡嗡响，我深吸一口气，输入：
npx create-react-app hello-product
cd hello-product
npm start
浏览器自动弹出 http://localhost:3000，熟悉的蓝色React logo转了几圈，然后——
Hello, world!
我差点喊出声。但忍住了，怕打扰她开会。可手抖得不行，赶紧截了个图发给她微信：“看！我的第一个产品上线了！”
她回了个 😂 表情，附言：“这算产品？连按钮都没有。”
我回：“别急，明天给你做个能点的。”
第三步：加个按钮——让“产品”有交互
真正的“产品感”，来自于用户能操作它。于是我打开 src/App.js，把默认内容替换成：
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App" style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>点击次数：{count}</h1>
<button onClick={() => setCount(count + 1)}>
点我！（当前房租3500，省下的每一分钱都是爱）
</button>
</div>
);
}
export default App;
保存，热更新秒生效。我跑出去喊她：“快来点这个按钮！”
她走过来，狐疑地看了一眼，然后点了三下，笑着说：“所以……这是在统计我帮你省了多少房租？”
我厚着脸皮说：“对啊，每次你做饭不点外卖，就等于给我+1。”
她翻了个白眼，但嘴角在笑。
那一刻我明白了：技术的价值，不在于多高深，而在于能不能连接人。哪怕只是一个计数器，只要背后有故事，它就是产品。
安全意识不能少：别让“玩具项目”变漏洞温床
说到安全，很多新手（包括曾经的我）觉得：“我这又不是银行系统，随便写写而已。”
但现实很打脸。上个月我朋友公司就因为一个开源组件没锁版本，被恶意注入挖矿脚本，服务器CPU飙到100%。老板直接扣了他季度奖。
所以从第一个React项目开始，我就养成了几个习惯：
- 别用
npm install -g乱装全局工具，用npx或本地依赖； - 定期运行
npm audit，看看有没有高危漏洞； .env文件绝不提交到Git，敏感配置放环境变量；- 别信来路不明的第三方库，star少于1k的慎用。
这些看似繁琐，但就像谈恋爱——信任要给，但边界必须清晰。代码世界里，没有“应该没事”，只有“确认安全”。
从教程到产品：我的心态转变
以前我看React教程，只关心“怎么写”，不关心“为什么写”。比如看到useState，就想背语法；看到useEffect，就想抄demo。
但现在不一样了。每次写代码前，我会问自己：
- 这个功能解决了谁的问题？
- 用户点这里时，期待看到什么？
- 如果明天要上线，敢不敢让用户用？
这种思维转变，很大程度上是因为和产品经理同居后耳濡目染。她总说：“产品不是功能的堆砌，是价值的传递。”
于是我把那个计数器升级了：加了本地存储（localStorage），关掉页面再开，数据还在；还加了个“清零”按钮，备注写着“吵架后重置感情值”。
她看到后笑出声：“你这需求文档比我们公司实习生写得还细。”
我说：“因为这是我最重要的产品——我们的生活。”
给正在入门的你：别怕慢，怕停
我知道很多人卡在第一步：装环境失败、报错看不懂、文档太枯燥……我去年也这样。有次在B站看视频学到凌晨三点，结果第二天上班打瞌睡被leader叫去谈话。
但我想告诉你：所有大神，都曾是个连npm是什么都不知道的小白。
关键不是一次学会，而是每天推进一点点。我给自己定的规矩是：每天至少写10行有效代码。哪怕只是改个颜色、加个console.log，也算。
而且，别孤军奋战。加入社区、问问题、分享你的小成果。我就是在React中文论坛发了个“求帮看报错”的帖子，认识了现在公司的技术主管——他后来内推我面试，薪资谈到22k。
结语：代码人生，也是爱的人生
写这篇教程时，女友刚洗完澡，裹着毛巾探头进来：“饭好了，出来吃。”
我保存文件，合上电脑。桌上是她做的番茄炒蛋和紫菜汤——又是省下的一顿外卖钱。
回头看这段React入门之路，技术只是载体，真正改变我的，是开始用“产品思维”看待一切：一段代码、一次相亲、一顿晚餐，都可以是精心设计的“用户体验”。
如果你也在学React，别只盯着API文档。想想你能为谁解决一个小问题？哪怕只是让室友知道“今天谁该倒垃圾”，那也是产品。
代码人生，不该是孤独的键盘声，而是连接世界的桥梁。
而我现在，不仅桥搭起来了，还牵到了她的手。
后记：本文所有代码均可在本地安全运行，无任何外部依赖。
环境建议：Node.js 18 LTS + npm 9+
最后提醒：学技术重要，但别忘了约喜欢的人吃顿饭——哪怕只是3500房租里省出来的28块麻辣烫。
评论 0