React Academy · Pelajaran

Menyiapkan Storybook dalam Proyek React

Pasang Storybook, konfigurasikan untuk Vite atau CRA, dan jelajahi penjelajah komponen.

Menyiapkan Storybook dalam Proyek React adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Storybook?

Storybook adalah alat untuk mengembangkan, mendokumentasikan, dan menguji komponen antarmuka pengguna secara terisolasi. Setiap cerita merepresentasikan keadaan tertentu dari sebuah komponen, yang dapat dilihat di antarmuka Storybook tanpa menjalankan seluruh aplikasi Anda.

Instalasi

Jalankan perintah inisialisasi Storybook dalam proyek React Anda. Perintah ini secara otomatis mendeteksi kerangka kerja Anda (Vite, CRA, Next.js) dan membuat konfigurasinya.

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

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

Memulai Storybook

Jalankan server pengembangan Storybook pada port 6006. Server ini membuka penjelajah komponen di peramban Anda.

npm run storybook
# or
npx storybook dev -p 6006

Konfigurasi .storybook/main.ts

main.ts memberi tahu Storybook tempat menemukan cerita, add-on mana yang dimuat, dan kerangka kerja yang digunakan.

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;

Konfigurasi .storybook/preview.ts

preview.ts menerapkan dekorator global (misalnya, membungkus semua cerita dalam sebuah penyedia) dan menetapkan parameter global seperti warna latar.

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;

Menambahkan Dekorator untuk Konteks

Gunakan dekorator dalam preview.ts untuk membungkus semua cerita dengan penyedia yang dibutuhkannya (perute, tema, i18n), sehingga cerita tidak perlu mengimpornya satu per satu.

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

Menjelajahi Antarmuka Storybook

Bilah sisi mengelompokkan cerita berdasarkan komponen. Klik sebuah cerita untuk melihatnya di kanvas. Tab Dokumentasi menampilkan dokumentasi API yang dibuat otomatis dari properti TypeScript Anda.

Membangun Storybook Statis

Bangun situs HTML statis dari cerita Anda untuk dihosting di Chromatic, GitHub Pages, atau CDN apa pun.

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

Storybook untuk Dokumentasi Sistem Desain

Storybook unggul sebagai dokumentasi yang terus diperbarui untuk sistem desain. Tambahkan @storybook/addon-docs (bagian dari essentials) untuk membuat tabel properti dan contoh penggunaan secara otomatis dari tipe TypeScript Anda.

Penggantian Modul Panas

Storybook mendukung HMR. Edit komponen atau berkas cerita, lalu kanvas Storybook segera diperbarui tanpa memuat ulang halaman sepenuhnya.

Dukungan TypeScript

Kerangka kerja @storybook/react-vite menyediakan dukungan TypeScript utama. Gunakan generik Meta dan StoryObj untuk cerita yang sepenuhnya bertipe.

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

Cek Singkat

Berkas konfigurasi Storybook mana yang bertanggung jawab menerapkan dekorator global, seperti membungkus semua cerita dalam sebuah penyedia?

Ringkasan

Jalankan npx storybook init untuk menyiapkan Storybook, konfigurasikan penyedia global dalam preview.ts, dan tambahkan add-on dalam main.ts. Gunakan generik Meta dan StoryObj untuk cerita bertipe, lalu bangun situs statis dengan build-storybook untuk dibagikan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Storybook dalam Proyek React” gratis?

Ya — teks lengkap “Menyiapkan Storybook dalam Proyek React” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Storybook dalam Proyek React”?

Pasang Storybook, konfigurasikan untuk Vite atau CRA, dan jelajahi penjelajah komponen. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyiapkan Storybook dalam Proyek React” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy