React入门教程：从安装到第一个应用——一个自由开发者在老家的血泪实录

去年十月，我窝在老家湖南邵阳的出租屋里，窗外是连绵阴雨，屋里是3500块省下的房租（对，我在北京时房租就是3500，现在直接归零）。当时刚接了个外包项目，客户说：“用React写个管理后台，下周上线。”
我懵了。
我不是前端，我是后端出身，Node.js + Express + MongoDB 三件套玩得飞起，但React？只会npm install react然后一脸懵。

那晚11点，我蹲在厨房的小板凳上，泡面还没吃完，老婆在隔壁房间哄娃睡觉。我刷着B站，看到一个标题：“React 10分钟入门”，点进去发现是2018年的视频，create-react-app 都被vite干趴下了。我差点把泡面碗砸了。

一、别信“10分钟入门”，那是毒鸡汤

很多人说“React很简单”，放屁。
简单的是你照着文档敲代码，难的是你真正要交付一个能跑的产品。
我第一反应是去GitHub搜模板。搜“react admin template”，跳出来一堆star过万的项目，点进去一看：TypeScript + Redux Toolkit + Ant Design + i18n + 权限控制……我直接裂开。这哪是入门？这是毕业设计。

我当时就想：能不能就写个最简单的“Hello World”页面，别整那些花里胡哨的？

于是，我决定从头开始，不抄模板，不装UI库，就用最原始的方式搭一个React应用。

二、环境搭建：别被工具链吓死

首先，装Node.js。
我用的是nvm，版本18.17.0（别问，问就是LTS）。
然后：

npm create vite@latest my-first-react-app -- --template react
cd my-first-react-app
npm install
npm run dev

Vite真香！比create-react-app快十倍，热更新秒级响应。
但问题来了——我本地跑得好好的，怎么部署？
客户说：“放GitHub Pages就行。”
好家伙，我又得研究gh-pages。折腾半小时，终于搞定了自动部署脚本。每次push到main分支，CI自动构建并发布到 https://yourname.github.io/repo。

这时候我才意识到：现代前端开发，一半时间在写业务逻辑，另一半在和工具链搏斗。Webpack、Vite、Babel、ESLint、Prettier……每个都像Llama（对，就是那个Meta开源的大模型）一样，看着温顺，一碰就尥蹶子。

三、写第一个组件：别怕“useState”把你绕晕

我新建了一个Counter.jsx：

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我！
      </button>
    </div>
  );
}

看起来简单，但第一次写的时候，我卡在“为什么不能直接写 count++”？
后来才明白：React是函数式编程思维，状态不可变。你改state，不是改变量，而是触发重新渲染。
这概念花了我两天才真正吃透——不是看懂，是“身体记住”。

那天晚上，我老婆看我对着屏幕傻笑，问：“你中邪了？”
我说：“我终于搞懂useState了！”
她翻了个白眼：“你月薪从15k涨到22k，就为了搞懂一个计数器？”

四、GitHub：你的代码保险箱，也是社交名片

我把这个破项目传到了GitHub，README写得跟小学生作文似的：

“My first React app. Don’t laugh.”

结果三天后，居然有人star了！
是个印度老哥，留言：“Nice start! Consider adding tests.”
我脸一红，赶紧补了个Jest测试。虽然只测了count初始值为0，但至少，我开始在意“工程规范”了。

现在回头看，GitHub不只是代码托管，更是你技术成长的轨迹。
我远程工作两年，面试全靠GitHub主页。HR问我：“你没大厂背景，怎么证明能力？”
我甩链接：“看我最近三个项目，全是React + Node全栈，CI/CD自动化，文档齐全。”

五、Llama教会我的事：别迷信AI，但要会用它

说到Llama，其实我没直接用它写代码（毕竟本地跑不动70B），但我用基于Llama微调的CodeLlama API查过React问题。
比如问：“如何在React中处理表单提交而不刷新页面？”
它回了一段标准答案，但漏了event.preventDefault()。
我差点照着写，结果表单一提交就跳转，差点被客户骂死。

所以我的经验是：AI可以当“高级搜索引擎”，但别当“代码生成器”。
真正的逻辑，还得自己想。
就像我老家邻居说的：“牛再壮，犁地还得人扶着。”

六、从“能跑”到“能用”：真实世界的坑

我的第一个React应用，其实是个任务管理小工具。
功能就三个：添加任务、标记完成、删除。
本地跑得飞起，一部署到GitHub Pages，404了。
为啥？因为React Router默认用BrowserHistory，但GitHub Pages是静态服务器，不支持SPA路由回退。

解决方案？改成HashRouter，或者在根目录加404.html重定向到index.html。
这种坑，教程里从来不提，只有你踩了才知道。

还有一次，我用useEffect请求数据，没加loading状态，用户点按钮没反应，以为卡了。
后来加上Skeleton加载骨架屏，体验立马提升。
这些细节，才是“产品”和“玩具”的区别。

七、写在最后：自由开发者的真实日常

现在，我每天早上7点起床，陪娃吃早饭，9点开始coding，下午4点收工带娃去河边玩。
没有通勤，没有打卡，没有办公室政治。
但代价是：你要对自己极度负责。没人催你，deadline全靠自律。

学React那一个月，我焦虑到失眠。
但熬过去后，接单单价直接涨了30%。
因为市场缺的不是会写代码的人，而是能独立交付完整前端的人。

如果你也想入行，我的建议很土但真实：
别追求“学完所有”，先做出一个能跑的玩意儿。
哪怕只是个计数器，哪怕丑得像90年代网页。
把它放到GitHub，写好README，分享出去。
你会收到反馈，会遇到问题，会逼着自己进步。

技术这东西，光看不练，永远是观众。
而自由开发者，必须是主角。

---

后记：这篇文章写完，我看了眼窗外，雨停了。
我决定今晚带老婆去镇上新开的烧烤摊，庆祝我第一个React项目上线满一年。
顺便告诉她：下个月，我要试试用React Native写个App。
她叹了口气：“你啊，就是闲不住。”

但我知道，正是这份“闲不住”，让我在老家省下房租的同时，还多赚了钱，多陪了家人。
技术，终究是为人服务的。
而React，不过是工具箱里的一把螺丝刀——
关键是你用它，造出了什么。