React入门教程：从安装到第一个应用——一个考公程序员的周末实战手记
去年十月的一个周五晚上，我拖着疲惫的身体回到出租屋，手机刚放下，微信就“叮”了一声。
是我老婆发来的消息：“今天又加班？”
我苦笑了一下，回了个“嗯”。其实那天公司项目上线，我熬到凌晨三点才回家。但为了不让她担心，只轻描淡写地说“有点事”。
她秒回：“你不是说这周要开始学React吗？别光说不练啊。”
我盯着屏幕，心里一紧。是啊，说好的要转型全栈、提升技术竞争力，结果天天被CRUD和KPI压得喘不过气。更别说我和她异地快一年了，我在杭州做后端开发，她在成都备考教师编。我们约定：她上岸，我也得上岸——只不过我的“岸”，是公务员考试。
可现实很骨感。月薪22k看着不错，但房租3500、通勤两小时、周末才能见一面的日子，真的撑不住了。我甚至在知乎上刷到一篇《35岁程序员该不该考公》，底下评论区一片哀嚎。那一刻，我突然意识到：如果技术不能让我活得更自由，那它还有什么意义？
于是，我决定重新拾起前端——尤其是React。不是为了跳槽涨薪（虽然那也不错），而是想用它做个真正属于自己的小项目，哪怕只是个待办清单，也比天天修祖传代码强。
为什么是React？一个“被迫营业”的选择
说实话，我对前端一直有偏见。以前觉得“切图仔”没什么技术含量，直到自己被产品经理甩来一句：“这个交互能不能像抖音那样滑动切换？”我才意识到，现代Web早已不是<div>堆砌的时代。
而React，几乎是目前前端生态的“默认选项”。公司新项目全用React + TypeScript，连HR都在面试时问：“你会Hooks吗？”
但对我这种后端出身的人来说，npm、webpack、Babel这些工具链简直像外星语。上周三午休时，我偷偷在工位上敲npx create-react-app my-first-app，结果卡在98%不动了——公司网络限制，GitHub被墙得死死的。
我差点当场摔键盘。
还好，周末终于来了。
周六上午10点：从“Hello World”开始的救赎
周六一早，我和老婆视频完，她去图书馆自习，我则泡了杯速溶咖啡（别笑，打工人的真实生活），打开MacBook，准备正式开启React之旅。
第一步：安装Node.js
别看这一步简单，我第一次装的时候下错了ARM版本，结果终端报错：“zsh: command not found: node”。折腾半小时才发现M1芯片要用特定版本。建议大家直接去 nodejs.org 下LTS版，稳！
验证安装成功：
node -v # 我的是 v18.17.0
npm -v # 9.6.7
第二步：创建项目
这次我用了国内镜像加速：
npx create-react-app@latest my-todo-app --template typescript
加上--template typescript是因为公司项目都用TS，早点适应没坏处。而且TypeScript能帮我少犯低级错误——毕竟我这个老Java程序员，还是习惯强类型。
创建过程花了不到三分钟（感谢阿里云镜像）。进入目录，运行：
cd my-todo-app
npm start
浏览器自动弹出 http://localhost:3000，熟悉的React logo旋转起来——那一刻，我居然有点感动。就像小时候第一次让LED灯亮起来一样。
第三步：改代码，让它说“你好，考公人！”
打开 src/App.tsx，把默认内容删掉，改成：
function App() {
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>你好，考公人！</h1>
<p>今天刷了几道行测题？</p>
</div>
);
}
export default App;
保存，页面自动刷新——成了！虽然简陋，但这可是我亲手写的第一个React组件。
老婆中午发来消息：“进度如何？”
我得意地截图发过去：“已成功输出‘考公人’三个字。”
她回：“……就这？”
我：“别急，下午上实战！”
周六下午2点：实战项目——做一个“公考倒计时”小工具
光会Hello World没用，得做点有用的东西。我想起老婆总抱怨记不住笔试日期，于是决定做个“公考倒计时”组件。
需求很简单：
- 显示距离国考还有多少天
- 能手动设置考试日期
- 界面清爽，别花里胡哨
第一步：拆解组件
我画了个草图：
CountdownTimer：主组件，显示倒计时DatePicker：日期选择器（先用原生input凑合）App：组合两者
第二步：写逻辑
在 src/components/CountdownTimer.tsx：
import { useState, useEffect } from 'react';
type CountdownTimerProps = {
targetDate: Date;
};
const CountdownTimer = ({ targetDate }: CountdownTimerProps) => {
const [timeLeft, setTimeLeft] = useState({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
useEffect(() => {
const calculateTimeLeft = () => {
const now = new Date();
const difference = targetDate.getTime() - now.getTime();
if (difference <= 0) {
return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
};
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearInterval(timer);
}, [targetDate]);
return (
<div>
<h2>距离考试还有：</h2>
<div style={{ fontSize: '2rem', fontWeight: 'bold' }}>
{timeLeft.days}天 {timeLeft.hours}小时 {timeLeft.minutes}分 {timeLeft.seconds}秒
</div>
</div>
);
};
export default CountdownTimer;
这段代码其实踩了个坑：一开始我没加useEffect的依赖项[targetDate]，结果日期变了倒计时却不更新。调试半小时才发现——React的闭包陷阱，真是防不胜防。
第三步：集成到App
修改 App.tsx：
import { useState } from 'react';
import CountdownTimer from './components/CountdownTimer';
function App() {
const [examDate, setExamDate] = useState(new Date('2024-11-30')); // 国考日期
const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setExamDate(new Date(e.target.value));
};
return (
<div style={{ textAlign: 'center', marginTop: '50px', fontFamily: 'Arial' }}>
<h1>公考倒计时助手</h1>
<p>为每一个奋斗的你加油！</p>
<div style={{ margin: '20px' }}>
<label>考试日期：</label>
<input
type="date"
value={examDate.toISOString().split('T')[0]}
onChange={handleDateChange}
/>
</div>
<CountdownTimer targetDate={examDate} />
</div>
);
}
export default App;
搞定！保存后，页面立刻显示出“距离考试还有：XX天XX小时……”，还能改日期。虽然UI丑得像90年代网页，但功能跑通了！
我兴奋地录了个屏发给老婆：“看看，专属你的倒计时工具！”
她回：“哇！比粉笔APP还准！不过……背景能换个红色吗？喜庆点。”
我：“……行，下个版本加主题切换。”
实战经验总结：那些没人告诉你的坑
通过这个小项目，我总结了几条血泪经验，特别适合像我这样半路出家的后端转前端选手：
别怕用脚手架：
create-react-app虽然被很多人说“过时”，但对新手极其友好。不用配webpack，不用管Babel，专注写业务逻辑就行。State管理要克制：一开始我想用Redux，后来发现就一个日期状态，直接
useState就够了。记住：简单场景别过度设计。TypeScript是朋友：虽然多写几行类型定义，但能避免很多运行时错误。比如我之前把
Date对象当字符串用，TS直接报错，省了我半小时debug。善用React DevTools：Chrome插件装上，能直接看组件树、state变化，比
console.log高效十倍。别追求完美UI：先把逻辑跑通，再考虑美化。我见过太多人卡在“按钮颜色不好看”上，结果项目烂尾。
考公与代码：两条路，一个目标
做完这个小工具，已经是周日晚上。我关掉电脑，看了眼日历——距离国考还有217天。
其实我很清楚，考公成功率不高，技术这条路也不轻松。但至少，我能在周末的几个小时里，做出一点“属于自己的东西”。不像公司项目，改一行代码要开三次会，提一次PR要等五个人review。
React教会我的，不仅是怎么写组件，更是怎么把大问题拆成小模块，怎么用状态驱动视图，怎么在混乱中保持逻辑清晰——这些能力，其实在行测和申论里也用得上。
老婆最后说：“不管你考上没考上，这个倒计时我都留着。”
我心里一暖。
写在最后：给同样在路上的你
如果你也是：
- 在职备考，时间碎片化
- 技术焦虑，怕被淘汰
- 想做点自己的项目但不知从何下手
那我建议你：从一个小到不能再小的项目开始。不一定是Todo List，可以是天气查询、读书打卡、甚至是你家猫的体重记录。
关键不是项目多牛，而是你动手做了。
React入门教程网上一抓一大把，但只有当你真正为某个具体需求写代码时，那些概念才会活起来。useState不再是个API，而是你控制倒计时的开关；useEffect不再是魔法，而是你同步数据的桥梁。
考公也好，coding也罢，本质上都是在和不确定性搏斗。而我们能做的，就是在每个周末的午后，泡一杯咖啡，打开编辑器，写一行让自己安心的代码。
共勉。
P.S. 这个项目我已经开源在GitHub，搜“gongkao-countdown”就能找到。欢迎提PR，顺便帮我把UI改好看点——毕竟，上岸那天，我要用它倒数婚礼日期。
评论 0