> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# 示例

Storybook Rsbuild 提供了多种示例（sandboxes），帮助你快速上手不同的 framework 和配置。

这些示例位于仓库的 [`sandboxes`](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes) 目录中。

## Frameworks

### React

- **[React 18](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-18)**：基于 TypeScript 的 React 18 基础配置。
- **[React 16](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-16)**：对旧版 React 16 的支持。
- **[Rspack React](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rspack-react-18)**：与原始 Rspack 配置集成（不使用 Rsbuild）。

### Vue

- **[Vue 3](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/vue3)**：支持 TypeScript 和 JSX 的 Vue 3。

### Web Components

- **[Lit](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/lit)**：使用 Lit 进行 Web Components 开发。

### Vanilla JS/TS

- **[Vanilla TS](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/vanilla-ts)**：面向原生 JavaScript/TypeScript 的 framework 无关配置。

## 进阶集成

### Module Federation

Storybook Rsbuild 开箱即用地支持 [Module Federation](https://module-federation.io/)。

- **[Modern.js Module Federation](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/modernjs-react-mf)**：一个从远端加载联邦模块的宿主应用，全部运行在 Storybook 中。
- **[Rslib Module Federation](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-react-mf)**：使用 Rslib 和 Storybook 开发联邦组件库。

### Modern.js

- **[Modern.js Framework](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/modernjs-react)**：与 Modern.js 全栈 framework 无缝集成，复用应用的配置。

### Rslib（库构建）

- **[Rslib Component Library](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)**：使用 Rslib 开发 React 组件库，演示如何为 Storybook 复用 Rslib 配置。
- **[Rslib Vue Component](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-vue3-component)**：使用 Rslib 开发 Vue 3 组件库。

### Rstack

- **[Rstack React 应用](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rstack-react)**：开发 React 应用，并复用 Rstack 中异步的 `define.app()` 配置。
- **[Rstack React 组件库](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rstack-react-component)**：开发 React 组件库，并复用 Rstack 中异步的 `define.lib()` 配置。

## 测试

- **[React Testing](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-testing)**：演示 Storybook 的 test runner 与交互测试能力。