React入门教程：从安装到第一个应用 —— 一个奶爸的深夜代码之旅
上周五晚上11点27分，我终于把两个娃——小花生（3岁）和糯米（18个月）——成功哄睡。老婆在客厅刷《甄嬛传》第N遍，而我蹑手蹑脚摸回书房，打开那台服役五年的MacBook Pro，屏幕亮起的一刻，仿佛点亮了属于我的“第二人生”。
没错，我是那个白天远程办公、晚上兼职带娃的程序员奶爸。去年十月，我和老婆一咬牙，带着两个娃从上海搬回了山东老家。省下每月3500块的房租不说，还能天天吃上丈母娘炖的大骨汤。但代价是——学习时间？基本得靠“偷”。
最近公司要重构前端产品，技术栈从老旧的jQuery切换到React。作为前端组里“年纪最大”的（其实才32），我不能拖后腿。于是，就有了这篇《React入门教程：从安装到第一个应用》——不是为了教科书式的完美，而是记录一个真实奶爸，在娃睡后的两小时里，如何磕磕绊绊地搭起第一个React应用。
为什么是React？
说实话，一开始我是抗拒的。“又一个框架？”我心里嘀咕，“Vue不香吗？”
但现实很骨感。我们正在做的SaaS产品，客户要求快速迭代、组件复用、状态管理清晰——这些，React生态都能打。而且招聘市场上，会React的前端岗位薪资普遍比只会原生JS的高出30%。我查了下本地远程岗，React熟练者月薪能从15k涨到22k。为了给小花生攒幼儿园学费，这波必须冲。
第一步：环境搭建 —— 别被Node.js吓退
周五晚上，我打开终端（Terminal），深吸一口气。
“npm -v”
“zsh: command not found: npm”
啊？！我明明装过Node.js的！
翻了半小时记录，才发现上次重装系统时漏了。赶紧去 nodejs.org 下载LTS版本（别贪新，稳定最重要）。安装完再试：
node -v # v18.17.0
npm -v # 9.6.7
OK，基础有了。
接下来，用官方推荐的 create-react-app 脚手架。虽然现在Vite更火，但对新手来说，CRA配置少、坑少，适合我这种“碎片化学习选手”。
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
浏览器自动弹出 http://localhost:3000，熟悉的蓝色React logo转啊转——那一刻，我差点热泪盈眶。要知道，就在三周前，我连“JSX是什么”都搞不清。
第二步：理解“组件”思维 —— 像搭乐高一样写前端
以前写页面，是“从上到下堆HTML”。但React讲究组件化。什么意思？比如我们产品的仪表盘，可以拆成：
- 用户头像组件
- 数据卡片组件
- 折线图组件
- 操作按钮组
每个组件独立、可复用、可测试。这对我这种带娃的人太友好了——就像给娃拼乐高，一块一块来，不怕乱。
我新建了一个 ProductCard.js 文件（注意大驼峰命名，这是React约定）：
// src/components/ProductCard.js
import React from 'react';
function ProductCard({ name, price }) {
return (
<div className="product-card">
<h3>{name}</h3>
<p>价格：¥{price}</p>
<button>加入购物车</button>
</div>
);
}
export default ProductCard;
然后在 App.js 里引用：
import ProductCard from './components/ProductCard';
function App() {
return (
<div className="App">
<h1>我们的产品</h1>
<ProductCard name="智能温奶器" price={299} />
<ProductCard name="婴儿监控摄像头" price={599} />
</div>
);
}
保存，刷新——页面上出现了两个产品卡片！那一刻，我仿佛看到了未来：以后改UI，只需调整ProductCard，所有地方自动同步。再也不用Ctrl+F找“class='product'”改十遍了！
第三步：状态管理初体验 —— useState 是亲爹
但问题来了：点击“加入购物车”，怎么让按钮变灰？总不能真去调后端吧（况且后端同事已经下班了）。
这时就得用 useState Hook。它能让函数组件“记住”状态。
改造 ProductCard.js：
import React, { useState } from 'react';
function ProductCard({ name, price }) {
const [added, setAdded] = useState(false);
const handleClick = () => {
setAdded(true);
console.log(`${name} 已加入购物车！`);
};
return (
<div className="product-card">
<h3>{name}</h3>
<p>价格：¥{price}</p>
<button onClick={handleClick} disabled={added}>
{added ? '已添加' : '加入购物车'}
</button>
</div>
);
}
点击按钮，“加入购物车”立刻变成“已添加”，还禁用了重复点击。老婆探头进来问：“你笑啥呢？”我说：“我在给咱家产品加功能！”她翻了个白眼：“快点，别吵醒娃。”
真实世界的坑：别信“五分钟上手”
当然，过程没那么顺利。
- 忘记
import React from 'react'（React 17+其实不用了，但我本地还是16.x） - 把
{added}写成"added"，结果按钮永远显示字面量 - CSS没生效，因为忘记在
index.css里定义.product-card
最崩溃的是某天晚上，改完代码页面白屏，控制台报错：“Invalid hook call”。查了俩小时，发现是同时装了两个React版本——因为某个UI库偷偷依赖了旧版。
那一刻我真的想摔键盘。但想到明天还要给糯米换尿布，只能深呼吸，删掉 node_modules 和 package-lock.json，重新 npm install。
为什么前端值得投入？
有人说：“前端就是切图仔，没技术含量。” 我以前也这么想。
但现在做的是产品，不是页面。前端直接决定用户第一印象、交互流畅度、甚至转化率。我们上周上线的新注册流程，用React优化后，表单提交成功率提升了18%。老板在群里@我：“前端老王，牛！”
那一刻，我觉得值了。哪怕每天只有娃睡后的两小时，哪怕代码写得慢，但每一步都在靠近“更好的产品”。
给同样处境的你：几点建议
- 别追求完美：先跑起来，再优化。我的第一个组件丑得像90年代网页，但能用。
- 善用碎片时间：娃午睡20分钟？看一篇React文档。喂奶时？听技术播客。
- 别孤军奋战：加入本地开发者群，或者像我一样，在GitHub上找开源项目练手。
- 接受“慢”：我学React用了两个月，比应届生慢，但我有经验优势——知道哪些是真正重要的。
写在最后：代码与奶粉，都是爱
凌晨1点15分，老婆发来微信：“快睡吧，明天还要早起送小花生去早教班。”
我关掉编辑器，看着终端里绿色的“Compiled successfully”，心里踏实。
从上海到小县城，从jQuery到React，从焦虑迷茫到能独立开发产品模块——我不是天才，只是一个不想被淘汰的普通程序员，一个想给孩子更好生活的爸爸。
技术会变，框架会换，但解决问题的能力、持续学习的习惯，才是我们真正的“核心组件”。
如果你也在深夜敲代码，别忘了：你写的每一行，不仅是在构建产品，也是在搭建自己和家人的未来。
共勉。
—— 一个刚学会useState的奶爸
2024年6月于山东老家书房
评论 0