0Pricing
React Academy · Aula

Configurando o Storybook em um projeto React

Instale o Storybook, configure-o para Vite ou CRA e explore o catálogo de componentes.

Configurando o Storybook em um projeto React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que é o Storybook

O Storybook é uma ferramenta para desenvolver, documentar e testar componentes de interface de forma isolada. Cada história representa um estado específico de um componente, que pode ser visualizado na interface do Storybook sem executar a aplicação inteira.

Instalação

Execute o comando de inicialização do Storybook em seu projeto React. Ele detecta automaticamente sua estrutura (Vite, CRA, Next.js) e cria a configuração.

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

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

Iniciando o Storybook

Execute o servidor de desenvolvimento do Storybook na porta 6006. Ele abrirá o explorador de componentes no navegador.

npm run storybook
# or
npx storybook dev -p 6006

A configuração de .storybook/main.ts

main.ts informa ao Storybook onde encontrar as histórias, quais complementos carregar e qual estrutura utilizar.

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;

A configuração de .storybook/preview.ts

preview.ts aplica decoradores globais, como envolver todas as histórias em um provedor, e define parâmetros globais, como a cor de fundo.

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;

Adicionando decoradores para o contexto

Use decoradores em preview.ts para envolver todas as histórias nos provedores de que precisam, como roteador, tema e i18n, evitando que as histórias precisem importá-los individualmente.

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

Navegando pela interface do Storybook

A barra lateral agrupa as histórias por componente. Clique em uma história para visualizá-la na área de visualização. A aba de documentação mostra a documentação da API gerada automaticamente a partir das propriedades do TypeScript.

Criando um Storybook estático

Crie um site HTML estático a partir das suas histórias para hospedá-lo no Chromatic, no GitHub Pages ou em qualquer CDN.

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

Storybook para documentação de sistemas de projeto

O Storybook é excelente como documentação viva para sistemas de projeto. Adicione @storybook/addon-docs, que faz parte dos recursos essenciais, para gerar automaticamente tabelas de propriedades e exemplos de uso a partir dos seus tipos TypeScript.

Substituição a quente de módulos

O Storybook oferece suporte a HMR. Edite um componente ou arquivo de história, e a área de visualização do Storybook será atualizada instantaneamente, sem recarregar a página inteira.

Suporte a TypeScript

A estrutura @storybook/react-vite oferece suporte completo ao TypeScript. Use os genéricos Meta e StoryObj para criar histórias totalmente tipadas.

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' } };

Verificação rápida

Qual arquivo de configuração do Storybook é responsável por aplicar decoradores globais, como envolver todas as histórias em um provedor?

Recapitulação

Execute npx storybook init para configurar o Storybook, configure os provedores globais em preview.ts e adicione complementos em main.ts. Use os genéricos Meta e StoryObj para criar histórias tipadas e compile um site estático com build-storybook para compartilhá-lo.

Perguntas Frequentes

A aula “Configurando o Storybook em um projeto React” é grátis?

Sim — o texto completo de “Configurando o Storybook em um projeto React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Configurando o Storybook em um projeto React”?

Instale o Storybook, configure-o para Vite ou CRA e explore o catálogo de componentes. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Configurando o Storybook em um projeto React”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configurando o Storybook em um projeto React
  2. Escrevendo histórias CSF3
  3. Args, controles e o complemento Actions
  4. Testes do Storybook e regressão visual
← Voltar para React Academy