🚀 技术栈介绍#

本文展示了如何在 Astro (Fuwari) 博客中成功集成以下现代前端技术栈：

✨ 实时组件演示#

下面的所有组件都是 真实可交互 的 React 组件，通过 MDX 直接嵌入到这篇博客帖子中：

🏗️ 技术架构#

1
// 在 MDX 中导入 React 组件
2
import TechShowcase from '../../../components/react/TechShowcase.tsx'
3

4
// 使用 client:load 指令使其在客户端可交互
5
<TechShowcase client:only="react" />

1
import { create } from 'zustand'
2

3
const useTaskStore = create((set, get) => ({
4
  tasks: [],
5
  addTask: (title, priority) =>
6
    set((state) => ({
7
      tasks: [...state.tasks, { id: Date.now(), title, priority, completed: false }],
8
    })),
9
  toggleTask: (id) =>
10
    set((state) => ({
11
      tasks: state.tasks.map((t) => t.id === id ? { ...t, completed: !t.completed } : t),
12
    })),
13
  getStats: () => {
14
    const { tasks } = get()
15
    return {
16
      total: tasks.length,
17
      completed: tasks.filter((t) => t.completed).length,
18
    }
19
  },
20
}))

1
import { Button } from '@/components/ui/button'
2
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3
import { Badge } from '@/components/ui/badge'
4
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
5

6
// 按钮变体
7
<Button variant="default" client:load>Default</Button>
8
<Button variant="destructive" client:load>Destructive</Button>
9
<Button variant="outline" client:load>Outline</Button>
10
<Button variant="ghost" client:load>Ghost</Button>

📦 引入的依赖#

本次集成新增了以下依赖包：

• @astrojs/react — Astro 的 React 集成
• @astrojs/mdx — Astro 的 MDX 支持
• react + react-dom — React 核心库
• zustand — 状态管理
• class-variance-authority — 组件变体管理 (CVA)
• clsx + tailwind-merge — 类名工具函数
• lucide-react — 图标库
• @radix-ui/* — 无障碍 UI 原语

TIP

shadcn/ui 的组件代码直接存在于项目中 (src/components/ui/)，你可以自由定制样式和行为，无需等待上游更新。

🎯 总结#

通过这次集成，我们的 Astro 博客现在具备了：

1. ✅ React 组件支持 — 可以在 Astro 页面和 MDX 文章中使用 React
2. ✅ MDX 写作 — 可以在 Markdown 中嵌入可交互的 React 组件
3. ✅ shadcn/ui 组件库 — Button、Card、Badge、Tabs、Switch、Progress、Accordion 等
4. ✅ Zustand 状态管理 — 轻量级全局状态，无需 Provider
5. ✅ Tailwind CSS 增强 — 配合 shadcn/ui 的设计 Token 系统