前端工程化从零上手：用React搭一个能上线的小项目
大家好，我是小码哥，在大厂干了三年前端开发，业余时间在B站做技术UP主。经常有刚入门的同学私信问我：“学完HTML/CSS/JS之后，下一步该学什么？”其实答案很明确：前端工程化。
我当初学的时候也是一头雾水——为什么一个简单的网页要装那么多工具？为什么代码不能直接上传到服务器？为什么团队协作时我的代码总和其他人冲突？后来我才明白：现代前端开发早已不是“写个HTML就能跑”的时代了。
今天这篇教程，我会带你用 React + GitHub + 自动化工具链 搭建一个完整的前端项目，并部署上线。全程零基础友好，哪怕你只写过 <div>Hello World</div> 也能跟上！
为什么需要前端工程化？
简单说：工程化就是让开发更高效、代码更规范、上线更可靠。
想象一下：
- 你写了一个1000行的JS文件，怎么压缩、合并、优化？
- 团队5个人同时改同一个功能，怎么避免代码冲突？
- 修复一个bug后，如何快速测试并发布到线上？
这些问题，靠手动操作根本搞不定。而工程化就是用工具链（Toolchain）自动处理这些繁琐流程。
📌 关键词解释
- 工具（Tool）：比如 Vite、Webpack、ESLint 等自动化工具
- React：目前最流行的前端框架之一
- GitHub：代码托管平台，也是协作和部署的核心
- 算法：虽然前端不常写复杂算法，但在构建工具内部（如依赖解析、Tree Shaking）会用到图论、哈希等算法思想
第一步：环境准备（10分钟搞定）
我们只需要安装三个东西：
| 工具 | 作用 | 安装命令 |
|---|---|---|
| Node.js | 运行JavaScript的环境 | 官网下载 LTS 版本 |
| npm / pnpm | 包管理器（推荐 pnpm 更快） | npm install -g pnpm |
| Git | 版本控制工具 | 官网下载安装 |
✅ 验证是否安装成功：
node -v # 应输出 v18.x 或更高
pnpm -v # 应输出 8.x 或更高
git --version # 应输出 2.x
💡 避坑提示：不要用 cnpm！它已停止维护。国内用户可用 pnpm + 淘宝镜像：
pnpm config set registry https://registry.npmmirror.com
第二步：用 Vite 创建 React 项目
Vite 是新一代前端构建工具，比 Webpack 快10倍以上，特别适合新手。
在终端执行：
pnpm create vite my-app --template react
cd my-app
pnpm install
pnpm run dev
打开浏览器访问 http://localhost:5173，看到 React 的欢迎页就成功了！
🔍 我当初学的时候：总以为必须用 Webpack 才算“正规军”，结果折腾半天配置文件。现在 Vite 开箱即用，真的香！
第三步：理解核心工程化工具
一个现代前端项目通常包含以下工具链：
| 工具 | 作用 | 是否必需 |
|---|---|---|
| Vite | 开发服务器 + 构建打包 | ✅ 必需 |
| ESLint | 代码规范检查 | ✅ 强烈建议 |
| Prettier | 代码自动格式化 | ✅ 推荐 |
| Husky + lint-staged | 提交前自动检查 | ⚠️ 团队项目必备 |
| GitHub Actions | 自动化部署 | ✅ 上线必需 |
我们来逐个配置。
1. 添加 ESLint + Prettier
pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-react
创建 .eslintrc.cjs：
module.exports = {
extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
plugins: ['react'],
env: { browser: true, es2021: true },
parserOptions: { ecmaVersion: 12, sourceType: 'module', ecmaFeatures: { jsx: true } },
settings: { react: { version: 'detect' } },
rules: { 'react/react-in-jsx-scope': 'off' }
}
创建 .prettierrc：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
现在你的代码保存时会自动格式化，提交前会检查错误！
2. 配置 Git 提交钩子（Husky）
pnpm add -D husky lint-staged
pnpm exec husky install
pnpm pkg scripts prepare "husky install"
添加 pre-commit 钩子：
pnpm exec husky add .husky/pre-commit "pnpx lint-staged"
创建 lint-staged.config.js：
module.exports = {
'*.{js,jsx}': ['eslint --fix', 'prettier --write']
};
✨ 效果：每次
git commit时，自动修复代码风格问题，确保提交的代码是干净的！
第四步：实战项目——做一个“算法可视化”小页面
为了体现关键词 算法，我们做一个简单的“冒泡排序可视化”页面。
1. 创建组件 src/components/BubbleSortVisualizer.jsx
import { useState, useEffect } from 'react';
export default function BubbleSortVisualizer() {
const [array, setArray] = useState([]);
const [isSorting, setIsSorting] = useState(false);
// 初始化随机数组
useEffect(() => {
resetArray();
}, []);
const resetArray = () => {
const arr = Array.from({ length: 20 }, () => Math.floor(Math.random() * 100) + 1);
setArray(arr);
};
const bubbleSort = async () => {
if (isSorting) return;
setIsSorting(true);
const arr = [...array];
const n = arr.length;
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - i - 1; j++) {
// 高亮当前比较的两个元素
const newArr = [...arr];
newArr[j] = -newArr[j]; // 用负数标记
newArr[j + 1] = -newArr[j + 1];
setArray(newArr);
await new Promise(resolve => setTimeout(resolve, 100)); // 动画延迟
if (Math.abs(newArr[j]) > Math.abs(newArr[j + 1])) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
setArray(arr.map(x => Math.abs(x))); // 移除标记
setIsSorting(false);
};
return (
<div style={{ padding: '20px' }}>
<h2>冒泡排序可视化</h2>
<div style={{ display: 'flex', gap: '4px', height: '200px', margin: '20px 0' }}>
{array.map((val, idx) => (
<div
key={idx}
style={{
width: '20px',
backgroundColor: val < 0 ? 'red' : 'steelblue',
height: `${Math.abs(val) * 2}px`,
borderRadius: '4px'
}}
/>
))}
</div>
<button onClick={resetArray} disabled={isSorting}>重置</button>
<button onClick={bubbleSort} disabled={isSorting} style={{ marginLeft: '10px' }}>
开始排序
</button>
</div>
);
}
2. 在 App.jsx 中引入
import BubbleSortVisualizer from './components/BubbleSortVisualizer';
function App() {
return (
<div className="App">
<BubbleSortVisualizer />
</div>
);
}
export default App;
现在运行 pnpm dev，你就能看到一个可交互的算法可视化页面了！
🧠 算法小知识：冒泡排序的时间复杂度是 O(n²)，虽然效率不高，但非常适合教学演示。实际项目中我们会用
Array.sort()（基于 Timsort 算法）。
第五步：部署到 GitHub Pages
我们要把项目免费部署到线上，让全世界都能访问！
1. 构建生产版本
pnpm run build
生成的静态文件在 dist/ 目录。
2. 配置 GitHub Pages
- 在 GitHub 新建一个仓库，比如
yourname/my-app - 将本地代码推送到 GitHub：
git init git add . git commit -m "init" git branch -M main git remote add origin https://github.com/yourname/my-app.git git push -u origin main - 在
vite.config.js中添加 base 路径（重要！）：export default defineConfig({ base: '/my-app/', // 注意：这里要和你的仓库名一致 // ...其他配置 });
3. 启用 GitHub Pages
- 进入 GitHub 仓库 → Settings → Pages
- Source 选择
Deploy from a branch - Branch 选
main，Folder 选/ (root) - 点击 Save
等待 1-2 分钟，访问 https://yourname.github.io/my-app/ 即可看到你的项目！
🚀 自动化部署（Bonus）：
如果你修改代码后不想手动build再push，可以用 GitHub Actions 自动部署。在.github/workflows/deploy.yml中添加：name: Deploy to GitHub Pages on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2 - run: pnpm install - run: pnpm run build - uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist下次
git push后，GitHub 会自动构建并部署！
新手常见问题解答
Q1：为什么我的 GitHub Pages 显示 404？
- 原因：Vite 的
base配置没改，或路由用了 BrowserRouter。 - 解决：确保
vite.config.js中base: '/仓库名/'，且不要用 React Router（静态页面用 HashRouter 或不用路由）。
Q2：pnpm 和 npm 有什么区别？
- pnpm 使用硬链接 + 符号链接，节省磁盘空间，安装速度更快。对新手完全透明，用法几乎一样。
Q3：一定要学算法吗？
- 日常业务开发很少手写算法，但理解基本数据结构（数组、对象、Map/Set）和常见算法思想（排序、搜索） 非常重要。面试必考，工程中也会遇到性能优化场景。
下一步学习建议
- 深入 React：学习 Hooks、状态管理（Zustand / Redux）
- 掌握 TypeScript：现代前端项目的标配
- 了解 CI/CD：学习 Jenkins、Docker 等部署进阶知识
- 参与开源：在 GitHub 上找 small issue 贡献代码
最后送大家一句话：工具只是手段，解决问题才是目的。不要陷入“配置陷阱”——花一周调 Webpack，不如先做出一个能跑的功能。
如果你觉得这篇教程有帮助，欢迎去 B站 搜“小码哥前端课”，我会持续更新更多实战内容！下期见～
评论 0