React Academy · 课时

在 React 项目中设置 Storybook

Q: 「在 React 项目中设置 Storybook」这节课中我会学到什么？

安装 Storybook，为 Vite 或 CRA 配置它，并浏览组件浏览器。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安装 Storybook，为 Vite 或 CRA 配置它，并浏览组件浏览器。

第 1 / 4 课13 个步骤

在 React 项目中设置 Storybook 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

Storybook 是什么

Storybook 是用于独立开发、编写文档和测试用户界面组件的工具。每个故事代表组件的一种特定状态，您可以在 Storybook 界面中查看它，而无需运行完整应用。

安装

在 React 项目中运行 Storybook 初始化命令。它会自动检测您的框架（Vite、CRA、Next.js）并创建配置。

# For a Vite + React project:
npx storybook@latest init

# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)

启动 Storybook

在 6006 端口上运行 Storybook 开发服务器。它会在浏览器中打开组件浏览器。

npm run storybook
# or
npx storybook dev -p 6006

.storybook/main.ts 配置

main.ts 告诉 Storybook 在哪里查找故事、要加载哪些插件以及使用哪个框架。

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};

export default config;

.storybook/preview.ts 配置

preview.ts 会应用全局装饰器（例如将所有故事包裹在一个提供者中），并设置背景颜色等全局参数。

import type { Preview } from '@storybook/react';
import '../src/index.css'; // global styles

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
      values: [{ name: 'light', value: '#fff' }, { name: 'dark', value: '#333' }],
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={defaultTheme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;

为上下文添加装饰器

使用 preview.ts 中的装饰器，将所有故事包裹在所需的提供者中（路由、主题、国际化），这样故事就不需要分别导入它们。

decorators: [
  (Story) => (
    <MemoryRouter>
      <QueryClientProvider client={new QueryClient()}>
        <Story />
      </QueryClientProvider>
    </MemoryRouter>
  ),
],

浏览 Storybook 界面

侧边栏会按组件对故事进行分组。点击某个故事即可在画布中查看。文档标签页会根据您的 TypeScript 属性显示自动生成的接口文档。

构建静态 Storybook

根据故事构建静态 HTML 网站，以便托管在 Chromatic、GitHub Pages 或任何 CDN 上。

npm run build-storybook
# Output in storybook-static/

用于设计系统文档的 Storybook

Storybook 非常适合作为设计系统的实时文档。添加 @storybook/addon-docs（属于必备插件）即可根据 TypeScript 类型自动生成属性表和使用示例。

模块热替换

Storybook 支持 HMR。编辑组件或故事文件后，Storybook 画布会立即更新，无需完整重新加载页面。

TypeScript 支持

@storybook/react-vite 框架提供一流的 TypeScript 支持。使用 Meta 和 StoryObj 泛型来编写完全类型化的故事。

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;

type Story = StoryObj<typeof Button>;
export const Primary: Story = { args: { label: 'Click me' } };

快速检查

哪个 Storybook 配置文件负责应用全局装饰器（例如将所有故事包裹在一个提供者中）？

在交互式课程中回答

回顾

运行 npx storybook init 设置 Storybook，在 preview.ts 中配置全局提供者，并在 main.ts 中添加插件。使用 Meta 和 StoryObj 泛型编写带类型的故事，并使用 build-storybook 构建静态网站以便分享。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「在 React 项目中设置 Storybook」课时是免费的吗？

是的 — 「在 React 项目中设置 Storybook」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「在 React 项目中设置 Storybook」这节课中我会学到什么？

安装 Storybook，为 Vite 或 CRA 配置它，并浏览组件浏览器。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「在 React 项目中设置 Storybook」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy