React kullanmanın avantajlarından biri, UI bileşenleri oluşturabilmeniz, bunları uygulamanızın her yerinde yeniden kullanabilmeniz ve sonuçta kod karmaşasını önleyebilmenizdir. 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. UI bileşenlerini bağımsız bir çalışma zamanı ortamında 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?

Hikaye kitabı UI bileşenlerinizi eksiksiz bir React ortamı olmadan çalıştırmanıza ve test etmenize olanak tanıyan bir geliştirme aracıdır. Bu yapar bileşen odaklı geliştirme daha kolay çünkü bileşenleri ayrı ayrı geliştirebilirsiniz.

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

instagram viewer

Storybook, hikayeleri oluştururken kod eklemenize izin verdiğinden, bir dokümantasyon aracı olarak da hizmet edebilir.

Storybook'u kullanmak için, makinenizde Node'un kurulu olması ve temel bir React anlayışına sahip olmanız gerekir.

Bir React Uygulaması Oluşturma

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

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

npx oluşturmak-react-app btn-hikaye kitabı

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 yükleyebilir ve çalıştırabilirsiniz.

Hikaye Kitabını Yükleme

btn-storybook klasörüne gidin ve storybook'u yükleyin:

CD btn-hikaye kitabı
npx hikaye kitabı başlangıcı

create-react-app kullandığınız için, Storybook'u kurmak için çalıştırmanız gereken tek komut bu. Storybook, gerekli tüm bağımlılıkları yükleyecek ve gerekli tüm yapılandırmayı gerçekleştirecektir. Ayrıca, başlamanıza yardımcı olacak bazı ortak hikayeler oluşturacaktır.

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

npm run hikaye kitabı

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

Düğme Bileşenini Oluşturma

./src klasöründe Bileşenler adlı bir klasör oluşturun ve içinde 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:

içe aktarmak PropTypes itibaren "prop türleri"
function Düğme({ etiket, arkaplanRenk = "#6B4EFF", renk = "beyaz", sınırYarıçap="48 piksel", sınır="Yok"}) {
const stil = {
 arka plan rengi,
 dolgu malzemesi: "0,5 rem 1 rem",
 renk,
 sınırYarıçap,
 sınır
 }
dönüş (
<düğme stili={stil}>
 {etiket}
</button>
 )
}
Button.propTypes = {
etiket: PropTypes.sicim,
arka plan rengi: PropTypes.sicim,
renk: PropTypes.sicim,
sınır:PropTypes.string,
sınır yarıçapı: PropTypes.sicim,
}
ihracatvarsayılan Buton;

Bu bileşen, bazı Tepki sahne düğme etiketini ve stillerini içerir. Ayrıca, iletilen propların türlerini kontrol etmek ve yanlış tip kullanırsanız bir uyarı vermek için propTypes kullanıyorsunuz. Bileşen, bir düğme öğesi döndürür.

Düğme Hikayeleri Oluşturma

Storybook'u React projesine yüklediğinizde, bazı hikaye örneklerini içeren bir klasör oluşturdu. hikayeler. Bu klasöre gidin ve içindeki her şeyi silin. Hikayeleri sıfırdan yaratacaksınız.

Birincil düğmeyi ve ikincil düğmeyi temsil eden iki hikaye oluşturacaksınız. Bu düğmelerin her birinin onu diğerlerinden ayıran farklı bir stili vardır. Hikayeleri oluşturduktan sonra her birini Storybook panosunda görebileceksiniz.

Hikayeler klasöründe button.stories.js adında yeni bir dosya oluşturun. dahil etmek önemlidir .hikayeler .js'den önce, bir hikaye dosyası olan Storybook'u söyleyen şey budur.

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

içe aktarmak Buton itibaren "../Bileşenler/Düğme/Düğme"

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.

ihracatvarsayılan {
 Başlık: "Bileşenler/Düğme",
 bileşen: Düğme,
}

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

dışa aktarma const Birincil = () =><Düğme arka planıRenk="#6B4EFF" etiket="Öncelik"/>

Şimdi Storybook kontrol paneline giderseniz, render butonunu görebileceksiniz.

Oluşturulan bileşeni canlı olarak düzenlemek ve Storybook panosundaki durumunu değiştirmek için args kullanacaksınız. Arg'lar, değiştirildiğinde bileşenin yeniden oluşturulmasına neden olan Storybook'a argümanlar iletmenize izin verir.

Düğme hikayesinin argümanlarını tanımlamak için bir fonksiyon şablonu oluşturun.

const Şablonu = argümanlar =><{...args}/ düğmesi>

Bu şablon, argümanları kabul eder ve bunları Düğme bileşenine destek olarak iletir.

Şimdi, aşağıda gösterildiği gibi şablonu kullanarak Birincil hikayeyi yeniden yazabilirsiniz.

ihracatconst Birincil = Template.bind({})
Birincil.args = {
 arka plan rengi: "#6B4EFF",
 etiket: "Öncelik",
}

Storybook panosunu kontrol ederseniz, altta kontrolleri görmelisiniz. Bu kontroller, düğmenin nasıl görüntüleneceğini değiştirmenizi sağlar. Arka plan rengini, metin rengini, etiketi, kenarlığı ve kenarlık yarıçapını değiştirebilirsiniz.

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

ihracatconst İkincil = Template.bind({})
İkincil.args = {
 arka plan rengi: "#E7E7FF",
 renk: "#6B4EFF",
 etiket: "İkincil",
}

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

UI Bileşenlerini Test Etme

Bu eğitim size Storybook'u React UI bileşenleriyle kullanma konusunda kısa bir giriş yaptı. Bir React projesine Öykü Kitabı'nı nasıl ekleyeceğinizi ve bağımsız değişkenler içeren bir Düğme bileşeni için nasıl temel bir öykü 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ş olabilirsiniz. Daha fazla kod yazıyor olabilirsiniz, ancak bileşen öykülerini yazdıktan sonra, bileşenleri uygulamanız genelinde yeniden kullanırken ortaya çıkabilecek hataları en aza indirirsiniz. Ayrıca, meydana gelirse hatayı izlemek daha kolay olacaktır. Bileşen odaklı geliştirmenin güzelliği budur.