React Academy · Ders

CSF3 Hikâyeleri Yazma

Component Story Format 3'ü kullanarak varsayılan bir meta nesnesi ve adlandırılmış hikâyeler dışa aktarın.

CSF3 Hikâyeleri Yazma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. 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.

CSF3 Nedir?

Bileşen Hikâyesi Biçimi 3 (CSF3), güncel Storybook hikâye biçimidir. Hikâyeler düz JavaScript/TypeScript nesneleridir; basit durumlarda işleme işlevi gerekmez.

Meta Dışa Aktarımı

Her hikâye dosyasında, bileşeni açıklayan ve ortak hikâye yapılandırmasını belirleyen varsayılan bir dışa aktarım, yani Meta nesnesi bulunmalıdır.

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

const meta: Meta<typeof Button> = {
  title: 'UI/Button',     // Storybook sidebar path
  component: Button,
  tags: ['autodocs'],     // enables auto-generated docs page
};

export default meta;

Adlandırılmış Hikâye Dışa Aktarımları

Dosyadaki her adlandırılmış dışa aktarım bir hikâyedir. CSF3'te hikâye, args özelliğine (bileşenin özelliklerine) sahip bir nesnedir.

import type { StoryObj } from '@storybook/react';

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Click me', variant: 'primary' },
};

export const Secondary: Story = {
  args: { label: 'Cancel', variant: 'secondary' },
};

export const Disabled: Story = {
  args: { label: 'Unavailable', disabled: true },
};

Hikâye Kalıtımı

Hikâyeler, meta nesnesindeki argümanları devralır. Ortak varsayılanları meta.args içinde ayarlayın ve gerektiğinde hikâye başına geçersiz kılın.

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(), // from @storybook/test
    disabled: false,
  },
};

export const Large: Story = {
  args: { size: 'large', label: 'Large Button' }, // merges with meta args
};

İşleme İşlevini Geçersiz Kılma

Özel JSX sarmalama veya birden fazla örnek gerektiren karmaşık durumlar için hikâyede bir render işlevi sağlayın.

export const WithIcon: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button {...args} icon={<StarIcon />} />
      <Button {...args} icon={<HeartIcon />} />
    </div>
  ),
  args: { label: 'Action' },
};

Tek Tek Hikâyelerde Dekoratörler

Yalnızca belirli bir hikâyeyi ek sağlayıcılar veya düzen ile sarmak için hikâyeye bir decorators dizisi ekleyin.

export const InsideCard: Story = {
  decorators: [
    (Story) => (
      <div style={{ padding: 24, background: '#f5f5f5' }}>
        <Story />
      </div>
    ),
  ],
  args: { label: 'Card Button' },
};

Hikâyelerde Parametreler

Eklentileri hikâye başına yapılandırmak için parameters kullanın; örneğin belirli bir durum için arka planı veya görünüm alanını ayarlayın.

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  args: { label: 'Dark Button', variant: 'primary' },
};

autodocs Etiketi

Meta nesnesine tags: ['autodocs'] eklemek, tüm adlandırılmış hikâyelerden özellik tablosu ve canlı örnekler içeren otomatik bir belge sayfası oluşturur.

Her Durum için Bir Hikâye

Her anlamlı bileşen durumu için bir hikâye yazın: boş, yükleniyor, hata, tek öğe, çok sayıda öğe, RTL düzeni ve benzeri.

export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };

Adlandırma Kuralları

Durumu açıklayan PascalCase hikâye adları kullanın. Default gibi genel adlardan kaçının; bunun yerine PrimaryDisabled ve SecondaryWithIcon gibi belirli adlar kullanın.

title ile Hikâyeleri Gruplama

Meta içindeki title, Storybook kenar çubuğunda iç içe gruplar oluşturmak için eğik çizgi gösterimini kullanır: 'Forms/Input', Input alt grubunu içeren bir Forms grubu oluşturur.

const meta: Meta<typeof TextInput> = {
  title: 'Forms/TextInput',
  component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...

Testlerde Hikâyeleri Yeniden Kullanma

CSF3 hikâyeleri düz nesneler olduğundan bunları birim testlerinde veya diğer hikâyelerde içe aktarabilir ve birleştirebilirsiniz.

import { Primary } from './Button.stories';

test('renders primary button', () => {
  render(<Button {...Primary.args} />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Hızlı Kontrol

CSF3'te bir hikâyenin özelliklerini veya durumunu nasıl tanımlarsınız?

Özet

CSF3 hikâyeleri, args içeren tür denetimli nesnelerdir. Ortak varsayılanları meta.args içinde ayarlayın, hikâye başına geçersiz kılın, özel JSX için render kullanın ve otomatik oluşturulan belgeler için tags: ['autodocs'] ekleyin. Her anlamlı bileşen durumu için bir hikâye yazın.

Sıkça Sorulan Sorular

“CSF3 Hikâyeleri Yazma” dersi ücretsiz mi?

Evet — “CSF3 Hikâyeleri Yazma” 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.

“CSF3 Hikâyeleri Yazma” dersinde ne öğreneceğim?

Component Story Format 3'ü kullanarak varsayılan bir meta nesnesi ve adlandırılmış hikâyeler dışa aktarı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 2. dersidir.

“CSF3 Hikâyeleri Yazma” 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