React Academy · Ders

Bir React Projesinde Storybook Kurulumu

Storybook'u kurun, Vite veya CRA için yapılandırın ve bileşen gezginine göz atın.

Bir React Projesinde Storybook Kurulumu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Storybook Nedir?

Storybook, kullanıcı arayüzü bileşenlerini yalıtılmış biçimde geliştirmek, belgelemek ve test etmek için kullanılan bir araçtır. Her hikâye, tam uygulamanızı çalıştırmadan Storybook kullanıcı arayüzünde görüntülenebilen belirli bir bileşen durumunu temsil eder.

Kurulum

React projenizde Storybook başlatma komutunu çalıştırın. Bu komut çerçevenizi (Vite, CRA, Next.js) otomatik olarak algılar ve yapılandırmayı oluşturur.

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

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

Storybook'u Başlatma

Storybook'un geliştirme sunucusunu 6006 numaralı bağlantı noktasında çalıştırın. Bileşen gezginini tarayıcınızda açar.

npm run storybook
# or
npx storybook dev -p 6006

.storybook/main.ts Yapılandırması

main.ts, Storybook'a hikâyeleri nerede bulacağını, hangi eklentileri yükleyeceğini ve hangi çerçevenin kullanılacağını bildirir.

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 Yapılandırması

preview.ts, global dekoratörleri uygular (örneğin tüm hikâyeleri bir sağlayıcı içine sarmalar) ve arka plan rengi gibi global parametreleri ayarlar.

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;

Bağlam için Dekoratörler Ekleme

Hikâyelerin ihtiyaç duyduğu sağlayıcılarla (yönlendirici, tema, i18n) tüm hikâyeleri sarmak için preview.ts içinde dekoratörler kullanın. Böylece hikâyelerin bunları tek tek içe aktarması gerekmez.

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

Storybook Kullanıcı Arayüzünde Gezinme

Kenar çubuğu, hikâyeleri bileşene göre gruplandırır. Bir hikâyeyi tuvalde görüntülemek için tıklayın. Docs sekmesi, TypeScript özelliklerinizden otomatik olarak oluşturulan API belgelerini gösterir.

Statik Storybook Oluşturma

Chromatic, GitHub Pages veya herhangi bir CDN üzerinde barındırmak üzere hikâyelerinizden statik bir HTML sitesi oluşturun.

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

Tasarım Sistemi Belgeleri için Storybook

Storybook, tasarım sistemleri için yaşayan belgeler oluşturma konusunda çok başarılıdır. TypeScript türlerinizden özellik tablolarını ve kullanım örneklerini otomatik olarak oluşturmak için essentials paketinin parçası olan @storybook/addon-docs eklentisini ekleyin.

Sıcak Modül Değiştirme

Storybook HMR'yi destekler. Bir bileşen veya hikâye dosyasını düzenlediğinizde Storybook tuvali, sayfanın tamamını yeniden yüklemeden anında güncellenir.

TypeScript Desteği

@storybook/react-vite çerçevesi, kapsamlı TypeScript desteği sağlar. Tam tür denetimli hikâyeler için Meta ve StoryObj genel türlerini kullanın.

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

Hızlı Kontrol

Global dekoratörleri (örneğin tüm hikâyeleri bir sağlayıcı içine sarmayı) uygulamaktan hangi Storybook yapılandırma dosyası sorumludur?

Özet

Storybook'u kurmak için npx storybook init komutunu çalıştırın, global sağlayıcıları preview.ts içinde yapılandırın ve eklentileri main.ts içinde ekleyin. Tür denetimli hikâyeler için Meta ve StoryObj genel türlerini kullanın, paylaşım için de build-storybook ile statik bir site oluşturun.

Sıkça Sorulan Sorular

“Bir React Projesinde Storybook Kurulumu” dersi ücretsiz mi?

Evet — “Bir React Projesinde Storybook Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Bir React Projesinde Storybook Kurulumu” dersinde ne öğreneceğim?

Storybook'u kurun, Vite veya CRA için yapılandırın ve bileşen gezginine göz atın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Bir React Projesinde Storybook Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← React Academy Sayfasına Dön