Merhaba MMOZirve Ailesi
Modern Mimarinin Temel Taşı: Bileşen Tabanlı Mimari Rehberi
Modern Front-End geliştirmede, büyük ve karmaşık uygulamalar artık tek bir bütün olarak değil, küçük, bağımsız ve yeniden kullanılabilir parçalar—yani bileşenler (components) olarak inşa ediliyor. Bu mimari, projelerinizi daha yönetilebilir, test edilebilir ve ölçeklenebilir hale getirir.
1. Bileşen Nedir ve Neden Hayatidir?
Basitçe söylemek gerekirse, bir bileşen, uygulamanızın arayüzündeki tek ve izole edilmiş bir parçadır. Bu, bir buton kadar küçük veya tüm bir navigasyon çubuğu kadar büyük olabilir.
- Yeniden Kullanılabilirlik: Bir Button bileşeni yazdığında, bunu uygulamanın her yerinde (ana sayfa, profil sayfası, sepet) tekrar tekrar kullanabilirsin. Bu, hem kod tekrarını önler hem de geliştirme hızını artırır.
- İzolasyon ve Bağımsızlık: Her bileşen kendi işlevinden, görünümünden ve durumundan (State) sorumludur. Bir bileşendeki değişiklik, diğer bağımsız bileşenleri etkilemez. Bu durum, hata ayıklamayı (debugging) ve bakımı çok kolaylaştırır.
- Kolay Test Edilebilirlik: Bileşenler küçük ve bağımsız olduğu için, her birini tek tek test etmek çok kolaydır. Bu da, uygulamanın genel güvenilirliğini ciddi ölçüde artırır.
2. Bileşen Hiyerarşisini Kurmak
Uygulamanı bileşenlere ayırırken, mantıklı bir hiyerarşi kurman önemlidir. Bu, genellikle bir ağaç yapısına benzer.
- Container (Kapsayıcı) Bileşenler: Bunlar, genellikle sayfaların ve bölümlerin en üst seviyesinde yer alır. Veri çekme (API çağrıları) ve iş mantığını yönetme gibi ağır işleri üstlenir.
- Presentational (Sunumsal) Bileşenler: Bunlar daha küçük, basit ve "aptal" bileşenlerdir. Yalnızca kendilerine verilen veriyi ekranda göstermeyi bilirler. Genellikle butonlar, kartlar veya başlıklar gibi temel UI öğeleridir. İş mantığı (logic) içermezler.
3. Props ve State Kavramları
Bileşen mimarisinin iki temel kavramı, veri akışını yönetir.
- Props (Properties): Verinin ebeveyn (parent) bileşenden alt (child) bileşenlere aktarılmasını sağlayan tek yönlü bir mekanizmadır. Alt bileşenler Props değerlerini değiştiremez, sadece okuyabilir.
- State (Durum): Bir bileşenin kendi içinde tuttuğu ve zamanla değişebilen verilerdir (örneğin, bir sayacın güncel değeri, bir formun içeriği). State değiştiğinde, sadece o bileşen ve ona bağlı olan alt bileşenler otomatik olarak yeniden çizilir (re-render).
