React入门教程：从安装到第一个应用 —— 一个备婚程序媛的踩坑实录
去年双11，我正忙着在淘宝上给婚礼宾客挑伴手礼，老板突然在群里@我：“小陈，下周三前上线一个活动页，用React写，UI稿已发你。”
我盯着消息看了十秒，心里OS：我连Node.js都还没装过啊！
但谁让我是个即将结婚、正在攒装修基金的成都打工人呢？为了不被扣绩效（以及多拿点年终奖贴补婚纱照），我只能一边试婚纱一边啃React文档。那会儿每天下班回家，左手翻着《React权威指南》，右手刷着小红书看“如何和婚纱店砍价”，属实是当代程序媛的极限拉扯。
现在回头看，其实React入门真的没那么吓人——只要你别像我一样等到deadline前一天才开始学。今天就来写一篇新手友好、带血泪教训、附赠开发心得的React入门实战教程，希望能帮到那些和我一样被产品经理“突然袭击”的前端萌新们。
为啥选React？—— 不是我想学，是项目逼的
我们团队之前一直用Vue 2做内部管理后台，代码写得那叫一个“祖传”。上周五晚上九点，测试小姐姐还在群里咆哮：“这个表单提交又404了！你们后端接口改了也不通知前端？！”
结果一查，是我同事昨天merge了一个PR，把API路径硬编码在组件里，还忘了改测试环境配置……
领导痛定思痛，决定新项目统一迁移到React + TypeScript技术栈，理由很现实：代码可维护性高、组件复用性强、大厂背书稳如老狗。再加上我们公司最近搞“前端工程化”改革，要求所有新项目必须上Git规范、CI/CD、单元测试——这不就是React生态最擅长的事儿嘛！
于是我这个“重度依赖ChatGPT/Claude辅助开发”的程序媛，也只能含泪卸载了摸鱼专用的微博APP，开始搭建React开发环境。
环境搭建：别卡在第一步就放弃
很多新手（包括当初的我）一上来就去官网看create-react-app，结果npm install跑半天还报错，直接劝退。其实现在有更香的选择！
推荐方案：Vite + React（快到飞起）
自从用了Vite，我再也回不去Webpack了。启动速度从30秒降到500ms，改代码热更新快得像开了挂。特别是在成都这种夏天动不动就断电的地方，快速重启能救命。
# 全局安装 pnpm（比 npm 快，比 yarn 省空间）
npm install -g pnpm
# 创建 React + TypeScript 项目
pnpm create vite my-first-react-app --template react-ts
# 进入目录并安装依赖
cd my-first-react-app
pnpm install
# 启动开发服务器
pnpm dev
打开浏览器访问 http://localhost:5173，看到那个旋转的React logo，恭喜你！已经跨过了80%新手的死亡线。
💡 开发心得：别死磕
create-react-app了！它的webpack配置太重，而且默认不支持TypeScript开箱即用（虽然可以加flag）。Vite才是2024年的新手福音，尤雨溪都转投Vite怀抱了，你还等啥？
写你的第一个组件：Hello World？不，是Hello Wedding!
React的核心思想是“组件化”。你可以把页面拆成一个个乐高积木，比如导航栏、轮播图、商品卡片……而每个积木就是一个组件。
我做的第一个组件不是<h1>Hello World</h1>，而是：
// src/components/WeddingBanner.tsx
import { useState } from 'react';
export default function WeddingBanner() {
const [isExcited, setIsExcited] = useState(true);
return (
<div className="wedding-banner">
<h1>🎉 {isExcited ? '马上要结婚啦！' : '冷静点，还没领证...'}</h1>
<button onClick={() => setIsExcited(!isExcited)}>
{isExcited ? '冷静一下' : '激动起来'}
</button>
</div>
);
}
然后在App.tsx里引入它：
// src/App.tsx
import './App.css';
import WeddingBanner from './components/WeddingBanner';
function App() {
return (
<div className="app">
<WeddingBanner />
</div>
);
}
export default App;
保存文件，浏览器自动刷新——是不是超有成就感？这就是React的魔力：声明式UI + 响应式状态更新。你不用手动操作DOM，只要告诉React“我想要什么状态”，它就会帮你渲染出来。
🤯 踩坑警告：别忘了函数组件名必须大写！我第一次写成
weddingBanner，浏览器直接白屏，控制台报错Expected a component class, got weddingBanner.当时真的想砸电脑……
项目结构怎么组织？别学我乱放文件！
刚开始我所有组件都塞在src/components下，结果两周后项目变成这样：
src/
├── components/
│ ├── Button.tsx
│ ├── Header.tsx
│ ├── ProductCard.tsx
│ ├── WeddingCountdown.tsx // 婚礼倒计时组件
│ └── utils.ts // 居然还有工具函数？！
运维大哥review代码时直接笑出声：“你这components目录快成垃圾场了。”
后来参考了公司前端大佬的建议，改用按功能模块划分：
src/
├── features/
│ ├── wedding/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── types.ts
│ └── product/
│ ├── components/
│ └── services/
├── shared/
│ ├── ui/ # 通用UI组件（Button, Modal等）
│ └── lib/ # 工具函数、常量
└── App.tsx
这样不仅代码清晰，以后做微前端拆分也方便。记住：项目初期就要规划好结构，别等100个文件堆在一起再重构——那是自虐！
调试技巧 & 开发工具：别只会console.log
React DevTools 是每个React开发者必备的Chrome插件。装上之后，F12就能看到组件树、props、state，还能实时修改状态看效果。
但我最常用的其实是 React.StrictMode 的副作用检查。它会在开发环境下故意double render组件，帮你提前发现依赖缺失的问题。虽然有时候会让useEffect执行两次很烦，但线上事故少了，测试小姐姐也不再半夜@我了。
另外，强烈推荐使用 VS Code + ESLint + Prettier 组合。配好之后，代码保存自动格式化，还能提示潜在bug。比如：
// ❌ 错误：缺少依赖数组
useEffect(() => {
fetchData(userId);
}, []); // userId 变化时不会重新请求！
// ✅ 正确：ESLint 会警告你
useEffect(() => {
fetchData(userId);
}, [userId]);
💡 真实场景：上周我漏写了依赖，导致用户切换账号后数据还是上一个用户的。上线两小时就被客诉炸了，紧急hotfix时手都在抖…… 自那以后，我给所有项目都加上了
eslint-plugin-react-hooks。
部署上线：从本地到GitHub Pages
写完代码当然要部署！我们小项目一般先扔到GitHub Pages快速验证。
安装gh-pages：
pnpm add -D gh-pages在
package.json里加脚本：{ "scripts": { "build": "vite build", "preview": "vite preview", "deploy": "gh-pages -d dist" }, "homepage": "https://yourname.github.io/my-first-react-app" }构建并部署：
ppnpm run build pnpm run deploy
几分钟后，你的应用就挂在 https://yourname.github.io/my-first-react-app 上了！赶紧发给未婚夫看看：“看！这是我用React给你写的婚礼倒计时！”
🌟 彩蛋：我把GitHub仓库设为公开，README里写了“此项目由备婚程序媛开发，bug可能比喜糖还多”。结果居然有3个star！感动哭了。
浏览器兼容性 & 性能优化：别只顾功能不管体验
React本身对现代浏览器支持很好，但如果你的用户还在用IE11（别笑，有些政企客户真用），就得考虑polyfill。不过现在主流项目基本都放弃IE了，我们团队直接在package.json里声明：
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
至于性能，新手最容易犯的错误就是在render里创建新对象/函数：
// ❌ 危险！每次渲染都生成新函数
return <ExpensiveComponent onChange={() => console.log('changed')} />;
// ✅ 安全：用useCallback缓存
const handleChange = useCallback(() => console.log('changed'), []);
return <ExpensiveComponent onChange={handleChange} />;
另外，记得给列表项加key！别用index当key，除非列表不会变动。我见过因为key重复导致购物车数量错乱的线上事故，血泪教训啊……
写在最后：React没那么可怕，可怕的是拖延
从被老板临时派活，到独立完成第一个React项目，我只用了两周（当然中间有ChatGPT/Claude疯狂助攻）。现在回头看，React的核心概念其实就那几个：组件、props、state、hooks、副作用管理。只要动手写，踩坑了再爬起来，很快就能上手。
而且成都的生活节奏舒服，加班不多（相对北上广），晚上回家还能边写代码边试婚纱。上周五我还用React写了个“婚礼预算计算器”，把婚庆报价单可视化，未婚夫直呼内行——技术人的浪漫，懂的都懂。
如果你也在备婚/备考/被deadline追杀，别慌。打开终端，敲下pnpm create vite，你的React之旅就正式开始了。
记住：每一个看似复杂的框架，都是由一行行简单的代码组成的。就像婚礼一样，再繁琐的流程，拆解开来，也不过是“我愿意”三个字。
附：新手常见问题速查表
| 问题 | 解决方案 |
|---|---|
Module not found: Can't resolve 'react' |
检查是否运行了pnpm install |
页面空白，控制台报错Invalid hook call |
确保React和ReactDOM版本一致，且没重复安装 |
| 修改代码不热更新 | 检查组件是否导出为default，文件名是否正确 |
| 打包后图片404 | 用import img from './logo.png'方式引入静态资源 |
| GitHub Pages部署后路由404 | 在vite.config.ts中设置base: '/repo-name/' |
项目代码已开源：github.com/chengdu-bride/react-wedding-demo
欢迎star/fork，也欢迎提issue吐槽我写的bug（毕竟婚礼筹备中，脑子有点混沌 😅）
祝你代码无bug，婚礼无意外，生活比React状态更新还顺滑！
评论 0