React入门教程：从安装到第一个应用（附GitHub简历实战）
上周五晚上九点半，我正瘫在工位上改一个离谱的UI Bug——产品经理说“这个按钮能不能点一下就变色，再点一下变回来，但别用动画”，我心想：这不就是个 toggle 吗？结果一查代码，发现是用 class 组件写的，state 更新还卡在 shouldComponentUpdate 里……那一刻我真的想砸键盘。
作为在 AI 编程工具评测组混了快两年的老油条，平时写 Rust 写得飞起（最近沉迷 unsafe 的快乐），但团队里前端项目还是以 React 为主。眼看新人实习生连 npx create-react-app 都打不对，简历上还敢写“熟悉 React 全家桶”，我寻思着：得，干脆写篇手把手教程，顺便教他们怎么用 GitHub 搞个能放进简历的 demo 项目。
为什么你该认真学 React？
先别急着喷“现在都 2024 年了还学 CRA？”——我知道 Vite、Next.js 更香，但对新手来说，Create React App（CRA）依然是最平滑的入门坡道。我们组去年双11前招了个应届生，简历写“精通 React”，结果连 JSX 语法糖都没搞明白，上线当天把购物车组件写成无限递归，直接干崩了 CDN。血泪教训啊！
React 的核心思想就俩字：组件化 + 声明式 UI。你不用再手动操作 DOM（拜托，jQuery 都进博物馆了），只要告诉 React “我希望界面长什么样”，它会自动算出差量更新。这种心智模型一旦建立，后面学状态管理、Hooks、甚至 React Server Components 都顺得多。
环境搭建：别在第一步就劝退自己
⚠️ 注意：以下命令假设你已安装 Node.js（建议 v18+）。没装？赶紧去 nodejs.org 下 LTS 版，别用 Homebrew 装——我见过太多人被权限问题折磨到凌晨三点。
打开你的终端（我是 VSCode 自带终端党，插件装了一堆，但此刻只开一个 Terminal 就够了）：
# 创建项目（名字别叫 my-app，太土！）
npx create-react-app portfolio-react-demo
# 进入目录
cd portfolio-react-demo
# 启动开发服务器
npm start
如果看到本地 http://localhost:3000 弹出 React 官方欢迎页，恭喜！你已经跨过了 80% 新手的第一道坎。
💡 踩坑预警：
- 如果卡在
Installing packages...别慌，国内网络问题，试试npx create-react-app --use-npm强制用 npm- 报错
Error: EACCES: permission denied？别 sudo！改用chown -R $(whoami) ~/.npm修权限
写你的第一个组件：别再 return null 了！
默认的 App.js 太啰嗦，咱们直接删掉所有注释和 logo，重构成一个极简个人简介组件——这玩意儿可以直接塞进你的 GitHub 简历项目里！
// src/App.js
import React, { useState } from 'react';
import './App.css';
function App() {
// 用 Hooks 管理状态：是否显示联系方式
const [showContact, setShowContact] = useState(false);
return (
<div className="App">
<header>
<h1>Hi, I'm Alex 👋</h1>
<p>AI工具评测工程师 | Rust爱好者 | 前端半吊子</p>
{/* 条件渲染：点击按钮切换显示 */}
<button onClick={() => setShowContact(!showContact)}>
{showContact ? 'Hide Contact' : 'Show Contact'}
</button>
{/* 三元运算符控制显示内容 */}
{showContact && (
<div className="contact-info">
<p>📧 alex.dev@example.com</p>
<p>🐙 <a href="https://github.com/yourname" target="_blank">GitHub</a></p>
</div>
)}
</header>
</div>
);
}
export default App;
配套的 CSS 也精简一下（src/App.css）：
.App {
text-align: center;
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.App header {
background: #f8f9fa;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
button {
background: #09d3ac;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
margin-top: 1rem;
}
button:hover {
background: #07b892;
}
关键点解析：
useState是 React Hooks 的基石，替代了 class 组件的this.setState{showContact && <div>}是短路求值写法，比if-else渲染更简洁<a target="_blank">记得加rel="noreferrer"防安全漏洞（虽然 demo 无所谓，但好习惯要养成）
调试技巧：别只会 console.log
作为每天和 AI 工具斗智斗勇的人，我深知调试效率决定下班时间。推荐两个必装 VSCode 插件：
- ESLint：实时标红语法错误（比如忘记 import useState）
- Prettier：自动格式化代码，避免和同事为缩进吵架
浏览器端直接按 F12 打开 DevTools，重点看：
- Components 面板（需安装 React Developer Tools 扩展）：直接查看组件 state/props
- Network 面板：检查静态资源加载（别让 5MB 的图片拖慢你的简历页面）
🤯 真实事故：去年有个同事把测试 API 密钥硬编码在组件里，commit 到 GitHub 后被机器人扫到，公司 AWS 账单一夜暴涨 2 万……所以记住：敏感信息永远别放前端！
部署到 GitHub Pages：让你的简历被全世界看到
现在项目跑起来了，怎么让它上线？最简单的方式就是 GitHub Pages——免费、自动 HTTPS、还能绑定自定义域名，简直是学生党和求职者的神器。
步骤超简单：
在项目根目录安装
gh-pages：npm install --save-dev gh-pages修改
package.json，添加部署脚本：{ "homepage": "https://yourname.github.io/portfolio-react-demo", "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } }📌 注意：把
yourname换成你的 GitHub 用户名！执行部署：
npm run deploy
几分钟后，访问 https://yourname.github.io/portfolio-react-demo 就能看到你的作品了！把这个链接放进简历的「项目经历」栏，HR 点开就能看到你的代码能力，比写“精通 React”有力一万倍。
性能与兼容性：别让面试官皱眉
虽然这是个简单 demo，但好习惯要从娃娃抓起：
| 优化项 | 做法 | 为什么重要 |
|---|---|---|
| 移除未用依赖 | npm uninstall web-vitals |
减少 bundle 体积 |
| 添加 meta viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> |
保证移动端正常显示 |
| 使用 React.StrictMode | 包裹 <App /> |
开发环境检测潜在问题 |
另外，在 public/index.html 里改一下 title 和 description：
<title>Alex's Portfolio</title>
<meta name="description" content="Frontend developer with React & Rust experience">
这样搜索引擎和社交分享时才能正确抓取信息。
最后：为什么这值得放进简历？
我看过太多简历写“使用 React 开发过电商后台”，结果点开 GitHub 只有 README 和空文件夹。而一个完整部署、代码整洁、有交互细节的小项目，反而更能体现工程素养。
上周我们组面试一个候选人，他展示了用 React 做的 GitHub 仓库分析器（调用 GitHub API），虽然功能简单，但代码结构清晰、有错误边界处理、还写了单元测试——当场发 offer。技术深度不在于框架多新，而在于你是否理解背后的工程逻辑。
所以，别再纠结“该学 Vue 还是 React”了。先把基础打牢，做出能跑起来的东西，才是王道。毕竟，能解决问题的代码，才是好代码。
搞定收工！现在你的 GitHub 有了第一个 React 项目，简历也多了一行硬核经历。赶紧 push 上去，然后——关电脑，下班！（除非产品经理又在群里@你改需求……）
评论 0