React Academy · Урок

Настройка Storybook в проекте React

Установите Storybook, настройте его для Vite или CRA и изучите каталог компонентов.

Урок 1 из 413 шагов

«Настройка Storybook в проекте React» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое Storybook

Storybook — это инструмент для разработки, документирования и тестирования компонентов интерфейса по отдельности. Каждая история представляет определенное состояние компонента, которое можно просмотреть в интерфейсе Storybook без запуска всего приложения.

Установка

Выполните команду инициализации Storybook в проекте React. Она автоматически определит используемый фреймворк (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

Запустите сервер разработки Storybook на порту 6006. В браузере откроется обозреватель компонентов.

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

Боковая панель группирует истории по компонентам. Нажмите на историю, чтобы просмотреть ее на холсте. На вкладке «Документация» отображается автоматически созданная документация API на основе свойств 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.

Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 88
Уроки: 324

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Настройка Storybook в проекте React» бесплатный?

Да — полный текст урока «Настройка Storybook в проекте React» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка Storybook в проекте React»?

Установите Storybook, настройте его для Vite или CRA и изучите каталог компонентов. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка Storybook в проекте React»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Storybook в проекте React
Написание историй CSF3
Аргументы, элементы управления и дополнение Actions
Тестирование Storybook и визуальная регрессия

← Назад к React Academy