Series for React Architecture
React Örnek Proje Mimarisi — 2 (Page Structure)
React Proje Mimari Yapısının Nasıl Olması Konusunda her geçen gün Mevcut fikirlerimi biraz daha ilerleterek geliştiriyorum. Bu yazı bu gelişim sürecinin bir parçası.
Bunu yaparken biraz geriye giderek önceki yazılardan alıntılar yaparak bu yazıyı anlatacağım.
İlk yazım buydu. React Örnek Proje Mimarisi Bu yazıda örnek bir React Projesinin olması gereken ana parçaları anlatmıştım.
Şu anda projelerde görmediğim ama daha hala savunduğum Container — Component yapısı. Ve bunun bağlantılı olduğu Store, Routing ve Utils konularından bahsetmiştim.
Bence Container yapısının Component ile Dikey Fonksiyonlar arasında kurduğu soyutlama kavramı oldukça başarılı.
Bu günümüzde çok çeşitli Hook’ların yaygınlaşması ile artık direk olarak bileşenlerin içerisinden bir kullanıma evrilme gösteriyor. Ben bunu daha hala soyutlama anlamında doğru bulmuyorum. Yani bileşenlerin kendilerine verilen bir Container kaplaması üzerinden haberleştirilmesi o bileşen yapılarının benzerlerinin başka bağlantı yapıları ile tekrar tekrar kullanılabilmesini sağlıyor.
Konuyu Biraz Daha Açalım.
Uygulamalar sayfalar ve sayfalarda bileşenlerden oluşur. Bunu biraz daha derin inceleyelim.
Page (Sayfa)
Bir sayfaya girdiniz bu sayfanın Store ile bağlantı kurması, Network tetiklemesi, LocalStorage bir şeyler yazması vs.. vs.. lazım. Tüm bunları PageContainer üzerinden soyutladığınız bir yapı ile verdiğiniz taktirde. Page dışarıda sadece Container üzerindeki fonksiyonlar ile çağrım yapar veya props ile tetiklenir… Layout üzerinden component yerleşimlerini ve iletişimlerini yönetir.
Page Comp (Sayfa Bileşenleri)
Örneğin sayfamız bir Main sayfa olsun. Bu sayfanın içeriside
- Menu yapısı,
- Sidebar
- Breadcrumb yapısı,
- Tablo yapısı
- Tree yapısı vb..
Bu sayfada bulunan bileşenler (page components) ilgili domaini bilirler çünkü, kullanıcı bilgisi, rolü, içeriği, uygulamanın state göre farklılıklar gösterceğinden tüm bunların logiclerinin yönetildiği kısımdır
PageComp aslında Page’den farklı bir bileşen yapısı değildir. Tek farkı burada siz Page bir Mediator gibi kullanıp Page props ve callback fonksiyonlar sağlayarak domaini daha anlaşılır bir şekilde yönetmeyi sağlatabilirsiniz.
React doc anlatıldığı gibi burada Sharing State Between Components ile Page ortak birbiri ile etkileşimli State ve Logicleri yönettiği bir yapı halinde kullanılabilir.
Not: Bu kısımda yer alan PageComp 2 türde haberleşme sağlayabilirler.
- Sharing State Between Components
- İkincisi de yukarıda bahsettiğim gibi her bir PageComp → bir Container olup diğer kendi Container üzerinden haberleşmesi.
Custom Components
Sayfa bileşenlerinin hızlı bir şekilde domain verileri ile doldurabilmesini sağlayan, sayfalar arasında ufak farklılıklar gösteren ama size özelleşmiş bileşenler. Tablolar, Breadcrumb, Tree, Sidebar … Burada bahsettiğim bileşenler Storybook içerisinde gösterilebilir. Amacı sayfalarda tekrar tekrar kullanılan bileşenleri reuse ederek (logic, styling vb..) tekrar tekrar kod yazımını engellemektir
3rd Party Components
Bu kısımda Custom components oluşturduğunuz UI Kütüphanesi (MUI, Ant, Prime), veya Chart kütüphaneleri (Rechart, Visx, Nivo) vb NPM paketlerinin sizin projeniz için kullanılabilir hale getirilmesidir.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
