React入门教程：从安装到第一个应用
——一个北漂程序员在地铁上写代码的深夜自白
作者：小陈，31岁，北京某互联网公司前端工程师，背着每月8500元的房贷，每天6:40出门挤2小时地铁通勤，和老婆异地三年，周末才能见一面。
一、凌晨1点的望京SOHO，我和React第一次“见面”
那是去年十月的一个周五晚上，窗外下着冷雨，我瘫在望京租住的小单间沙发上，手里捏着手机，屏幕上是老婆发来的消息：“这周末你回天津吗？我想你了。”
我回了个“嗯”，然后盯着天花板发呆。房贷、房租、车票、奶粉钱（虽然还没孩子，但老婆已经开始规划了）……月薪刚从15k涨到22k，可压力一点没减。那天白天，组里新来了个95后实习生，用React写了个后台管理系统，老板拍着他肩膀说：“年轻人，技术栈很新啊！”
而我还在维护那个用jQuery写的、连自己都不想看第二眼的老后台。
那一刻，我心里咯噔一下——再不学React，怕是要被时代甩下车了。
于是，凌晨1点07分，我打开电脑，新建了一个文件夹，名字就叫：learn-react-while-commuting。
二、为什么是React？不是Vue？
很多人问我：“现在Vue不是更香吗？上手快，文档友好。”
说实话，我也纠结过。但在我们公司，所有新项目都强制用React + TypeScript + Ant Design。HR面试时还直接问：“有React经验吗？没有的话薪资上限卡死在18k。”
为了那3k的差价，也为了不被淘汰，我咬牙选了React。
而且——React背后是Meta（原Facebook），生态稳、大厂背书、社区活跃。就算以后跳槽，简历上写“精通React”也比“会用Vue”听起来硬气点（别喷我，现实就是这么残酷）。
三、准备工作：别急着写代码，先搞定环境
1. 确认你的Node.js版本
我在公司用的是Mac，家里是Windows台式机（老婆不让买新电脑，说“能用就行”）。第一次在家装React，结果Node.js还是v12，Create React App直接报错。
血泪教训：React官方推荐Node.js >= 18。去 https://nodejs.org 下载LTS版本就行。
# 检查版本
node -v
# 我的是 v18.17.1
2. 全局安装Create React App（其实不用装）
很多人教程一上来就说：
npm install -g create-react-app
但官方早就不推荐全局安装了！现在直接用 npx 就行，它会临时下载最新版，避免版本冲突。
npx create-react-app my-first-react-app
那天我在地铁上用手机热点跑这个命令（信号断了三次），等了20分钟才装完。旁边大叔看我一直在敲命令行，以为我是黑客，默默往旁边挪了两个座。
四、Hello World：你的第一个React应用
进入项目目录，启动开发服务器：
cd my-first-react-app
npm start
浏览器自动打开 http://localhost:3000，经典的React旋转原子图标出现。
我盯着那个页面看了十秒，突然笑出声——这不就是我梦开始的地方吗？
修改App.js，让它说点人话
打开 src/App.js，把内容改成：
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>老婆，我想你了。</h1>
<p>今天通勤2小时17分钟，但看到你能笑，值了。</p>
</header>
</div>
);
}
export default App;
保存，页面自动刷新。那一刻，我眼眶有点热。
原来代码也可以很温柔。
五、核心概念：组件、JSX、状态（State）
React的核心思想就三个字：组件化。
你可以把页面拆成一个个小积木，比如 <Header />、<TodoList />、<ProfileCard />，每个都是独立的“乐高块”。
JSX是什么鬼？
JSX看起来像HTML，但其实是JavaScript的语法扩展。比如：
const element = <h1>Hello, {name}!</h1>;
它会被Babel编译成：
const element = React.createElement('h1', null, 'Hello, ', name, '!');
别怕，你不用手写createElement，JSX就是为了让代码更直观。
状态（State）让页面“活”起来
光显示文字太静态了。我想做个计数器，记录我和老婆分开多少天。
import React, { useState } from 'react';
function LoveCounter() {
const [days, setDays] = useState(0);
const handleClick = () => {
setDays(days + 1);
};
return (
<div>
<p>我们已经异地 {days} 天了</p>
<button onClick={handleClick}>+1天</button>
</div>
);
}
每次点击按钮，days 自动更新，页面重新渲染——这就是React的响应式魔法。
那天晚上，我点了365次按钮，直到数字变成“365”。那是我们异地的第一整年。
六、部署上线：让全世界看到你的爱
光本地跑没意思，我想让老婆也能看到。
我用Vercel（免费、超快、对React友好）部署：
- 把代码推到GitHub
- 注册Vercel账号，导入项目
- 点击“Deploy”
30秒后，生成一个链接：https://my-first-react-app.vercel.app
我把链接发给老婆，她回了个语音，声音有点抖：“傻瓜，写代码还记得我啊？”
那一晚，我没睡好，但心里特别踏实。
七、踩过的坑：别重复我的错误
坑1：setState 是异步的！
我以为 setDays(days + 1) 后立刻能拿到新值，结果打印出来还是旧的。后来才知道，React为了性能，会批量更新状态。
解决方案：用函数式更新
setDays(prev => prev + 1);
坑2：忘记 key 属性
遍历列表时，必须加 key：
{items.map(item => <li key={item.id}>{item.name}</li>)}
否则控制台疯狂报警，页面也可能乱序。
坑3：在地铁上写代码，信号断了导致依赖没装全
建议：在家先把 node_modules 装好，再拷贝到U盘带去公司。或者用 pnpm，比 npm 快3倍。
八、给和我一样的人的建议
如果你也：
- 被房贷压得喘不过气
- 每天通勤像打仗
- 和爱人分隔两地
- 害怕技术落后被淘汰
那就从今晚开始，写一行React代码吧。
不用一口气学完Hooks、Redux、Context API。先跑通Hello World，再做一个能打动自己的小功能——哪怕只是显示一句“老婆我想你了”。
技术不是冰冷的工具，它是你对抗世界的方式。
九、写在最后：代码之外，还有生活
上周五，我又在地铁上敲代码。旁边一个学生模样的女孩凑过来看：“哥，你在写React吗？我也在学。”
我笑了笑，把屏幕转向她：“你看，这是我给我老婆做的倒计时，算她下次来北京的日子。”
她眼睛亮了：“真浪漫。”
其实哪有什么浪漫，不过是在现实的缝隙里，用代码给自己留一盏灯。
React不会帮我多赚1块钱，但它让我相信：只要还在学习，就还没老；只要还能创造，就还有希望。
房贷还得还，地铁还得挤，异地还得熬。但至少，我的代码里，永远有她的名字。
技术分享，不止于技术。
React，也不止于框架。
愿每一个深夜敲代码的人，都能被温柔以待。
—— 小陈，于北京出租屋，2024年6月
评论 0