React Academy · Ders

Args, Controls ve Actions Eklentisi

Hikâyeleri etkileşimli hâle getirmek için args'ı, bileşen olaylarını günlüklemek için actions eklentisini kullanın.

Args, Controls ve Actions Eklentisi, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. 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.

Argümanlar Nedir?

Argümanlar, bir hikâyenin girdileridir (özellikleridir). Storybook, bileşeni işlemek ve Storybook kullanıcı arayüzündeki canlı özellik düzenleyicisi olan Denetimler panelini çalıştırmak için args nesnesini kullanır.

Argümanları Tanımlama

Argümanları hikâye nesnesinde ayarlayın. Storybook, denetim türünü TypeScript özellik türünden çıkarır.

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

Denetimler Paneli

Argümanlar tanımlandığında Storybook, tuvalin altında bulunan Denetimler panelinde etkileşimli denetimler oluşturur. Bir denetimin değiştirilmesi, hikâyeyi yeni özelliklerle yeniden işler; kod değişikliği gerekmez.

Denetimleri Özelleştirmek için ArgTypes

Bir özelliğin Denetimler bölümünde nasıl görüneceğini özelleştirmek için meta içinde argTypes kullanın: tür, seçenekler, açıklama ve varsayılan değer.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Visual style of the button',
    },
    size: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
};

Argümanları Denetimlerden Gizleme

Bir özelliği Denetimler panelinden gizlemek için argTypes içinde control: false ayarlayın. Bu, dahili özellikler veya işlevler için yararlıdır.

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

Eylemler Eklentisi

addon-essentials paketinin parçası olan Eylemler eklentisi, özellik işlevi çağrılarını Eylemler panelinde günlüğe kaydeder. Panelde gösterilen izleyici işlevleri oluşturmak için @storybook/test içindeki fn() işlevini kullanın.

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

argTypes ile Eylemleri Otomatik Bağlama

fn() işlevini içe aktarmadan otomatik olarak bir eylem işleyicisi oluşturmak için argTypes: { onClick: { action: 'clicked' } } kullanın.

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

Global Argümanlar

Tüm hikâyelere global olarak uygulamak için argümanları preview.ts içinde ayarlayın. Bu, her bileşeni etkileyen tema, yerel ayar veya görünüm alanı argümanları için yararlıdır.

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

Storybook Araç Çubuğu

toolbar yapılandırmasına sahip global argümanlar Storybook araç çubuğunda düğmeler olarak görünür ve temaları, yerel ayarları veya kesme noktalarını global olarak değiştirmenizi sağlar.

Argümanları Birleştirme

Başka bir hikâyedeki argümanları yayarak onun üzerine yeni bir hikâye oluşturun. Bu, varyant hikâyeleri oluştururken yinelemeleri azaltır.

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

export const PrimaryLoading: Story = {
  args: { ...Primary.args, loading: true },
};

export const PrimaryDisabled: Story = {
  args: { ...Primary.args, disabled: true },
};

Denetim Değerlerini Eşleme

İnsan tarafından okunabilir denetim seçeneklerini gerçek özellik değerleriyle (örneğin simgeler veya bileşenlerle) eşlemek için argTypes içinde mapping kullanın.

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

Hızlı Kontrol

@storybook/test paketindeki fn() işlevi, öykü argümanı olarak kullanıldığında ne yapar?

Özet

Argümanlar hem Controls panelini (canlı özellik düzenleyicisini) hem de Actions eklentisini (olay günlüğünü) güçlendirir. Daha zengin denetimler için argüman türlerini argTypes ile tanımlayın, eylem günlüğü oluşturmak için @storybook/test paketindeki fn() işlevini kullanın ve yinelemeyi azaltmak için argümanları öyküler arasında birleştirin.

Sıkça Sorulan Sorular

“Args, Controls ve Actions Eklentisi” dersi ücretsiz mi?

Evet — “Args, Controls ve Actions Eklentisi” 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.

“Args, Controls ve Actions Eklentisi” dersinde ne öğreneceğim?

Hikâyeleri etkileşimli hâle getirmek için args'ı, bileşen olaylarını günlüklemek için actions eklentisini kullanı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 3. dersidir.

“Args, Controls ve Actions Eklentisi” 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