“前端开发就像搭乐高——你得先知道哪块是底板，哪块能拼屋顶。”
如果你还在用 create-react-app（CRA）打天下，那可能已经错过了现代前端开发的“快车道”。
而如果你连 useEffect 和 useState 都还没搞明白，别慌——本文会用最接地气的方式，带你一步到位！
🔥 为什么不用 CRA？Vite 才是未来！
还记得当年 npm start 后等 30 秒才能看到页面的痛苦吗？
CRA 是个好孩子，但它太“重”了。而 Vite，就像给你的开发环境装上了火箭推进器：
- ⚡ 冷启动毫秒级（真的，1 秒内）
- 🧩 原生支持 ESM（告别 Webpack 的黑盒配置）
- 🎨 开箱即用 TypeScript / JSX / CSS Modules / Stylus / Sass...
初始化项目？一行命令搞定！
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
Boom！本地 http://localhost:5173 直接起飞 ✈️
💡 小贴士：Vite 背后是尤雨溪（Vue 作者）团队打造，但对 React 支持同样丝滑——框架无国界，性能才是王道！
🧱 项目结构：像搭积木一样组织代码
我们采用经典的 分层架构：
src/
├── App.jsx # 根组件
├── main.jsx # 入口文件
├── index.styl # 全局样式（Stylus 写法超简洁！）
├── router/ # 路由集中管理
│ └── index.jsx
└── pages/ # 页面级组件
├── Home.jsx
└── About.jsx
✨ 约定优于配置：把路由、页面、逻辑拆开，后期维护才不会“打开文件就头疼”。
🧵 状态管理？React Hooks 足矣！
很多人一听到“状态管理”，立马想到 Redux、Zustand……
但其实，90% 的场景，useState + useEffect 完全够用！
来看一个真实例子：获取 GitHub 仓库列表
const Home = () => {
const [repos, setRepos] = useState([]);
useEffect(() => {
fetch('https://api.github.com/users/xxxx/repos')
.then(res => res.json())
.then(data => setRepos(data));
}, []); // 空依赖 = componentDidMount
return (
<div>
<h1>我的开源项目</h1>
{repos.length ? (
<ul>
{repos.map(repo => (
<li key={repo.id}>
<a href={repo.html_url} target="_blank" rel="noreferrer">
{repo.name}
</a>
</li>
))}
</ul>
) : (
<p>暂无仓库 😢</p>
)}
</div>
);
};
是不是清晰到想哭？
useEffect 就是你的 onMounted，useState 就是你的响应式 data —— Vue 用户秒懂！
🤫 秘密：React 18+ 的 Strict Mode 会故意执行两次
useEffect，这是为了帮你提前发现副作用 bug。别慌，生产环境只跑一次！
🗺️ 路由怎么搞？React Router v6 来救场！
以前的路由写法又臭又长，现在 v6 版本简直优雅到飞起：
第一步：安装
npm install react-router-dom
第二步：定义路由（集中式管理）
// router/index.jsx
import { Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
export default function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}
第三步：在 App 中包裹 Router
// App.jsx
import { BrowserRouter as Router, Link } from 'react-router-dom';
import AppRoutes from './router';
function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于我</Link></li>
</ul>
</nav>
<AppRoutes />
</Router>
);
}
✅ 注意：别再用
<a>标签跳转了！ 用<Link>才能实现无刷新切换，否则每次都会重新加载整个页面——用户体验直接倒退十年！
🎨 样式怎么写？Stylus 让你少敲 30% 代码！
不喜欢写大括号？讨厌重复写 px？试试 Stylus！
// index.styl
*
margin 0
padding 0
body
font-family -apple-system, sans-serif
background #f5f5f5
对比 CSS：
* {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, sans-serif;
background: #f5f5f5;
}
少了 4 个 {}、4 个 ;、2 个换行——程序员的时间，就是这么省出来的！
💡 Vite 默认不支持 Stylus，但只需
npm i -D stylus，它就自动识别.styl文件，无需配置！
🧪 最后一步：挂载到 DOM
入口文件 main.jsx 超简洁：
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.styl';
createRoot(document.getElementById('root')).render(<App />);
注意：React 18 起必须用 createRoot，旧的 ReactDOM.render 已废弃！
💬 写在最后：前端不是“切图仔”，而是“体验建筑师”
很多人觉得 React 只是“写页面”，但其实：
- 路由设计 = 信息架构
- 状态管理 = 数据流控制
- 性能优化 = 用户耐心守护者
用对工具，写对代码，你不仅能交付功能，更能交付流畅、可靠、有温度的产品体验。
🌟 记住：最好的框架，是你能驾驭的那个。
别被 hype 带跑，先跑通一个项目，比读十篇源码分析更有价值。
