React入门教程：从安装到第一个应用

上周五晚上10点，我瘫在杭州出租屋的电竞椅上（别笑，这椅子还是618用花呗分期买的），刚改完一个“紧急需求”——产品经理说：“这个按钮的hover效果不够丝滑，用户可能感觉不到它能点。”
我心想：兄弟，你确定这不是因为整个页面加载要5秒？但嘴上还得回：“好的，马上优化。”

其实吧，我是个前端，但也算半个“躺平选手”。每天上班摸鱼刷LeetCode、看掘金，下班回家打两把王者，周末偶尔去西湖边遛弯。技术呢，一直在学，但节奏嘛……佛系得很。最近被逼着学React，是因为简历投出去石沉大海。HR问我：“会React吗？”我说：“会一点点。”然后就没有然后了。

杭州这边机会多，阿里网易字节都在招，但JD清一色写着“熟练掌握React/Vue”，Java后端倒是要求不高（不是）。我寻思着，再不把React搞明白，怕是连面试机会都要靠运营同事内推了（对，我们公司运营小妹都比我懂React）。

所以，今天这篇博客，既是记录我踩坑的过程，也算是给和我一样“想卷又不想太卷”的同学一点参考。

---

为啥非得学React？

先说句大实话：我原本是Vue党。写过几个内部管理后台，v-for + v-model 一把梭，快乐得很。但现实很骨感——杭州大厂前端岗，80%要求React。就连一些创业公司，也跟风用React + TypeScript + Hooks，仿佛不用就是“技术落后”。

而且，React在动画和交互上的生态真的香。比如framer-motion、react-spring这些库，做交互动效比原生CSS transition灵活多了。作为一个对“丝滑动效”有点执念的人（虽然产品经理经常提些离谱需求），我决定：卷不动也要装作在卷。

---

安装？没那么简单

你以为npm install -g create-react-app就完事了？天真！

我第一次执行这条命令时，终端直接给我报了一堆依赖冲突：

ERESOLVE unable to resolve dependency tree
...
peer react@"^17.0.0" from @testing-library/react@12.0.0

当场裂开。后来才知道，我本地Node版本是18，npm是9.x，而create-react-app（简称CRA）对环境要求还挺挑。更惨的是，公司内网还限制了某些npm registry，导致下载超时。

解决方案：

1. 用nvm切换到Node 16（LTS稳定版）
2. 换淘宝镜像：npm config set registry https://registry.npmmirror.com
3. 直接用Vite创建React项目（真香警告！）

现在我基本不用CRA了，Vite快得离谱，热更新秒级响应。命令如下：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

浏览器打开http://localhost:5173，看到那个旋转的React Logo——那一刻，我差点感动哭了（不是）。

---

写个“Hello World”有多难？

理论上，改一下App.jsx就行：

function App() {
  return (
    <div className="App">
      <h1>躺平也能写React</h1>
    </div>
  );
}

但问题来了：我想加个按钮，点一下弹个Toast提示“摸鱼成功”。

于是开始查文档、翻GitHub。发现要用useState管理状态，还要引入第三方UI库（比如Ant Design或MUI）。但我不想引入整包，太重了。最后用了react-hot-toast，轻量又好看。

import { toast, Toaster } from 'react-hot-toast';

function App() {
  const handleFish = () => {
    toast.success('摸鱼成功！老板没发现 👀');
  };

  return (
    <div className="App">
      <h1>躺平也能写React</h1>
      <button onClick={handleFish}>开始摸鱼</button>
      <Toaster />
    </div>
  );
}

注意：<Toaster />必须放在组件树顶层，否则toast出不来。我一开始把它放错位置，调了半小时，差点以为自己不适合写前端。

---

调试技巧 & 开发体验

React DevTools 是必备插件。装上之后，可以在Elements面板里直接查看组件props和state。上周我遇到一个bug：状态明明更新了，但UI没变。打开DevTools一看，发现是useEffect依赖数组漏了某个变量——典型的“闭包陷阱”。

另外，浏览器兼容性也得注意。虽然React 18默认用现代JS语法，但如果公司项目要支持IE（求你们别再支持了），就得配Babel和polyfill。不过好消息是，现在连阿里内部系统都不支持IE了，我们团队去年就彻底移除了IE兼容代码，性能直接提升20%。

---

性能优化？先别急

新手常犯的错误：一上来就搞useMemo、useCallback，结果代码复杂度飙升，性能反而没提升多少。React官方文档也说了：除非你真的测出性能瓶颈，否则别过度优化。

我现在的策略是：

• 组件拆分合理（比如把Header、Sidebar抽成独立组件）
• 避免在render里定义函数（用useCallback包裹事件处理函数）
• 列表渲染加key（别用index！）

对了，上周有个线上事故：首页列表滚动卡顿。排查发现是每个列表项都重新渲染了。加了个React.memo包装子组件，帧率立马回到60fps。测试妹子夸我：“这次改得挺快啊！” 我表面微笑，心里想：还不是被你们压着deadline改的……

---

Java、简历、运营？怎么都来了？

你可能会问：标题里的Java、简历、运营去哪了？

别急，这就来。

Java？

我们公司是前后端分离架构，后端全是Java Spring Boot。API接口文档用Swagger生成，字段命名全是驼峰（比如userName）。但前端习惯用下划线（user_name）…… 结果联调时各种undefined。后来我和后端大哥达成协议：前端统一用camelCase，后端返回也转成camelCase。省了不少事。

简历？

学React最大的动力就是——简历能写“熟悉React生态”了！之前写“了解Vue”，HR看都不看。现在加上“使用React + TypeScript开发过3个中后台项目，集成ECharts、WebSocket、权限控制”，投递回复率明显高了。甚至有猎头主动加我微信（虽然最后发现是外包岗）。

运营？

我们运营小姐姐上周找我：“能不能做个活动页？倒计时+抽奖动画，明天上线。”
我说：“明天？你当我是神仙？”
她说：“隔壁团队用React做了个模板，你可以复用呀～”

果然，技术债都是被业务逼出来的。不过话说回来，React的组件化思想确实适合快速搭活动页。我把倒计时、奖品轮盘、弹窗都做成独立组件，拼起来就行。最后还加了个framer-motion的入场动画，运营看了直呼“高级”！

---

真实体验 vs 网上教程

网上很多教程一上来就讲Virtual DOM、Fiber架构，听得人头大。但实际工作中，你只需要知道怎么写组件、怎么管理状态、怎么调接口就够了。那些底层原理，等你跳槽面试再补也不迟（或者永远用不上）。

另外，别信“React很简单”这种鬼话。Hooks的规则（比如不能在循环里调用）、Context的性能陷阱、useEffect的依赖问题…… 哪个不让人掉头发？我建议新手：先照着官方Tutorial敲一遍，再自己做一个Todo List，基本就入门了。

---

最后：躺平，但不停止学习

写这篇博客的时候，窗外下着杭州的梅雨。我泡了杯枸杞茶（程序员养生标配），想着：React确实不难，难的是坚持动手。

如果你和我一样，白天被需求追着跑，晚上只想躺平——那就每天学30分钟，周末搞个小demo。积少成多，简历上的技能点自然就亮起来了。

毕竟，在杭州这片互联网热土上，不会React可能找不到好工作，但会React也不代表不摸鱼。技术是工具，生活才是目的。

共勉。

---

对比项	Vue	React
学习曲线	平缓（模板语法直观）	陡峭（JSX + Hooks思维转换）
生态成熟度	国内强，国外稍弱	全球通用，大厂首选
动画支持	需借助第三方库	framer-motion等一等一梯队
求职竞争力（杭州）	中等	高

注：以上观点纯属个人感受，不喜勿喷。Vue依然很棒，只是市场选择而已。

---

附：我的React学习路径（佛系版）

1. 官方Tutorial（必做）
2. 用Vite搭一个天气查询小应用（练API调用）
3. 实现一个带拖拽排序的Todo List（练状态管理）
4. 给公司内部工具加个React版本（练工程化）

搞定这四步，你就能在简历上自信地写“熟悉React”了。至于Java？那是后端的事，让他们卷去吧 😏