React 博客项目

前面已经学完基础语法，是时候做一个完整的项目了。从本节开始，我们用 React 从零开发一个个人博客，一路做到文章列表、详情页与打包上线。本节先打好地基：创建工程、规划目录、准备模拟数据、搭好路由骨架。

创建项目与安装依赖

用 Vite 创建 React 项目，并安装博客需要的路由库：

npm create vite@latest my-blog -- --template react
cd my-blog
npm install
npm install react-router-dom
npm run dev

启动后浏览器打开 http://localhost:5173 即可看到默认页面。可以先删掉 src 下的 App.css 等演示文件，保持目录干净。

规划目录结构

约定一个清晰的目录，之后每加一个页面都按套路走：

my-blog/
├─ src/
│  ├─ components/    # 可复用的小组件（导航、卡片等）
│  ├─ pages/         # 页面级组件（首页、详情页等）
│  ├─ data/          # 模拟数据，学完请求后再移除
│  ├─ App.jsx        # 路由与整体布局
│  └─ main.jsx       # 项目入口
├─ index.html
└─ package.json

准备文章模拟数据

还没有学数据请求，先用一个 JS 文件模拟「后端返回的文章列表」，后面的章节再换成真正的接口。

// src/data/articles.js
export const articles = [
  {
    id: 1,
    title: 'React Hooks 入门',
    summary: '用最简单的例子讲清 useState 与 useEffect',
    tags: ['React', 'Hooks'],
  },
  {
    id: 2,
    title: '用 Vite 搭建博客',
    summary: '从创建项目到打包上线的完整过程',
    tags: ['Vite', '实战'],
  },
];

搭建路由骨架

先把首页注册进路由，后续的文章列表、详情页只需继续往 Routes 里添加：

// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

// src/pages/Home.jsx
export default function Home() {
  return <h1>我的博客</h1>;
}

统一全局样式

在 index.css 里定义好基础样式，所有页面自动继承：

body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: #f7f7f7; color: #333; }

小结

博客的地基已经完成：Vite 工程能正常运行、目录职责分明、模拟数据就绪、路由骨架立好。下一步就可以动手写首页，把文章数据渲染成列表了。