React Components(Bileşenler): Detaylı Anlatım ve Örnekler

React Componentslar, tekrar tekrar kullanabildiğimiz bağımsız UI(User Interface) parçalarıdır. (Components kelimesini makalenin tamamında bileşen olarak kullanacağım)

Bileşenler sıradan javascript fonksiyonlarıdır. İnput olarak bağımsız değişkenler alırlar ki bu inputlara “props” adı verilir, çıktı olarak ekranda görünen elementleri verirler. Bileşen fonksiyonları mutlaka baş harfleri Büyük Harf ile başlamak zorundadır.

Bileşenler, birbirini bağlanarak veya birleştirilerek kullanılabilir. Bu şekilde bir kullanım size ağaç veya şelale yapısı dediğimiz bir yapıyı oluşturmanıza olanak verirler. Bileşen kullanımının temel amacı, projede kullanılan kodların görev dağılımlarının belirlenmesidir. Projede çalışmaya başladığımız zaman bileşenler kimi zaman çok kalabalıklaşıyorlar ve bir noktadan sonra bileşen üzerindeki kontrolümüzü kaybediyoruz. Öyle ki bazı durumlarda bileşenin tam olarak ne yaptığı sorusunu tam olarak cevaplayamıyoruz. Bileşenleri işte tamda bu sorunu halletmek için kullanıyoruz. Sadece belirli bir görevden sorumlu ve sadece o işe yapan kod blokları hem kullanılabilir hem de yazılımsal kontrol açısından bakımı çok kolay. Görev dağılımlarını rahatlıkla bileşenler üzerinde tutabildiğimiz için ilerleyen zamanlarda hem projenin üzerindeki kontrolümüzü kaybetmiyoruz hem de daha zengin siteler oluşturabiliyoruz. Bylge’nin bakımını ben tek kişi yürütüyorum eğer bundan 10 sene önce bileşenlerin olmadığı bir yazılım dünyasından bu projeyi çıkartmam imkansızdı.

Bileşenleri iki farklı türü vardır. Bunlardan biri Fonksiyonel Bileşenleri diğeri ise Sınıf Bileşenleridir.

Fonksiyon ve Sınıf Bileşenleri

Fonksiyon bileşenleri, tam anlamıyla JS Fonksiyonlarıdır. Fonksiyonlardan teknik olarak herhangi bir farkları yoktur. (Ancak içeride kullanımış olduğumu JSX kullanımı sizin yanıltmasın eğer JSX’in ne olduğunu bilmiyorsanız bundan önce detaylı olarak yazmış olduğum JSX Nedir? makalesine göz atabilirsiniz. Kullanıcı hesabımın üzerinden bu makaleye ulaşabilirsiniz.)

Aşağıdaki vermiş olduğum Merhaba bileşeni hem fonksiyonel bileşen olarak hemde sınıf bileşeni olarak yazabiliriz. Bu bileşenler çıktı yönünden herhangi bir farkları yoktur. İkiside rahatlıkla kullanılabilir. Aslında bu makale içinde sınıf bileşenleri daha fazla anlatılması gerekiyor ancak ben sadece bunu bir örnek verip geçtim. Sebebi, React 16.8* paketi birlikte React Hooks’ları kullanmaya başladık. Hooks’ların kullanımı girmesiyle birlikte artık projeler içinde Sınıf Bileşenlerinin kullanımları kalkmaya başladı. Bu yüzden sınıf bileşenlerini genel kültür olsun diye yazacağım. İlerleyen dönemlerde sınıf bileşenlerini hem örnek makalelerde hem de Bylge üzerinde kullanmayacağım ve detaylı olarak bu konuya girmeyeceğim. Bylge’ye ilk başladığımda fazlaca sınıf bileşeni kullanmıştım ancak bütün projeyi sonradan Hooks’lara taşıdım daha sonra neden Sınıf Bileşenlerinden Hooks’lara taşıdığımı veya bütün projeler(Facebook.com’da sınıf bileşenlerin kaldırmaya başladı) neden Hooks kullanmaya başladığını detaylı bir şekilde React temel konuları bittikten sonra anlatacağım. Örnek;

Bileşen Birleştirme

Bileşenler ekranda gösterilirken bağımsız şekilde gösterebilecekleri gibi aynı zamanda toplu halde yani birleşik halde de gösterilebilir. Bileşenlerin, birbiri içinde kullanılabilir olması, bileşen bazlı frameworklerin en belirgin ve kullanışlı özelliğidir. Yukarıda yapmış olduğumuz örneği aşağıdaki gibi bir toplum Merhaba sınıfına alıp daha sonra bu ekranda render edebiliriz. Örnek;

Bileşen Çıkartma

Bileşen oluşturulurken başta bu bileşenin hangi alt bileşenlere sahip olup olmayacağını çok net kestiremeyiz. İlk başta yapmamız gereken, oluşturacağımız bileşeni normal react ve dom elementleri kullanarak yapmak(Bylge’de bu metodu kullanıyorum) daha sonra bu bileşeni tekrar değerlendirerek bu bileşenin altında ileride kullanabilir bağımsız bileşenler olup olmadığını aramaktır. Eğer bu bileşen içinde başka yerlerde kullanabileceğim farklı bir bileşen mevcut ise bu durumda, elementler ile kurmuş olduğumuz bu kısmı üst bileşenden çıkartıp alt bir bileşen olarak tekrar tanımlamak gerekiyor.

Örneğin bu makaledeki yazar’ın resminin gösterildiği element bende ayrı UserAvatar bileşeni olarak tutuluyor. Ne zaman kullanıcının avatarını göstermiş olursam bu bileşeni kullanıyorum ve tekrar tekrar yazmak zorunda kalmıyorum. Örneğin, sitedeki bir üyenin resmi, adı, soyadı ve mesleğini gösteren bir bileşen yapalım. Daha sonra bu bileşenden farklı iki bileşen çıkartalım. Bileşenleri çıkarırken kullanıldığı context açısından değil kullanım gerekliliği açısından çıkarmanız sizin ileride daha kullanışlı bileşenler oluşturmanızı sağlar. Örnek;

Yukarıdaki örnekte görüldüğü gibi kullanıcının resmini KullaniciBilgileri bileşeninde ayrı bir bileşen olarak tanımlamadık. Ancak, kullanıcının resmi farklı bir bileşende tekrar ihtiyaç olursa bu kodu tekrar yazmamız gerekiyor. Eğer bu kod bloğunu bileşen olarak tanımlarsak bu kodu tekrar yazmaktan kurtulabiliriz. Yukarıda da bahsettiğim gibi react bize bileşenleri tekrar tekrar kullanabilme özelliği sağladığı için ana bileşen üzerinden KullaniciResmi ve KullaniciAdiveSoyadi adlı iki bileşen çıkartabilir ve istediğimi yerde tekrar tanımlamaya ihtiyaç duymadan kullanabilirim. Örnek;

Propslar Değiştirilemez

Bir bileşen, ister fonksiyon olarak ister sınıf olarak tanımlansın kendi props’larını değiştiremez. Fonksiyonlar propslar açısından değerlendirdiğimizde “pure” fonksiyon olarak davranmak zorundadırlar. Eğer bu fonksiyonun propları değiştirilmek istenirse hata alınır. Hemen bunu aşağıdaki gibi örnekleyelim. İlk örnekte bileşenin props’larında herhangi bir değişiklik yapmadan render ediyoruz, bu bileşene yukarıda da ifade ettiğimiz gibi pure fonksiyonu tanımına uyuyor, çünkü girdi olarak ne veriyorsam çıktı olarakta aynen onu alıyorum. İkinci bileşende ise props’ları değiştirmeye çalışıyoruz. İlkinde hatasız olarak React bileşeni render ederken, ikincisinde ise ekranda hata veriyor. Bu hata, props’lar hiçbir şekilde değiştirilemeyeceğini gösteriyor.

Peki bileşene vermiş olduğumuz props’lar hiçbir şekilde değiştirilemez mi? Eğer props olarak bu değişkeni tanımlarsanız hayır değiştiremezsiniz. Ancak, props’lar ileriki deki dersler anlatacağım Bileşen durumlarında (React States) tutularak değiştirebilir.

Beğendiyseniz lütfen destek olmayı ve makaleyi beğenmeyi unutmayın.

İyi çalışmalar