React入门教程：从安装到第一个应用 —— 一个35岁成都老码农的深夜手记

上周五晚上11点半，我关掉公司最后一台还在跑测试的服务器，拖着疲惫的身体走出软件园。外面下着小雨，空气里混着火锅底料和共享单车的味道——典型的成都夜。打车回家的路上，老婆发来微信：“今天又加班？明天娃的家长会你别又忘了。”我苦笑一下，回了个“嗯”，心里却在想：这行干到35岁，是不是该转行送外卖了？

不是危言耸听。去年十月，我所在的外包公司裁员30%，我侥幸留下，但薪资冻结、项目停滞。月薪还是那个15k（税前），房租3500，娃上幼儿园一个月2800，老婆做行政工资勉强够日常开销。看着朋友圈里北上广深的朋友晒“React Native跨端方案落地”、“前端工程化提效300%”，再看看自己还在维护十年前的jQuery老系统，焦虑感像泡椒一样辣得人睡不着。

但我不想认命。于是，我给自己定了个小目标：用React搞出点东西来，哪怕只是个Hello World。

---

为什么是React？不是Vue？

可能有成都老乡要问：“你咋不学Vue？我们这边好多公司都用Vue啊！”
说实话，我也犹豫过。但翻了翻Boss直聘上成都本地的前端岗位要求，发现一个趋势：中大型公司、有出海业务的团队，清一色写着“React经验优先”。连我常去的那家玉林路小酒馆隔壁的创业公司，JD里都赫然写着“熟悉React Hooks者加分”。

更重要的是，我想试试看能不能接点海外远程单。GitHub上React生态活跃度太高了——每天都有新轮子冒出来，Star数动辄几万。而Vue虽然国内火，但在国际开源圈，React几乎是默认选项。想走出去，就得用世界通用的语言说话。

---

第一步：装环境，别被Node.js劝退

时间回到今年3月的一个周末。娃睡了，老婆在追《繁花》，我偷偷打开MacBook（还是16年买的Pro，电池鼓包了但还能战），开始动手。

很多人卡在第一步：Node.js版本混乱、npm慢如蜗牛、权限报错满天飞。我在终端敲node -v，结果蹦出个v12.22.0——这还是三年前装的！赶紧去官网下LTS版（现在是20.x），卸载旧版，重装。

然后配置镜像源，不然npm install能等到天亮：

npm config set registry https://registry.npmmirror.com

接着全局装create-react-app（虽然官方已不推荐全局安装，但对我这种新手更直观）：

npm install -g create-react-app

黑话时间：别一上来就折腾Vite、Webpack配置。新手先跑起来再说，能跑通比“最优解”重要一百倍。等你会写组件了，再回头优化也不迟。

---

创建你的第一个React App

在终端里，我新建了个目录叫/Users/laoma/react-journey（“老码”的拼音，土但真实），然后执行：

npx create-react-app hello-react
cd hello-react
npm start

浏览器自动弹出 http://localhost:3000，一个蓝色背景的React logo旋转着出现——那一刻，我居然有点眼眶发热。35岁的老程序员，第一次亲手跑起了React应用。

项目结构很清晰：

hello-react/
├── public/
│   └── index.html        # 单页应用的入口HTML
└── src/
    ├── App.js            # 根组件
    ├── index.js          # 渲染入口
    └── ...

打开src/App.js，看到熟悉的JSX语法：

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

我删掉所有内容，改成：

function App() {
  return <h1>成都老码，React启程！</h1>;
}

保存，页面自动刷新——成了！虽然简单，但这是属于我的第一个React组件。

---

把代码传到GitHub，让世界看见你

很多新手觉得GitHub高大上，其实它就是个代码网盘+社交平台。我注册账号都快十年了，但一直只敢clone别人的项目，不敢push自己的。

这次我逼自己：必须把hello-react传上去。

步骤很简单：

1. 在GitHub新建仓库，叫react-hello-chengdu
2. 本地终端执行：

git init
git add .
git commit -m "first commit: my first React app"
git branch -M main
git remote add origin https://github.com/yourname/react-hello-chengdu.git
git push -u origin main

输完密码（其实是Personal Access Token），看着终端显示“Everything up-to-date”，我长舒一口气。这一刻，我不再是个躲在本地的老码农，而是全球开发者社区的一员。

后来我把这个仓库链接发到了成都本地一个技术群，没想到有个HR私聊我：“你们公司在招React吗？”——原来，代码就是最好的简历。

---

小试牛刀：做个待办清单（Todo List）

光会Hello World不够。我想做个能交互的小应用，于是决定挑战经典的Todo List。

核心思路：

• 用useState管理任务列表
• 输入框受控组件
• 点击“添加”按钮更新状态

代码片段（简化版）：

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  return (
    <div>
      <h2>成都老码的待办清单</h2>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="今天要改几个bug？"
      />
      <button onClick={addTodo}>加任务</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

跑起来后，我输入“学React”、“陪娃去动物园”、“和老婆吃火锅”，点击添加，列表实时更新。虽然简陋，但这是我用React实现的第一个有状态交互的应用。

那一刻，我突然理解了React的核心哲学：UI = f(state)。界面不再是操作DOM的副产品，而是状态的直接映射。这种思维转变，比语法本身重要得多。

---

真实世界的感悟：35岁学新技术，晚吗？

当然晚——如果和22岁的应届生比，他们学得更快、熬夜更狠、试错成本更低。
但也不晚——因为我有他们没有的东西：对业务的理解、对工程的敬畏、对“为什么而写代码”的清醒认知。

上个月，我用React重写了公司内部一个报表工具的前端，性能提升40%，老板居然主动问我：“要不要牵头搞个新项目？” 虽然没涨薪（成都行情你懂的），但至少证明：老程序员不是废物，只是需要一次重新证明自己的机会。

我还把Todo App扩展了一下，加了localStorage持久化，部署到Vercel（免费！），域名就叫todo.laoma.dev。虽然访问量只有老婆和我妈（她以为是什么病毒链接），但每次打开，都提醒我：只要开始，永远不晚。

---

给同样在挣扎的你的建议

1. 别追求“完美入门”：React生态庞大，先学会useState、useEffect、组件通信就够了。剩下的边用边查。
2. 动手 > 看视频：B站教程刷十遍不如自己敲一行代码。遇到报错别慌，99%的问题Stack Overflow都有答案。
3. 善用GitHub：star优质项目（比如react-boilerplate），看别人怎么组织代码。读代码是最好的学习。
4. 接受“低效期”：前两周可能连环境都配不好，这是正常的。我第一周光解决node_modules依赖冲突就花了三天。
5. 找到你的“小确幸”：可能是页面成功渲染的瞬间，可能是第一个PR被合并，这些微光能撑你走过至暗时刻。

---

写在最后：前端不止是切图仔

有人说，35岁还写代码是失败。但我觉得，能在低工资、高焦虑的环境下坚持学习，本身就是一种胜利。

React只是一个起点。前端早已不是当年“美工+JS特效”的代名词，而是连接用户与产品的核心枢纽。无论是Web、移动端、桌面端，甚至VR/AR，React生态都在渗透。

上周和老婆商量，打算用年终奖报个线上React进阶课（预算2000以内，成都码农的极限了）。她说：“学吧，反正比打麻将强。” 我笑着点头，心里却在想：也许明年这时候，我能接到第一个远程React项目，月薪涨到22k，带全家去青城山住两天。

技术这条路，没有年龄限制，只有热情和行动力的门槛。如果你也在成都，也在35岁的十字路口徘徊，不妨今晚就打开终端，敲下那行：

npx create-react-app my-new-start

你的第一个React应用，或许就是人生下半场的起点。

—— 一个还在玉林路写代码的老码农，2024年夏于成都