REACT UI MECHANICS
React’da Bileşen Yazma ve Kullanma Yöntemleri
React ile UI geliştirirken birden fazla bileşen yazma yöntemi ve farklı import teknikleri ile bileşenleri kullanma şekilleri bulunur. Bu yazıda bu konuları irdeleyeceğim.
A. Bileşen Türleri
Bileşenler State tutması veya Stateless olmasına göre 2 ‘ye ayırabiliriz. Eğer bir bileşen state tutmuyor ise genelde Function Component olarak yazılır. Çünkü Class Component yaşam döngüsü ihtiyaçlarına gerek duymaz, sadece dışardan kendisine verilen props değerlerine göre rendering işlemini gerçekleştirir.
Eğer bileşeniniz state tutması gerekiyorsa ozaman ya Class Component olarak geliştirme yapacaksınız.
veya HookComponent ile function component state özelliği kazandırabilirsiniz. Bunuda aşağıdaki şekilde useState bileşeninize state özelliği kazandırabilirsiniz.
ClassComponent göre HookComponent bir extends işlemi yapmadığını, useState özelliğini compose ederek kullandığını görebilirsiniz.
B. Bileşen Kullanma Yöntemleri
Export Default Olmadığı Durumlar
Aşağıda tüm bileşen türleri export const dışarıya bu modülleri sunmaktadır.
Peki bu bileşenleri nasıl import edip kullanacağız. Aşağıdaki resimde gösterildiği gibi {bilesen1,bilesen2} import ederek kullanabilirsiniz.
Export Default Olduğu Durumda
Peki Component export default kullanırsak bunu import ettiğimiz kısımda nasıl kullanacağız. Export birisini default hale getirip aşağıdaki duruma benzer bir hale getirmek istersek.
React, {Component} import from 'react'
Bu durumda FunctionComponentExportA {} içerisinde belirtmemize gerek kalmıyor.. {FunctionComponentExportB, FunctionComponentExportC} için aynı durum geçerli çünkü bir modülde sadece bir tane default olabilir.
Aynı Bileşen İsmini Farklı Kütüphanelerden Import Ediyorsak
Bu durumda import ettiğimiz kısımda FunctionComponentExportA as FCompA diyerek buradak değişken ismini import aşamasında başka bir değişkene atayabiliriz.
Kod Örnekleri
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
