Storybook Basics
Memahami Storybook sebagai workshop component di luar route product, lalu menjalankan setup lokal secara bertahap dan jujur.
Tujuan belajar
- Menjelaskan kapan Storybook membantu review component lebih cepat daripada membuka route product
- Membedakan component workshop dari integration page dan end-to-end flow
- Menjalankan setup Storybook lokal dengan command serta output yang dapat diperiksa
- Mencatat setup issue tanpa menganggap FluentStack dapat memverifikasi mesin lokal learner
Isi lesson
5 blok- 1.Storybook adalah workshop component, bukan aplikasi keduaBelum selesaiWajib
- 2.Setup lokal pertama secara bertahapBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Storybook adalah workshop component, bukan aplikasi kedua
WajibRoute product memperlihatkan component dalam data, layout, permission, dan navigation nyata. Itu penting, tetapi sering terlalu banyak context untuk meninjau satu Button, FormField, atau Card. Storybook memberi workspace terpisah untuk melihat component secara fokus: default, setiap variant, disabled, loading, error, content panjang, dan edge case. Ia membantu team membicarakan UI yang sama tanpa mereproduksi seluruh flow aplikasi.
Storybook bukan pengganti integration test, manual QA route product, atau accessibility audit lengkap. Gunakan Storybook untuk membuat contract visual dan state component mudah ditemukan; gunakan route product serta test lain untuk memeriksa integration. Setup terjadi di local project, sehingga FluentStack hanya memberi langkah dan checklist. Jangan menandai local action selesai sebelum command benar-benar berjalan di mesinmu.
Bagian ini memengaruhi progres lesson.
Setup lokal pertama secara bertahap
Wajib# Dari root local React atau Next.js project.
npm create storybook@latest
# Periksa package.json dan folder .storybook.
npm run storybookCLI resmi membaca dependency project lalu menawarkan konfigurasi yang sesuai. Setelah setup, periksa script baru di package.json, folder .storybook, dan story contoh. Jangan menghapus boilerplate sebelum Storybook berhasil dibuka sekali. Command dan kebutuhan versi dapat berubah, jadi dokumentasi resmi tetap sumber kebenaran untuk project lokal.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Lakukan setup Storybook pada local React atau Next.js project yang aman diubah. Tulis setup note: lokasi project, command yang kamu jalankan satu per satu, script/folder yang muncul, component pertama yang ingin didokumentasikan, URL atau hasil terminal saat berhasil, dan blocker spesifik bila ada. Jika belum bisa setup, tulis blocker serta docs yang akan dibaca. Jangan mengklaim berhasil jika command belum dijalankan.
Tulis draft dulu sebelum menandai writing practice selesai.
0/500 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Peran paling tepat Storybook pada project frontend adalah
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Storybook memisahkan review component dari complexity route product.
- Storybook tidak menggantikan integration test, route QA, atau accessibility review lengkap.
- Setup lokal harus dijalankan serta dicatat secara jujur oleh learner.
- Mulai dari satu component kecil yang memiliki state serta consumer nyata.
- Berikutnya, kita menulis stories yang menjelaskan default, variant, state, dan edge case.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Storybook adalah workshop component, bukan aplikasi kedua.