从零跑通第一个 React 应用：一个后端仔的前端初体验
上周五晚上十一点，我正戴着耳机听 Lo-fi beats 敲 Go 代码，突然收到跳槽内推群的消息：“兄弟，大厂前端岗现在也卡算法了，但至少得会 React 吧？”我愣了一下——作为字节基础架构组搬砖五年的老后端，平时写写微服务、调调调度器、怼怼 Kubernetes，哪碰过 DOM 啊？但转念一想，最近刷 LeetCode 刷到头秃，不如趁周末搞点新东西，顺便看看前端到底有多“玄学”。
于是，我关掉 main.go，打开了 VS Code。今天这篇笔记，就是记录我这个纯后端如何从零安装 React 到跑起第一个应用的过程，全程踩坑、自闭、重启、再自闭，最后居然成功了！
为什么后端要碰 React？
说实话，在字节，前后端分离早就不是新鲜事了。我们组维护的内部运维平台，前端全是 React + TypeScript 写的。每次产品提个需求，比如“加个实时日志滚动刷新”，我就得找前端同事联调。但人家手头一堆需求排着队，我等得比线上 P0 事故还焦虑。
有一次，我想临时加个筛选按钮，结果等了三天还没排期。忍无可忍，自己撸袖子上——反正 JavaScript 我多少懂点（毕竟当年为了写 Node.js 脚本啃过 ES6），React 总不至于比调试分布式死锁还难吧？
事实证明……确实不难，但坑不少。
第一步：别信网上那些“一行命令搞定”
很多教程开头就是：
npx create-react-app my-app
看起来很美好，对吧？但我本地 Node 版本是 18.17.0（公司统一用 nvm 管理），执行完发现依赖冲突，报了一堆 warning，启动还慢得像加载十年前的 Flash 动画。
后来问了隔壁组的前端大佬，他说：“现在都用 Vite 了，Create React App 是上古化石。”我当场石化——原来我连工具链都落后了一个时代。
于是果断换方案：
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
三秒内本地服务器就起来了，热更新丝滑如德芙。那一刻我悟了：技术迭代太快，教程不看发布时间等于自杀。
小贴士：如果你和我一样用 M1/M2 Mac，记得确认 Node 是 arm64 架构版本，不然 npm install 可能直接给你表演“原地爆炸”。
写点真正能跑的代码
Vite 初始化后，默认页面长这样：
// App.jsx
function App() {
return (
<div className="App">
<h1>Hello Vite + React!</h1>
</div>
)
}
太朴素了。我想搞点交互——比如点击按钮计数。这可是前端界的 “Hello World”。
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
return (
<div style={{ padding: '2rem', textAlign: 'center' }}>
<h1>你已经点了 {count} 次</h1>
<button onClick={() => setCount(count + 1)}>
再点一次，老板看不到！
</button>
</div>
)
}
保存，浏览器自动刷新，点击按钮数字真的变了！那一刻我差点感动哭——原来状态管理这么简单？对比我们后端搞个并发计数器还得加锁、考虑缓存一致性，前端简直在天堂。
但等等，这代码谁写的？怎么没加分号？JSX 是什么鬼语法？别急，后面慢慢适应。
Claude Code 帮我少走弯路
说到写代码，最近团队流行用 Claude Code（对，就是 Anthropic 家那个）辅助编程。我不是 AI 工具狂热粉，但这次真香了。
比如我想加个“双击重置”功能，但忘了 React 里怎么监听双击事件。直接在 Claude Code 里输入：
“React button onDoubleClick example with useState”
它秒回：
<button
onClick={() => setCount(c => c + 1)}
onDoubleClick={(e) => {
e.preventDefault()
setCount(0)
}}
>
Click or double-click
</button>
还贴心备注：“注意 preventDefault 防止双击触发两次 click”。这比我翻 MDN 快多了。虽然不能完全依赖，但当个“高级版 Stack Overflow”挺好用。
踩坑实录：CSS 到底放哪？
作为一个习惯了 Go 结构体对齐的后端，看到 CSS 居然可以 inline 写在 JSX 里，我第一反应是：“这也太脏了吧！”
但试了试发现，对于简单样式，inline 其实挺方便。比如上面的 style={{ padding: '2rem' }}，改完立刻生效，不用切文件。
不过复杂项目肯定不行。Vite 默认支持 CSS Modules，我新建了个 Button.module.css：
/* Button.module.css */
.btn {
background: #61dafb;
border: none;
border-radius: 4px;
color: #282c34;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 1rem;
}
.btn:hover {
background: #21a1c4;
}
然后在组件里引入：
import styles from './Button.module.css'
// ...
<button className={styles.btn} onClick={...}>
点我！
</button>
完美隔离样式，不怕污染全局。这设计比我们后端某些“万能 utils.go”优雅多了。
性能优化？先别想太多
作为性能优化爱好者，我本能地想给这个小应用加 memo、useCallback。但前端同事一句话点醒我：“你这页面就一个按钮，优化个锤子， premature optimization is the root of all evil。”
想想也是。React 的 reconciliation 算法已经足够聪明，除非你搞个无限滚动列表或者高频动画，否则别瞎折腾。先把功能跑通，再谈优化。
不过，我还是偷偷用了 React DevTools 测了下渲染次数——每次点击确实只 re-render 了 App 组件，没多余开销。心里踏实了。
部署上线？三行命令搞定
写完总得给人看吧。Vite 提供了超简单的 build 流程：
npm run build
生成一个 dist/ 目录，里面全是静态文件。我随手扔到公司内部的静态资源服务器（其实就是个 Nginx），配置如下：
server {
listen 80;
server_name react-demo.example.com;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
重点是最后一行——处理前端路由（虽然我现在还没用到）。不到五分钟，链接发到群里，产品经理居然回了个“👍”。要知道他上次夸我还是因为修了个凌晨三点的 DB 死锁……
给后端兄弟的几点建议
如果你和我一样，是个想尝试前端的后端工程师，记住这几条：
| 坑点 | 正确姿势 |
|---|---|
| 盲目用 Create React App | 优先选 Vite + React 模板 |
| 一开始就搞 TypeScript | 先用 JS 熟悉 React 核心概念 |
| 过度纠结状态管理库 | useState + useEffect 能解决 90% 场景 |
| 手动配 Webpack | 别！Vite 已经帮你配好了 |
最重要的是：别怕犯错。我第一次写 JSX 把 class 写成 className 忘了，页面直接白屏，console 报错说“Invalid DOM property class”，当时真的想砸键盘。但查了文档，改过来就好了——前端没那么可怕。
写在最后
现在这个小应用已经跑在我本地了，虽然简陋，但它是我的第一个 React 作品。接下来，我打算给它加上 LocalStorage 持久化、暗黑模式切换，甚至接个后端 API（用我们组的 Go 服务！）。
跳槽的事先放一边，至少现在，我能和前端同事平等地聊 hooks 了。说不定下次双 11 大促，我可以自己改监控面板，不用再卑微地排队等排期。
对了，如果你也在字节或者别的大厂搬砖，想从前端破局，不妨从今天开始，关掉你的 IDE，打开终端，敲下那行 npm create vite。
世界很大，代码很短，而你的第一个 React 应用，可能只需要一个周末。
Happy coding！🎧
评论 0