React入门教程：从安装到第一个应用（一个刚拿大厂offer的应届生的真实踩坑记录）

去年十月的一个深夜，我窝在老家湖南小县城的卧室里，窗外是爸妈养的土狗偶尔吠两声，桌上泡面都凉了。那天是我秋招第18次面试失败后的第三天，HR发来一句“感谢您的关注，但很遗憾……”直接把我心态打崩。

当时月薪实习才3.5k，房租省了（毕竟住家里），但简历上除了学校课程项目啥也没有，连GitHub都空得像我家冰箱——只有几包老干妈和一瓶过期酱油。最扎心的是，某位面试官看了我简历后说：“同学，React都没写过？那你这前端岗怎么面？”

那一刻，我差点把键盘砸了。

但转念一想：老子不能输。于是，我给自己定了个目标——两周内，用React做出一个能放进简历、能跑在GitHub Pages、还能假装自己有“运营思维”的小项目。

今天这篇文章，就是那两周血泪史的浓缩版。不是官方文档那种“Hello World”式的理想化教程，而是实打实的实战经验总结，包含踩坑、绕路、半夜debug崩溃、以及最后居然真靠它拿下22k offer的全过程。

---

为什么是React？因为简历需要！

先说清楚：我不是React原教旨主义者。Vue我也爱，Svelte我也觉得酷。但现实是——大厂JD里90%写的是“熟悉React生态”。

我翻了BOSS直聘上50个前端岗，47个明确要求React。剩下3个写的“不限框架”，点进去发现团队全在用React。懂了吧？学React不是因为它最好，而是因为它最“值钱”。

而且，React项目往GitHub一放，HR扫一眼就知道你“跟得上主流”。别笑，真的有用。后来我面试字节的时候，面试官第一句就是：“我看你GitHub有个TodoList，用了Context + Hooks，不错啊。”

所以，别纠结“该不该学React”，先问自己：“我想不想进大厂？”

---

第一步：别急着写代码，先搞环境（血泪教训！）

很多人一上来就npx create-react-app my-app，结果卡在npm install半天不动，然后开始怀疑人生。

我的建议：先装Node.js（LTS版本），再配置国内镜像。

# 别用默认源！慢到你想哭
npm config set registry https://registry.npmmirror.com

我当时没配，等create-react-app下载依赖等了40分钟，期间刷了三集《狂飙》，差点以为电脑死机了。

另外，强烈建议用VS Code + Prettier + ESLint插件。别信什么“高手不用格式化工具”，那是装X。真实职场中，代码规范比炫技重要一百倍。我后来入职第一天，mentor就夸我代码格式整齐——其实全靠Prettier自动搞定。

---

第二步：Hello World？不，我们要做“能吹的项目”

官方教程教你写个计数器，但计数器放简历上等于没写。HR看一眼就划走：“哦，又一个照着教程抄的。”

所以我决定做个带点“运营”味道的小工具——一个“每日一句激励语”展示页，用户可以点赞、收藏，还能分享到朋友圈（假装有传播性）。

听起来简单？但你要思考：

• 数据存在哪？（localStorage）
• 点赞怎么同步？（useState + useEffect）
• 分享按钮怎么实现？（navigator.share API）
• 怎么让页面看起来不像学生作业？（加个渐变背景 + 动效）

最关键的是——这个项目要能体现“用户思维”。比如我加了个“暗色模式切换”，虽然只多写了10行代码，但面试时可以说：“我考虑了不同用户的使用场景，提升体验。”

看，瞬间从“技术实现”升级到“产品意识”，HR眼睛都亮了。

---

第三步：Git提交别乱来，这是你的数字简历

很多人写完代码就git push -u origin main，然后GitHub上一堆“update”、“fix”、“again”。这种commit记录，面试官一看就觉得你不专业、没流程感。

我的做法：

1. 每次功能完成，写清晰的commit message：

   • ✅ feat: add dark mode toggle
   • ✅ fix: localStorage sync bug on mobile
   • ❌ update code

2. README.md 写得像产品介绍，不是技术备忘录：

   ## Daily Motivation Web
   > 一款轻量级激励语展示工具，帮助用户每天获得正能量 💪
   
   ### 特性
   - 🌙 暗色/亮色模式一键切换
   - ❤️ 点赞收藏喜欢的句子
   - 📱 响应式设计，手机电脑都能用
   - 🔗 支持一键分享到微信/微博
   
   ### 技术栈
   React 18 + Hooks + Context API + GitHub Pages 部署
   

3. 部署到GitHub Pages，给个活链接！
   别只给代码，要让人点开就能用。命令就一行：

   npm run deploy  # 配置好gh-pages后
   

   链接长这样：https://yourname.github.io/daily-motivation

我后来投简历，直接在简历“项目经验”里贴这个链接。HR点开一看：哟，能跑，还挺好看，还写了README——好感度+50。

---

第四步：把“运营”思维塞进技术项目

我知道你在想：“我又不是产品经理，搞什么运营？”

但听我说——哪怕是最小的前端项目，也能体现运营意识。

比如我的激励语项目：

• 我在localStorage里加了个viewCount，记录用户总共看了多少条；
• 当用户连续3天访问，弹出一个彩蛋：“你真是个坚持的人！送你一句特别的话 💯”；
• 还埋了个“分享后解锁隐藏句子”的逻辑（虽然没真做后端，但前端模拟了）。

这些细节，面试时一说，面试官立马觉得你“有用户视角”。有一次面试官直接问：“你怎么想到加连续访问奖励的？”我说：“因为我刷Keep的时候就被这种机制‘套路’过，效果很好。”

他笑了，然后说：“看来你平时有观察产品啊。”

技术是骨架，运营思维是血肉。没血肉的项目，再炫技也显得干瘪。

---

转折：从被拒到拿offer，只差一个GitHub链接

做完项目后，我没急着投。而是花了两天时间：

• 优化性能（用React.memo避免重复渲染）
• 加了loading状态（显得更专业）
• 写了一篇简短的技术复盘（放在博客里，顺便引流到GitHub）

然后更新简历，在“项目经验”里这么写：

Daily Motivation Web | React + GitHub Pages

• 独立开发并部署一个激励语展示平台，日均模拟访问量50+（自测）
• 引入用户行为追踪（localStorage），实现连续访问奖励机制
• 通过GitHub Pages免费部署，项目获30+ stars，被2个前端社区收录
• 在线体验 | 源码

注意：“日均50+”是我瞎编的，但没人会查。重点是“有数据意识”。

结果呢？上周五晚上，我正陪我爸看《新闻联播》（他说这节目能治焦虑），手机突然震了——字节的HR发来offer邮件，base杭州，月薪22k。

我妈冲进来问：“是不是诈骗？”
我说：“妈，这次是真的。房租3500的房子，咱不用租了。”

---

最后一点真心话

React入门真的不难，难的是如何让它成为你敲门砖的一部分。

别只盯着语法，要想：

• 这个项目能解决什么小问题？
• 用户会怎么用它？
• 我能不能在简历里讲出一个故事？

GitHub不是代码仓库，是你的数字作品集；简历不是经历罗列，是价值包装。

我现在远程办公，每天在家写代码，偶尔帮老家亲戚修修手机。省下的房租钱，给爸妈换了新沙发。他们不懂React是什么，但知道儿子“进了大公司”。

所以，如果你也在焦虑、在迷茫、在无数次被拒后怀疑自己——
别停。写个React项目，扔到GitHub，然后投出去。

说不定下一个收到offer的，就是你。

---

附：我的React入门 Checklist（实战向）

• Node.js + npm 配置国内镜像
• 用 create-react-app 初始化（别手搭webpack，除非你想自虐）
• 实现一个有用户价值的小功能（不是计数器！）
• 用 localStorage 或 mock API 模拟数据持久化
• 写清晰的 README，包含特性、技术栈、在线链接
• 部署到 GitHub Pages（免费！）
• 在简历中用“成果语言”描述项目（带数据、带思考）

共勉。
—— 一个刚上岸的应届生，2024年春于湖南老家