React Component Geliştirme Süreçleri

StoryBook: UI Development Env

Component

React component’larını lego parçaları gibi düşünebiliriz. Her parça başka bir bütünü tamamlama görevini üstlenir. Her ne kadar farklı katmanlara ayrılıyor olsa da (component, container, layout vb.) işin özünde her şey component’dır.

Şu yazımda component geliştirme sürecine ufaktan değinmiştim. UI geliştirme ortamları bu süreci doğru ve hızlı bir şekilde yönetmemiz için faydalandığımız oldukça şirin araçlar 😊 Bu arada Storybook kadira ekibinin geliştirdiği bir araç.

Storybook webpack üzerinde Hot module replacement yaparak component geliştirme sürecinde live preview özelliğinden faydalanmamızı sağlıyor. En büyük artılarından biri bu bana göre.

Başlangıç

Storybook kurulumu için gerekli dökümana şu adresden ulaşabilirsiniz. Oldukça basit bir kurulumu var. 👍

💡Nasıl Çalışıyor ?

Storybook beraberinde bir config dosyası ile birlikte geliyor. loadStories() isminde bir fonksiyon içerisine her component için önceden oluşturacağınız .story uzantılı component story file’ları path belirterek import ediyorsunuz.

📚 Component Story File

Story file geliştireceğimiz component’ı barındıran bir wrapper görevini üstleniyor. React component’larını çoğu zaman presentational yapıda tasarladığımız için bu wrapper’dan load ettiğimiz component’a ihtiyacı olan prop’ları ister bir mock data ile json file’dan istersek manuel olarak kendimiz pass ederek geliştirme yapmaya devam edebiliriz.

Örnek Component

Component’ımızı basitçe bir article box olarak tasarlayabiliriz. Dışarıdan aldığı prop’lar ile kendisini şekillendirecek. Bu prop’ları .story file’dan pass ederek component’ı storybook ile render ettirebiliriz.

Sağladığı Avantajlar

  • StoryBook ile component geliştirmenin güzel yanı ekip halinde aynı feature üzerinde çalışmanın daha kolay hale gelmesi.
  • Geliştirilen component’ların storybook üzerinde kategorize edilerek sergilenmesi, farklı durumlarının nasıl yansıma yaptığını (örneğin image olmadığında component nasıl bir şekle bürünecek?) canlı olarak görebiliriz.
  • Kendi uygulama katmanınızla bir bağlantısı yok o nedenle rahat bir şekilde component geliştirebilirsiniz.
https://getstorybook.io

StoryBook genel olarak bu şekilde çalışır. Geliştireceğiniz component için basit ve hızlı bir arayüz sunar size. Config dosyasına import ettiğiniz her .story file buraya düşer. Her .story file bir veya birden fazla farklı component kapsayabilir. Ancak doğru olan ve benim kişisel tavsiyem her .story file içinde tek bir component kullanmanız yönünde.

Neden Kullanmalıyız ?

Bu tarz araçları kullanmanın en önemli nedeni yeni bir projeye başlamadan önce gerekli lego parçalarının olası tüm case’lerinin düşünülerek tasarlanması ve hazır hale getirilmesi gerektiğidir. Eğer bütünü oluşturmadan her lego parçasını ayrı ayrı QA testine tabii tutarsak parçaları birleştirerek oluşturduğumuz bir uygulamada ortaya çıkabilecek hatalarında önüne önceden geçmiş oluruz.