React入门教程：从安装到第一个应用——一个前测试工程师的深夜实战手记
大家好，我是小林，一个从测试岗转行做前端开发三年的“老新人”。现在在一家二线城市的小厂写代码，月薪从转岗前的15k涨到了22k（别笑，扣完五险一金和房租3500，其实也没剩多少）。我和老婆异地，她在杭州当老师，我在成都敲键盘，每周五晚上我坐高铁过去，周日晚上又灰溜溜回来。上周五她还吐槽我：“你抱电脑的时间比抱我还久。”
但今天不聊感情，聊聊技术——具体点，聊聊我当初怎么磕磕绊绊入坑 React 的。
一、那个让我失眠的面试题挑战
时间回到去年十月。当时我还在做自动化测试，主要用 Python + Selenium 写脚本。虽然工作稳定，但总觉得天花板太低。更扎心的是，有一次参加技术分享会，听见隔壁组的前端小哥轻描淡写地说：“React Hooks 现在谁不用啊？Class 组件早该进博物馆了。” 我坐在角落，连 Hook 是钩子还是鱼钩都分不清。
回家后，我刷 BOSS 直聘，看到一个“初级前端开发”的职位要求写着：“熟悉 React，能独立开发组件”。我点进去一看，薪资范围 18k-25k。那一刻，心里咯噔一下——比我当时的工资高不少。
于是，我决定转型。但问题来了：React 到底怎么装？怎么跑起来？
网上教程五花八门，有的说用 create-react-app，有的说直接 vite，还有的上来就教你 webpack 配置……我照着某篇高赞文章敲命令，结果终端报错：“node: command not found”。原来我连 Node.js 都没装！
那天晚上 11 点，老婆打视频过来，问我：“怎么脸色这么差？”
我说：“我在装 React，卡在第一步了。”
她笑了：“你不是天天说‘程序员最怕 Hello World 跑不起来’吗？”
是啊，Hello World 跑不起来的痛，只有经历过的人才懂。
二、从零开始：我的第一行 React 代码
冷静下来后，我做了三件事：
- 买书：在京东下单了《React学习手册（第2版）》，花了 79 块。纸质书的好处是，翻着翻着就睡着了——但至少比刷短视频强。
- 看官方文档：React 官网的中文文档其实写得挺友好，尤其是新版（beta 版）把交互式练习加进去了。
- 动手：不看视频，不抄代码，自己一行一行敲。
安装环境（超简版）
先确保你有 Node.js（建议 16+）：
node -v
npm -v
如果没有，去 nodejs.org 下载 LTS 版。
然后创建项目（现在我推荐用 Vite，快得飞起）：
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
浏览器打开 http://localhost:5173，看到那个旋转的 React Logo —— 恭喜，你已经击败了 50% 的初学者（包括当初的我）。
三、我的第一个应用：Todo List（但加了点私货）
很多教程让你写 Todo List，我也写了。但为了纪念我和老婆的异地生活，我给它加了个“周末倒计时”功能。
// App.jsx
import { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim()) {
setTodos([...todos, input]);
setInput('');
}
};
// 计算距离周五还有几天
const daysUntilFriday = () => {
const today = new Date();
const dayOfWeek = today.getDay(); // 0=周日, 1=周一... 5=周六, 6=周日
let diff = 5 - dayOfWeek; // 周五是5
if (diff < 0) diff += 7;
return diff;
};
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h1>小林的异地奋斗清单</h1>
<p>距离见到老婆还有：{daysUntilFriday()} 天！❤️</p>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="比如：学完React状态管理"
/>
<button onClick={addTodo}>添加任务</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
export default App;
运行效果？简单粗暴，但每次看到“距离见到老婆还有 X 天”，我就莫名有动力继续写下去。
四、GitHub 不只是代码仓库，更是简历加分项
做完这个小应用后，我把它传到了 GitHub。
为什么？因为面试官真的会看你的 GitHub！
记得第一次投简历时，HR 问：“你有实际项目经验吗？”
我说：“有，在 GitHub 上。”
她回：“链接发我看看。”
那一刻，我庆幸自己没偷懒。
后来我陆续把学习过程中的小 demo 都放上去：计数器、天气查询（调用免费 API）、甚至一个模仿豆瓣电影的界面。虽然代码很糙，但至少证明你在动手。
而且，GitHub 还有个隐藏好处：当你写不下去的时候，看看 star 和 fork（哪怕只有自己点的），也会觉得“我好像也不是完全没用”。
我的仓库地址就不贴了（毕竟有些代码现在看想删库跑路），但强烈建议新手建个 public repo，哪怕只放一个 README.md 写上“今天学会了 useState”。
五、面试题挑战：React 入门必问的三个问题
转型过程中，我面了 7 家公司，被问到最多的问题就这三个：
React 是什么？和 Vue 有什么区别？
别背官网定义！我说：“React 是一个声明式 UI 库，用 JS 描述界面长什么样，而不是一步步操作 DOM。至于和 Vue 的区别……我觉得 React 更像乐高，自由但需要自己搭架子；Vue 像宜家家具，开箱即用但改起来费劲。”（面试官笑了，过了）useState 是同步还是异步？
实际上是“批量更新”导致看起来异步。但在 setTimeout 里就是同步的。这个问题我答错了两次，后来专门写了一篇笔记总结。组件通信有哪些方式？
父子：props；子父：回调函数；跨层级：Context 或状态管理库（比如 Zustand，比 Redux 轻量多了）。
这些题，光看书不够，必须自己写、自己调试、自己踩坑。
六、写给正在挣扎的你：别怕慢，怕的是不动
说实话，从测试转开发那半年，我焦虑到掉头发。白天上班写测试用例，晚上 9 点到凌晨 1 点啃 React，周末见面老婆还得哄我：“慢慢来，又不是明天就要上线 Facebook。”
但正是那些“跑不起来的代码”、“看不懂的报错”、“被拒的面试”，让我一点点积累起来。
现在回头看，React 入门最难的不是语法，而是环境配置 + 心态调整。你不需要一开始就搞懂 Fiber 架构或并发模式，你只需要让那个小方块在屏幕上动起来。
结语：技术是手段，生活才是目的
写这篇文章的时候，是周三晚上 11 点。老婆刚发消息：“这周五降温，记得带厚外套。”
我回了个“👌”，然后继续敲代码。
我知道，React 只是我职业路上的一站。未来可能还要学 TypeScript、Next.js、甚至转全栈。但我不慌了——因为我已经证明过自己能从零开始。
如果你也在转型路上，或者正被第一个 React 应用卡住，请记住：
安装失败不可怕，可怕的是关掉终端后不再打开。
面试被拒不可怕，可怕的是从此觉得自己不行。
技术分享的意义，不是炫耀多厉害，而是告诉后来者：“这条路，有人走过，你可以。”
最后，祝你早日写出自己的第一个 React 应用，也祝你早日结束异地（如果有的话）。
—— 小林，于成都出租屋，2024年夏
评论 0