React入门教程：从安装到第一个应用——一个杭州应届生的血泪实战笔记

去年十月，我在滨江一间月租3500的老破小里，盯着电脑屏幕发呆。窗外是滴滴答答的秋雨，屋里是我刚被第三家大厂挂掉的面试通知邮件。标题写着“感谢您的参与”，但我的银行卡余额可不感谢——房贷每月4800，工资还没影，老婆（对，我结婚了，别问为什么应届就结婚，那是另一个故事）在厨房煮着最便宜的挂面，还特意加了个蛋：“补补脑”。

那天晚上我躺在床上，脑子里全是HR最后那句：“你的前端基础不错，但React项目经验太薄弱了。”
我心想：React？我不就是用create-react-app跑了个To-Do List吗？怎么就不算项目了？

---

一、为什么是React？不是Vue？也不是Svelte？

说实话，作为一个普通二本毕业的应届生，我对框架的选择一度非常迷茫。学校教的是jQuery和原生JS，实习写的是Vue2（别笑，很多传统企业还在用）。但所有大厂JD上清一楚地写着：“熟练掌握React及其生态”。

于是我做了个表格，对比主流前端框架：

框架	学习曲线	大厂采用率	生态成熟度	面试题出现频率
Vue	★★☆	中	高	中
React	★★★★	极高	极高	爆表
Svelte	★★	低	中	极低

结果很明显：想进大厂，React几乎是必选项。尤其字节、阿里、腾讯这些杭州本地巨头，React + TypeScript + Webpack 已经成了标准配置。

而且你猜怎么着？我后来参加的五场终面，有四场都问了React底层原理——比如“setState是同步还是异步？”、“Fiber架构解决了什么问题？”、“useEffect和useLayoutEffect的区别？”

所以别再纠结“哪个框架更优雅”了。在生存面前，优雅是个奢侈品。你要的是offer，不是GitHub stars。

---

二、从零开始：安装React真的那么难吗？

很多人说：“React安装很简单啊，一行命令搞定。”
但你知道一个没接触过Node.js、npm、Webpack的小白，看到满屏报错是什么感受吗？

我记得第一次执行 npx create-react-app my-app，终端直接卡死。等了十分钟，Ctrl+C退出后重试，又提示：

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules'

我当时差点把键盘砸了。后来才知道是因为用了sudo装Node，权限混乱。最后老老实实卸载Node，用nvm重新装了个LTS版本（v18.17.0），才搞定。

教训：环境搭建是第一道坎，跨过去你就赢了一半。

顺便提一句，现在官方已经推荐用Vite了，比CRA快十倍不止。但面试官还是会考CRA，因为“传统”。所以建议你两个都玩一遍——既要会新东西，也要懂老套路。

---

三、写第一个应用：别再做To-Do List了！

我知道网上99%的教程都在教你做To-Do List。但现实是：面试官看到To-Do List就想打人。

去年十一月，我决定做个真正能放进简历的东西——一个“房贷计算器”。因为我每天都在被房贷折磨，不如把它变成项目。

功能很简单：

• 输入房价、首付比例、贷款年限、利率
• 实时计算月供、总利息、还款总额
• 支持等额本息/等额本金切换

技术栈选了：

• React 18（函数组件 + Hooks）
• Tailwind CSS（因为写样式快，且大厂爱用）
• Vite（构建快，开发体验爽）

代码结构如下：

/src
  /components
    CalculatorForm.jsx
    ResultCard.jsx
  App.jsx
  main.jsx

关键逻辑在CalculatorForm.jsx里，用了useState管理表单状态，useMemo优化计算性能：

const monthlyPayment = useMemo(() => {
  // 等额本息公式：M = P * r * (1+r)^n / ((1+r)^n -1)
  if (!principal || !rate || !months) return 0;
  const r = rate / 12 / 100;
  return (principal * r * Math.pow(1 + r, months)) / (Math.pow(1 + r, months) - 1);
}, [principal, rate, months]);

做完部署到Vercel，花了半小时，免费域名都有。我把链接放进简历，第二天就收到了阿里的面试邀约。

重点来了：项目要解决真实问题。你做的不是Demo，是你生活的映射。面试官问：“为什么做这个？”你可以说：“因为我每个月还4800房贷，想搞懂银行怎么算的。”——这比“练手”有力一万倍。

---

四、面试题暴击：React不是会用就行

进了面试才发现，光会写组件远远不够。

阿里一面，面试官直接甩出一道题：

“假设有一个列表组件，渲染10000条数据，如何优化性能？”

我当时脑子一片空白，只说了“用虚拟滚动”。结果他追问：“那你手写一个useVirtualList Hook试试？”

我当场宕机。回家后疯狂补课，才知道React性能优化是个深坑：React.memo、useCallback、useMemo、memoization、key的设计、避免inline function……随便拎一个都能讲半小时。

更惨的是二面，问到“React事件系统和原生事件的区别”。我支支吾吾说了冒泡机制，结果他说：“React 17之后事件委托改到root了，你知道吗？”

那一刻我意识到：前端早已不是切图仔的时代。你不仅要会调API，还得懂渲染机制、合成事件、调度算法——甚至要和后端争抢“技术深度”的话语权。

说到后端，其实我一直羡慕后端同学。他们学Java/Go，一套体系打天下；我们前端呢？今天React明天Vue，今天Webpack明天Vite，今天TypeScript明天Deno……前端的世界像一场永不停歇的军备竞赛。

但反过来想，这也给了我们机会。一个懂React底层、能和后端讨论API设计、还能自己部署全栈项目的前端，在杭州拿22k月薪真不算难（我现在就是22k，税前）。

---

五、代码人生：技术之外，还有生活

写这篇教程的时候，已经是今年三月。我坐在自己买的58平小房子里（总价210万，首付63万，贷款147万，30年），窗外是西溪湿地的晨光。老婆在阳台上浇花，房贷依然压得喘不过气，但至少不用再睡出租屋了。

回看这段React入门之路，我想说：

技术只是工具，人才是目的。

你学React，不是为了成为React专家，而是为了拿到更好的offer，过上更有选择权的生活。所以我建议新手：

1. 先跑通流程：从安装到部署，完整走一遍
2. 做真实项目：哪怕只是房贷计算器
3. 深挖面试题：别停留在API表面
4. 别闭门造车：多看GitHub、掘金、LeetCode讨论区

最重要的是——别让技术焦虑吞噬你。我见过太多人陷入“必须学最新框架”的陷阱，结果基础不牢，面试一问就崩。

---

六、写在最后：给正在挣扎的你

如果你此刻也在杭州某个出租屋里，为房贷、面试、技术路线而焦虑，请记住：

每个大厂工程师，都曾是从create-react-app开始的菜鸟。

我现在的工位上贴着一张便签，上面写着：“你不是在写代码，你是在写自己的人生。”

React会过时，框架会更替，但解决问题的能力、持续学习的习惯、面对挫折的韧性——这些才是你真正的“核心技术”。

所以，别怕。打开终端，敲下那行命令：

npx create-react-app my-first-real-project

然后，开始写属于你的代码人生。

（P.S. 如果你也在杭州找工作，欢迎私信交流。我可以分享我的React面试题清单，免费——毕竟，谁还不是从地狱里爬出来的呢？）