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

写于2024年6月15日，凌晨2:17，北京回龙观出租屋

又是一个周末见完老婆、坐末班地铁回来的夜晚。

窗外下着小雨，屋里只有机械键盘敲击声和Mac风扇呼呼的喘息。泡面已经凉了，但我还不想睡——不是因为代码没调通，而是今晚突然想起，去年十月那个焦虑到整夜失眠的自己。

那时候，我的简历投出去三十多份，石沉大海。HR问：“有React经验吗？”我说：“Vue用得挺熟。”对方礼貌地回：“我们技术栈是React全家桶。”

那一刻，我坐在合租屋的书桌前，看着窗外中关村的霓虹，手里攥着刚涨到22k的offer（之前15k干了三年），却不敢接——因为岗位要求“熟练使用React”，而我对React的认知还停留在“听说比Vue难”。

---

老程序员的中年危机：不是不会写代码，是技术栈“过期”了

我和老婆异地两年多了。她在杭州做产品，我在北京卷后端兼前端。房租3500，通勤一小时，工资看着不低，但每次打开招聘软件，看到“React Native优先”、“熟悉Hooks和Redux”这些字眼，心里就咯噔一下。

技术这行，真没人等你慢慢成长。

上个月和老婆视频，她问我：“要不要考虑来杭州？这边有个岗位，月薪25k，要React经验。”
我说：“React我还没系统学……”
她沉默了几秒，说：“你都35了，再不更新技能树，以后连面试机会都没有。”

那一晚，我翻来覆去睡不着。不是怕失业，是怕被时代甩得太远——连改简历都不敢写“前端框架：Vue”，因为新项目基本没人用了。

于是，我下定决心：从零开始学React，就当给自己最后一次机会。

---

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

很多人一上来就被npm install -g create-react-app搞懵。其实没那么玄乎。

我用的是Mac（公司发的M1 Pro，感谢老板），先确认有没有装Node.js：

node -v
npm -v

如果没装，去 https://nodejs.org 下LTS版本（别贪最新，稳定最重要）。我装的是v18.17.0，够用。

然后全局安装Create React App（虽然现在官方推荐用Vite，但对新手来说CRA更友好）：

npm install -g create-react-app

吐槽一句：这玩意儿下载慢得像蜗牛爬，建议配个淘宝镜像：

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

接着，找个干净目录（比如~/projects），执行：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

浏览器自动弹出 http://localhost:3000，看到那个旋转的React logo——恭喜，你跨过了第一道门槛。

真实场景：我第一次跑起来时，激动得拍了下桌子，结果把隔壁室友吵醒了。他探头问：“你终于跑通了？”我说：“嗯，React Hello World。”他冷笑：“就这？我十年前就玩腻了。”
我没回嘴。35岁的人，早学会把脸皮练厚了。

---

第二步：理解“组件化”——React的灵魂

React的核心思想就四个字：组件化开发。

什么意思？举个栗子：你做一个电商首页，有Header、ProductList、Footer。在传统jQuery时代，你会写一大坨HTML+JS混在一起。但在React里，每个部分都是独立的“组件”，可以单独开发、测试、复用。

打开 src/App.js，你会看到：

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>
  );
}

这就是你的根组件。注意两点：

1. 函数名首字母大写（React规定）
2. 返回的是JSX（JavaScript + XML），不是字符串

别被JSX吓到——它只是React.createElement()的语法糖。Babel会帮你转成普通JS。

---

第三步：写你的第一个“项目”：Todo List

光看Hello World没用，得动手。我给自己定了个小目标：周末两天，做个能增删待办事项的列表。

为什么选Todo List？因为它包含了React最核心的概念：状态（state）、事件处理、列表渲染。

创建组件

新建 src/components/TodoList.js：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

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

  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <h2>我的待办事项</h2>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入任务..."
      />
      <button onClick={addTodo}>添加</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} 
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在App.js中引入

import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

跑起来！你会发现：

• 输入文字 → 点击“添加” → 列表更新
• 每个待办事项旁边有个“删除”按钮

关键点：

• useState 是Hook，用来管理组件内部状态
• setTodos([...todos, newValue]) 是不可变更新（不能直接todos.push()）
• key={index} 帮助React高效更新列表（虽然生产环境最好用ID）

真实感受：当我第一次成功删除一个待办事项时，手有点抖。不是因为多难，而是意识到——原来状态驱动UI这么爽！
Vue也是响应式，但React的“一切皆组件 + 单向数据流”让我觉得逻辑更清晰。

---

把这个小“项目”写进简历

做完这个Demo，我立刻更新了简历。

以前写：“熟悉前端开发，掌握HTML/CSS/JavaScript，熟练使用Vue.js。”

现在改成：

个人项目：基于React Hooks开发待办事项应用，实现任务增删、状态管理，代码结构模块化，支持后续扩展（如本地存储、分类筛选）。技术栈：React 18, JSX, useState, 组件化开发。

HR可能看不懂细节，但“React”、“Hooks”、“组件化”这几个词，足够让简历通过初筛。

重点来了：不要只写“会React”，要写“用React做了什么”。哪怕是个小Demo，只要能讲清楚思路，就比空泛的“熟悉”强一百倍。

---

为什么35岁还要从头学？

有人问我：“你都这么大年纪了，还折腾啥？找个安稳工作不好吗？”

我想说：安稳是假象，能力才是铁饭碗。

去年我面试一家创业公司，CTO看了我的Vue项目，问：“如果让你用React重写，需要多久？”
我说：“一周。”
他笑：“吹牛吧？”
结果我当场掏出笔记本，现场搭环境、写组件，两小时做出个简化版。他当场拍板：“下周一来上班。”

那个月薪22k的offer，就是这么拿下的。

---

给同样焦虑的同行几点建议

1. 别怕从Hello World开始：35岁学React不丢人，丢人的是假装自己懂。
2. 项目比理论重要：看书十遍不如动手一次。哪怕做个计数器，也比空谈“虚拟DOM原理”强。
3. 简历要“结果导向”：不要写“学习了React”，要写“用React实现了XX功能，解决了XX问题”。
4. 利用碎片时间：我每天通勤1小时，用手机看React文档；晚上娃睡了（如果有娃的话），写30行代码。
5. 接受自己慢一点：年轻人一天学完的东西，我可能要三天。但只要不停，就比原地踏步强。

---

最后：技术人的尊严，藏在代码里

写这篇文章的时候，老婆发来消息：“还没睡？明天还要早起赶高铁呢。”

我说：“写完这篇就睡。这是我给自己的交代。”

35岁，没有应届生的体力，没有架构师的视野，但至少还有敲代码的手，和不肯认输的心。

React不会让你一夜暴富，但它能让你的简历不再被秒拒；
一个小小的Todo List，可能就是下一份工作的敲门砖。

技术这行，永远欢迎愿意动手的人——无论你25岁，还是35岁，甚至45岁。

共勉。

附：我的学习路径（真实踩坑版）

• Day 1：装环境，跑通Hello World
• Day 2：理解JSX、组件、props
• Day 3：useState、useEffect入门
• Day 4：做Todo List（带本地存储）
• Day 5：部署到Vercel（免费！）
• Day 6：读官方文档《Thinking in React》
• Day 7：更新简历，投递！

记住：你写的每一行代码，都在为未来的自己铺路。

—— 一个还在一线敲键盘的老程序员，于北京夏夜