React kullanmanın avantajlarından biri, UI bileşenleri oluşturabilmeniz, bunları tüm uygulamanızda yeniden kullanabilmeniz ve sonuç olarak kod karışıklığını önlemenizdir. Yine de, yalnızca React ile tamamen bağımsız UI bileşenleri oluşturmak zordur. Bunları görmek için bu bileşenleri görüntüleyen görünümler oluşturmanız gerekir.

Storybook’un devreye girdiği yer burasıdır. Bağımsız bir çalışma zamanı ortamında UI bileşenleri oluşturmanıza ve test etmenize olanak tanır ve bu eğitimde onu React’te nasıl kullanacağınızı öğreneceksiniz. Bu yazının sonunda, bir düğme bileşeni oluşturmuş ve olası durumlarından bazılarını React’te belgelemiş olacaksınız.

Hikaye Kitabı Nedir?

Storybook , UI bileşenlerinizi eksiksiz bir React ortamı olmadan çalıştırmanıza ve test etmenize izin veren bir geliştirme aracıdır. Bu, bileşenleri tek başına geliştirebileceğiniz için bileşen odaklı geliştirmeyi kolaylaştırır.

Storybook ile bir bileşen oluşturduğunuzda, bileşenin çeşitli durumlarını tanımlayan birden fazla hikaye oluşturabilirsiniz. Bir düğme bileşeni için bu durumlar birincil durumu, ikincil durumu, devre dışı durumu vb. içerebilir.

Storybook, hikayeleri oluştururken kod eklemenize izin verdiğinden, aynı zamanda bir dokümantasyon aracı olarak da kullanılabilir.

Storybook’u kullanmak için makinenizde Node’un kurulu olması ve temel React bilgisine sahip olmanız gerekir.

React Uygulaması Oluşturma

Storybook’u kullanmaya başlamak için önce bir React projesi oluşturacak , ardından bileşenleri ve bunların hikayelerini oluşturacaksınız.

Bir React uygulaması oluşturmak için aşağıdaki komutu çalıştırın:

npx create-react-app btn-storybook

Bu, bir React uygulamasının ihtiyaç duyduğu tüm bağımlılıkları içeren btn-storybook adlı bir klasör oluşturacaktır.

Ardından, sadece birkaç adımla Storybook’u kurabilir ve çalıştırabilirsiniz.

Storybook’u Kurmak

btn-storybook klasörüne gidin ve storybook’u kurun:

cd btn-storybook

npx storybook init

Create-react-app kullandığınız için, Storybook’u kurmak için çalıştırmanız gereken tek komut budur. Storybook, gerekli tüm bağımlılıkları kuracak ve gerekli tüm yapılandırmayı gerçekleştirecektir. Ayrıca, başlamanız için bazı basmakalıp hikayeler de oluşturacaktır.

Yukarıdaki komutun çalışması bittiğinde, aşağıdaki kodu kullanarak hikaye kitabını başlatın.

npm run storybook

Bu, tarayıcınızda hikaye kitabı kontrol panelini açacaktır. Bunun gibi bir şeye benzemeli:

Yazılımı yapılandırmak veya daha fazlasını okumak için seçenekler içeren Storybook kontrol panelini gösteren bir web sayfası

Düğme Bileşenini Oluşturma

./src klasöründe, Bileşenler adlı bir klasör oluşturun ve bu klasörde Düğme adlı başka bir klasör oluşturun. Button klasörü şu yolda olmalıdır: ./src/Components/Button.

Şimdi, bu klasörde Button oluşturun ve aşağıdaki kodu ekleyin:

import PropTypes from “prop-types”

function Button({ label, backgroundColor = “#6B4EFF”, color = “white”, borderRadius=”48px”, border=”none”}) {

const style = {

backgroundColor,

padding: “0.5rem 1rem”,

color,

borderRadius,

border

}

return (

<button style={style}>

{label}

</button>

)

}

Button.propTypes = {

label: PropTypes.string,

backgroundColor: PropTypes.string,

color: PropTypes.string,

border:PropTypes.string,

borderRadius: PropTypes.string,

}

export default Button;

Bu bileşen , düğme etiketini ve stillerini içeren bazı React donanımlarını kabul eder. PropTypes’ı, iletilen donanım türlerini kontrol etmek ve yanlış türü kullanırsanız bir uyarı oluşturmak için de kullanıyorsunuz. Bileşen, bir düğme öğesi döndürür.

Düğme Hikayelerini Oluşturma

Storybook’u React projesine yüklediğinizde, bazı hikaye örneklerini içeren bir klasör oluşturuldu ve bu klasöre story adı verildi . Bu klasöre gidin ve içindeki her şeyi silin. Hikayeleri sıfırdan oluşturacaksınız.

Birincil düğmeyi ve ikincil düğmeyi temsil eden iki hikaye oluşturacaksınız. Bu düğmelerin her biri, onu diğerlerinden ayıran farklı bir stile sahiptir. Hikayeleri oluşturduktan sonra Hikaye Kitabı kontrol panelinde her birini görebileceksiniz.

Hikayeler klasöründe button.stories.js adlı yeni bir dosya oluşturun. Hikayeler dosyası olan Storybook’u anlatan şey bu olduğundan , .js’den önce .stories’i eklemek önemlidir .

Düğme bileşenini içe aktarın.

import Button from “../Components/Button/Button”

Ardından, bileşenin başlığını ve bileşenin kendisini dışa aktarın. Başlığın isteğe bağlı olduğunu unutmayın.

export default {

title: “Components/Button”,

component: Button,

}

Oluşturacağınız ilk hikaye Primary butonu içindir. Bu nedenle, Birincil adlı yeni bir işlev oluşturun ve dışa aktarın.

export const Primary = () => <Button backgroundColor=”#6B4EFF” label=”Primary”/>

Şimdi Storybook kontrol paneline giderseniz, oluşturulan butonu görebileceksiniz.

Oluşturulan bileşeni canlı olarak düzenlemek ve durumunu Storybook kontrol panelinde değiştirmek için args’ı kullanacaksınız. Bağımsız değişkenler, değiştirildiğinde bileşenin yeniden oluşturulmasına neden olan bağımsız değişkenleri Storybook’a iletmenize izin verir.

Düğme öyküsünün bağımsız değişkenlerini tanımlamak için bir işlev şablonu oluşturun.

const Template = args => <Button {…args}/>

Bu şablon bağımsız değişkenleri kabul eder ve bunları donanım olarak Button bileşenine iletir.

Şimdi, aşağıda gösterilen şablonu kullanarak Birincil öyküyü yeniden yazabilirsiniz.

export const Primary = Template.bind({})

Primary.args = {

backgroundColor: “#6B4EFF”,

label: “Primary”,

}

Storybook kontrol panelini kontrol ederseniz, alt kısımda kontrolleri görmelisiniz. Bu kontroller, düğmenin nasıl görüntüleneceğini değiştirmenize izin verir. Arka plan rengini, metin rengini, etiketi, kenarlığı ve kenarlık yarıçapını değiştirebilirsiniz.

Diğer öyküleri oluşturmak için yalnızca args değerlerini değiştirmeniz gerekir. Örneğin, İkincil bir düğme oluşturmak için aşağıdaki kodu kullanın.

export const Secondary = Template.bind({})

Secondary.args = {

backgroundColor: “#E7E7FF”,

color: “#6B4EFF”,

label: “Secondary”,

}

Öykü Kitabı kontrol panelinde, kenar çubuğunda üzerlerine tıklayarak farklı öykülere gidin. Her birinin nasıl işlediğini göreceksiniz. Düğme hikayelerine istediğiniz kadar daha fazla durum eklemeye devam edebilirsiniz. Bir taslak veya anahat hikayesi eklemeyi deneyin.

Kullanıcı Arayüzü Bileşenlerini Test Etme

Bu eğitim, Storybook’u React UI bileşenleriyle kullanmaya yönelik kısa bir giriş sağladı. Storybook’u bir React projesine nasıl ekleyeceğinizi ve args içeren bir Button bileşeni için temel bir hikayeyi nasıl oluşturacağınızı öğrendiniz.

Bu işlem sırasında düğme bileşeninin farklı durumlarda nasıl işlendiğini test ettiğinizi fark etmişsinizdir. Daha fazla kod yazıyor olabilirsiniz, ancak bileşen hikayelerini yazdıktan sonra, bileşenleri uygulamanızda yeniden kullanırken ortaya çıkabilecek hataları en aza indirirsiniz. Ayrıca, meydana gelmesi durumunda hatanın izini sürmek daha kolay olacaktır. Bileşen güdümlü geliştirmenin güzelliği budur.