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

# React

Storybook for React & Rsbuild 让你能够使用应用已经依赖的 Rsbuild 工具链，独立地开发和测试 React 组件。

## 环境要求


| Package | Version |
| --- | --- |
| `react` | ≥ 16.8 |
| `@rsbuild/core` | `^1.5.0 \|\| ^2.0.0-0` |
| `storybook` | `^10.6.0` |


## 快速开始

在一个已有的、由 Rsbuild 驱动的 React 项目中执行以下步骤。

### 安装

安装 framework 包和 `@rsbuild/core`。尽管 `storybook-react-rsbuild` 已将 `@rsbuild/core` 声明为 peer dependency，但仍建议将其作为直接的 dev dependency 列出，以便版本锁定与 lockfile 审计保持清晰明确。


```sh [npm]
npm install @rsbuild/core storybook-react-rsbuild -D
```

```sh [yarn]
yarn add @rsbuild/core storybook-react-rsbuild -D
```

```sh [pnpm]
pnpm add @rsbuild/core storybook-react-rsbuild -D
```

```sh [bun]
bun add @rsbuild/core storybook-react-rsbuild -D
```

```sh [deno]
deno add npm:@rsbuild/core npm:storybook-react-rsbuild -D
```

### 配置 `.storybook/main.ts`

```js
import { StorybookConfig } from 'storybook-react-rsbuild'
import { mergeRsbuildConfig } from '@rsbuild/core'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return mergeRsbuildConfig(config, {
      // your custom config
    })
  },
}

export default config
```

就是这么简单！可以查看 [React 16](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-16) 和 [React 18](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-18) sandbox 获取完整示例，并继续通过 [Storybook 文档](https://storybook.js.org/docs)深入学习。

## 后续步骤

现在你已经搭建好了构建系统，接下来学习如何编写 story 并为组件撰写文档：

- **[编写 Stories](https://storybook.js.org/docs/writing-stories)**：了解 Component Story Format（CSF）的基础知识。
- **[自动文档](https://storybook.js.org/docs/writing-docs/autodocs)**：从组件自动生成文档。

## 选项

framework 特定的选项及其默认值，请参阅[配置指南](/zh/guide/configuration.md#framework-options)。