Salah satu keuntungan menggunakan React adalah Anda dapat membuat komponen UI, menggunakannya kembali di seluruh aplikasi Anda dan pada akhirnya menghindari churn kode. Namun, sulit untuk membuat komponen UI yang sepenuhnya independen dengan React saja. Anda harus membuat tampilan yang menampilkan komponen ini untuk melihatnya.
Di sinilah Storybook masuk. Ini memungkinkan Anda untuk membuat dan menguji komponen UI di lingkungan runtime independen dan dalam tutorial ini Anda akan belajar cara menggunakannya di React. Pada akhir posting ini, Anda akan membuat komponen tombol dan mendokumentasikan beberapa kemungkinan statusnya di React.
Apa itu Buku Cerita?
buku cerita adalah alat pengembangan yang memungkinkan Anda menjalankan dan menguji komponen UI Anda tanpa lingkungan React yang lengkap. Ini membuat pengembangan berbasis komponen lebih mudah karena Anda dapat mengembangkan komponen secara terpisah.
Dengan Buku Cerita, setelah Anda membuat komponen, Anda dapat membuat beberapa cerita yang menentukan berbagai status komponen. Untuk komponen tombol, status ini dapat mencakup status primer, status sekunder, status dinonaktifkan, dan seterusnya.
Karena Buku Cerita memungkinkan Anda untuk memasukkan kode saat membuat cerita, itu juga dapat berfungsi sebagai alat dokumentasi.
Untuk menggunakan Storybook, Anda harus menginstal Node di mesin Anda dan memiliki pemahaman dasar tentang React.
Membuat Aplikasi React
Untuk mulai menggunakan Buku Cerita, Anda pertama-tama akan membuat proyek React dan kemudian membuat komponen dan cerita mereka.
Jalankan perintah berikut untuk membuat aplikasi React:
npx membuat-react-app btn-buku cerita
Ini akan menghasilkan folder bernama btn-storybook dengan semua dependensi yang dibutuhkan aplikasi React.
Selanjutnya, hanya dengan beberapa langkah lagi, Anda dapat menginstal dan menjalankan Storybook.
Memasang Buku Cerita
Arahkan ke folder btn-storybook dan instal buku cerita:
CD btn-buku cerita
init buku cerita npx
Karena Anda menggunakan create-react-app, ini adalah satu-satunya perintah yang perlu Anda jalankan untuk menyiapkan Storybook. Storybook akan menginstal semua dependensi yang diperlukan dan melakukan semua konfigurasi yang diperlukan. Ini juga akan membuat beberapa cerita boilerplate untuk Anda mulai.
Setelah perintah di atas selesai dijalankan, mulailah buku cerita menggunakan kode berikut.
npm run buku cerita
Ini akan membuka dasbor buku cerita di browser Anda. Seharusnya terlihat seperti ini:
Membuat Komponen Tombol
Di folder ./src, buat folder bernama Components, dan di dalamnya buat folder lain bernama Button. Folder Tombol harus berada di jalur ini: ./src/Components/Button.
Sekarang, di folder ini, buat Button dan tambahkan kode berikut:
impor Tipe Prop dari "tipe prop"
Tombol fungsi({ label, warna latar = "#6B4EFF", warna = "putih", batasRadius="48px", batas ="tidak ada"}) {
konstan gaya = {
warna latar belakang,
lapisan: "0,5rem 1rem",
warna,
perbatasanRadius,
berbatasan
}
kembali (
<gaya tombol={style}>
{label}
</button>
)
}
Button.propTypes = {
label: Tipe Prop.rangkaian,
warna latar belakang: Tipe Prop.rangkaian,
warna: Tipe Prop.rangkaian,
berbatasan:PropTypes.string,
batasRadius: Tipe Prop.rangkaian,
}
eksporbawaan Tombol;
Komponen ini menerima beberapa Alat peraga reaksi yang menyertakan label tombol dan gayanya. Anda juga menggunakan propTypes untuk memeriksa jenis props yang diteruskan dan memberikan peringatan jika Anda menggunakan tipe yang salah. Komponen mengembalikan elemen tombol.
Membuat Cerita Tombol
Ketika Anda menginstal Storybook di proyek React, itu menghasilkan folder yang berisi beberapa contoh cerita, bernama cerita. Arahkan ke folder itu dan hapus semua yang ada di dalamnya. Anda akan membuat cerita dari awal.
Anda akan membuat dua cerita yang mewakili tombol utama dan tombol sekunder. Masing-masing tombol ini memiliki gaya berbeda yang membedakannya dari yang lain. Anda akan dapat melihat masing-masing cerita di dasbor Buku Cerita setelah Anda membuat cerita.
Di folder cerita, buat file baru bernama button.story.js. Penting untuk menyertakan .cerita sebelum .js karena itulah yang memberi tahu Storybook yang merupakan file cerita.
Impor komponen Tombol.
impor Tombol dari "../Komponen/Tombol/Tombol"
Selanjutnya ekspor judul komponen dan komponen itu sendiri. Perhatikan bahwa judul adalah opsional.
eksporbawaan {
judul: "Komponen/Tombol",
komponen: Tombol,
}
Cerita pertama yang akan Anda buat adalah untuk tombol Utama. Jadi, buat fungsi baru bernama Primer dan ekspor.
ekspor const Primer = () =><Warna latar belakang tombol="#6B4EFF" label="Utama"/>
Sekarang jika Anda pergi ke dasbor Buku Cerita, Anda akan dapat melihat tombol yang dirender.
Untuk mengedit komponen yang dirender secara langsung dan mengubah statusnya di dasbor Buku Cerita, Anda akan menggunakan args. Args memungkinkan Anda untuk meneruskan argumen ke Buku Cerita yang bila diubah menyebabkan komponen dirender ulang.
Untuk menentukan argumen cerita tombol, buat templat fungsi.
const Templat = argumen =><Tombol {...args}/>
Template ini menerima args dan meneruskannya sebagai props ke komponen Button.
Anda sekarang dapat menulis ulang cerita Pratama menggunakan templat seperti yang ditunjukkan di bawah ini.
eksporkonstan Utama = Template.bind({})
Primer.args = {
warna latar belakang: "#6B4EFF",
label: "Utama",
}
Jika Anda memeriksa dasbor Buku Cerita, Anda akan melihat kontrol di bagian bawah. Kontrol ini memungkinkan Anda untuk mengubah cara tombol ditampilkan. Anda dapat mengubah warna latar belakang, warna teks, label, batas, dan radius batas.
Anda hanya perlu mengubah nilai args untuk membuat cerita lainnya. Misalnya untuk membuat tombol Sekunder, gunakan kode berikut.
eksporkonstan Sekunder = Template.bind({})
Sekunder.args = {
warna latar belakang: "#E7E7FF",
warna: "#6B4EFF",
label: "Sekunder",
}
Di dasbor Buku Cerita, navigasikan ke berbagai cerita dengan mengkliknya di bilah sisi. Anda akan melihat bagaimana masing-masing merender. Anda dapat terus menambahkan lebih banyak status ke cerita tombol seperti yang Anda inginkan. Coba tambahkan garis besar atau garis besar cerita.
Menguji Komponen UI
Tutorial ini memberi Anda pengantar singkat untuk menggunakan Storybook dengan komponen React UI. Anda telah mempelajari cara menambahkan Buku Cerita ke proyek React dan cara membuat cerita dasar untuk komponen Button dengan args.
Anda mungkin telah memperhatikan bahwa selama proses ini, Anda menguji bagaimana komponen tombol dirender dalam status yang berbeda. Anda mungkin menulis lebih banyak kode, tetapi setelah Anda menulis cerita komponen, Anda akan meminimalkan kesalahan apa pun yang mungkin muncul saat menggunakan kembali komponen di seluruh aplikasi Anda. Selanjutnya, akan lebih mudah untuk melacak kesalahan jika itu terjadi. Itulah keindahan pengembangan yang digerakkan oleh komponen.
