Türkçe karşılığı “bileşen” olan “component” React ailesinin en temel yapı taşıdır. Component özünde bir Javascript sınıfıdır ve bizim isteklerimiz ve girdilerimiz sonucunda bizlere UI’ın (Kullanıcı Arayüzü) nasıl ve ne şekilde gözükmesini açıklayan bir React ögesi döndürür. Componentlar bizlere asıl olarak bir işlevi veya ögeyi döndürmesi için yazılan bir kodun; farklı zamanda ve farklı yerlerde yeniden çağırılarak kod kalabalığından kaçınma olanağı, kolaylık ve işlevsellik sağlar.
Component mantığını daha iyi anlamak açısından basitçe; işlevi “h1” etiketi içerisinde bir metin ifadesi döndüren fonksiyonel bir component ifadesi yazalım:
1 | const Merhaba = () => <h1>Merhaba React Native!h1>; |
React Native projelerimizde yazdığımız birden fazla component birleşerek aslında yeni bir component oluşturur. Yani bu componentlar birleşerek aslında bizim RN uygulamamızı meydana getirir. Konuyu daha iyi kavramak açısından bir örnek üzerinden inceleyelim:
Yukarıda yazdığımız fonksiyonel bileşende olduğu gibi sayfamızda; içerisinde Text componentı içeren bir ifadeyi döndüren component sınıfını oluşturalım ve bunun kullanımını görelim.
“Text” aslında basic bir componenttir, yukarıda da belirttiğimiz üzere componentlar birleşerek yeni bir component oluşturur demiştik. Biz de burada yazdığımız component içerisinde başka bir componentı kullanacağız.
Hello.js adında bir js dosyası oluşturduk ve içerisinde gerekli tanımlamaları yaparak “Hello” adını verdiğimiz sınıfımızı ata sınıf olan Component sınıfından extend ediyoruz.
Şimdi de yazdığımız bu bileşeni App.js dosyamızda kullanalım. Component mantığını daha iyi oturtmak için bu bileşenimizi 3 kere çağıracağız.
Yazdığımız bileşeni kullanabilmemiz için öncelikle App.js dosyamıza dahil etmemiz gerekiyor. İsterseniz components adında bir klasor oluşturup, yazdığınız componentları burada barındırabilirsiniz. Örnekte components klasorunun altında bulunduğu için import Hello from ‘./components/Hello.js’ şekliden yer alıyor.
Comments