Photo by David Clode on Unsplash

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.

Function Components

Eğer bileşeniniz state tutması gerekiyorsa ozaman ya Class Component olarak geliştirme yapacaksınız.

Class Component

veya HookComponent ile function component state özelliği kazandırabilirsiniz. Bunuda aşağıdaki şekilde useState bileşeninize state özelliği kazandırabilirsiniz.

Hooks Component

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

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.

Function Component imports

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'
default export

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.

FunctionExportA

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.

import as

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store