Temiz Kodlama Prensipleri (React Üzerine) — 2.Kısım
Serinin ikinci ve son kısmından merhaba! Önceki yazımda temiz kodlamanın ne olduğundan ve prensiplerinden bahsetmiştim. Bu yazıda da React üzerinden detaylı örneklerle gideceğiz. Eğer ilk yazıyı okumadıysanız hemen şuradan okuyabilirsiniz :) Bu yazı da ilki ile aynı yabancı makaleden sadeleştirildi ve geliştirildi. Ayrıca bolca ECMAScript’ten bahsedeceğiz ve kullanacağız. Şu makale daha önce duymamış olanlar için faydalı olacaktır.
“DRY” Felsefesi
Kendini Tekrar Etme felsefesindeki en temel amacımız yazdığımız bir kodu tekrar başka yerde yazmamaktı.
Bunun için yukarıdaki örnekteki gibi aynı komponent içeriğinin başlıklı halini tekrar yazmak yerine başlığı yazıp geri kalan proplar ile komponenti tekrar render ediyoruz.
Default Değerler
Eğer yazdığımız komponent bir props alabilecek durumda ancak almadığında da o komponentin default bir değerle çalışmasını istiyorsak yeni bir değişkene default değer atamamıza hiç gerek yok!
Burada ES6'nın güzel bir özelliğinden faydalandık. Destructure edilirken eğer o prop gönderilmemişse ona otomatik bir değer atayabiliyoruz.
Veriler ile Render’ı Ayırma
Veriyi edindiğimiz yer ile render ettiğimiz yeri birbirinden ayırmalıyız. Bunun için veriyi yükleyen bir komponent ve gösteren ayrı bir komponent oluşturmak en temiz çözüm olacaktır.
Fonksiyonel Komponentler
React’a yeni başladığınızda en çok kafanızı karıştıran konu bu olmuştur muhtemelen. Neden class komponenti kullandık, neden fonksiyonel komponent kullandık? React v0.14.0 ile State içermeyen fonksiyonel komponentler geldi. Zamanla bu değişime Hook ve Contextler eklenerek olay tamamen fonksiyonel komponentlere evrildi. Yani artık this, state gibi ifadelerle uğraşmadan daha hızlı ve kafa karıştırıcı olmayan(bence) biçimde React komponentleri oluşturabiliyoruz. Bununla ilgili bir çok örnek ve detaylar için React’ın kendi dökümantasyonu çok aydınlatıcı.
Rest/Spread Operatörleri(?)
Bu güzel özellik de ES ile hayatımıza girdi. Artık objeleri sürekli birbirine atamak veya silmek gibi işlemlerle uğraşmıyoruz. Sadece “…”!
Destructure Özelliği
Yazı boyunca bahsettiğimiz ES6 ile gelen destructure özelliği sayesinde artık objeleri ve arrayları kolay yollarla parçalayabiliyoruz.
2 Parçaya böldüğüm Temiz Kodlama Prensipleri konusunu böylece bitirmiş oldum! Daha sonraki yazılarda görüşmek üzere.
