Konfiguracja Storybook w projekcie React
Instalacja Storybook, konfiguracja dla Vite lub CRA oraz przeglądanie eksploratora komponentów.
Konfiguracja Storybook w projekcie React to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Czym jest Storybook
Storybook to narzędzie do tworzenia, dokumentowania i testowania komponentów interfejsu w izolacji. Każda story przedstawia określony stan komponentu, który można wyświetlić w interfejsie Storybooka bez uruchamiania całej aplikacji.
Instalacja
Należy uruchomić polecenie init Storybook w projekcie React. Automatycznie wykryje ono używany framework (Vite, CRA, Next.js) i utworzy konfigurację.
# For a Vite + React project:
npx storybook@latest init
# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)Uruchamianie Storybooka
Należy uruchomić serwer deweloperski Storybooka na porcie 6006. Otworzy on eksplorator komponentów w przeglądarce.
npm run storybook
# or
npx storybook dev -p 6006Konfiguracja .storybook/main.ts
main.ts informuje Storybook, gdzie znaleźć stories, które addony załadować i którego frameworka użyć.
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;Konfiguracja .storybook/preview.ts
preview.ts stosuje globalne dekoratory (np. opakowujące wszystkie stories w Provider) i ustawia globalne parametry, takie jak kolor tła.
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;Dodawanie dekoratorów dla kontekstu
Należy używać dekoratorów w preview.ts, aby opakować wszystkie stories w potrzebne im providery (Router, Theme, i18n), dzięki czemu stories nie muszą importować ich osobno.
decorators: [
(Story) => (
<MemoryRouter>
<QueryClientProvider client={new QueryClient()}>
<Story />
</QueryClientProvider>
</MemoryRouter>
),
],Nawigacja po interfejsie Storybooka
Pasek boczny grupuje stories według komponentu. Należy kliknąć story, aby wyświetlić ją na canvasie. Karta Docs pokazuje automatycznie wygenerowaną dokumentację API na podstawie propsów TypeScriptu.
Budowanie statycznego Storybooka
Należy zbudować statyczną witrynę HTML na podstawie stories, aby hostować ją w Chromatic, GitHub Pages lub dowolnej sieci CDN.
npm run build-storybook
# Output in storybook-static/Storybook jako dokumentacja systemu projektowego
Storybook doskonale sprawdza się jako żywa dokumentacja systemów projektowych. Należy dodać @storybook/addon-docs (część essentials), aby automatycznie generować tabele propsów i przykłady użycia na podstawie typów TypeScriptu.
Hot Module Replacement
Storybook obsługuje HMR. Po edycji komponentu lub pliku story canvas Storybooka aktualizuje się natychmiast, bez pełnego przeładowania strony.
Obsługa TypeScript
Framework @storybook/react-vite zapewnia pełnoprawną obsługę TypeScriptu. Należy używać generyków Meta i StoryObj, aby stories były w pełni typowane.
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' } };Szybkie sprawdzenie
Za który plik konfiguracyjny Storybooka odpowiada stosowanie globalnych dekoratorów, takich jak opakowywanie wszystkich stories w Provider?
Podsumowanie
Należy uruchomić npx storybook init, aby skonfigurować Storybooka, ustawić globalne providery w preview.ts i dodać addony w main.ts. Należy używać generyków Meta i StoryObj do tworzenia typowanych stories oraz zbudować statyczną witrynę za pomocą build-storybook, aby ją udostępnić.
Często zadawane pytania
Czy lekcja „Konfiguracja Storybook w projekcie React” jest bezpłatna?
Tak — pełny tekst „Konfiguracja Storybook w projekcie React” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Konfiguracja Storybook w projekcie React”?
Instalacja Storybook, konfiguracja dla Vite lub CRA oraz przeglądanie eksploratora komponentów. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Konfiguracja Storybook w projekcie React”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Storybook w projekcie React
- Pisanie stories w CSF3
- Args, Controls i dodatek Actions
- Testowanie w Storybook i regresja wizualna