React Bileşenleri: Nasıl Oluşturulur ve Nasıl Kullanılır?

Yeni bir yazıdan merhabalar. Bu yazıda, React çalışmalarımızın temelini oluşturan “React bileşenleri”ni nasıl oluşturacağımızı ve nasıl kullanacağımızı ele alacağız. Her zaman olduğu gibi sade bir anlatımla konuyu ele almaya çalışacağım. Konuyu anlatırken referans olarak React’in kendi resmi sitesini alacağım. Böylelikle en güncel bilgilere ulaşmış olacaksınız. Hazırsanız başlayalım.

React Bileşenlerini Nasıl Oluştururuz?

Biliyoruz ki, React, bileşenlerden oluşan bir yapıya sahip. React bileşenleri dediğimiz şey, kullanıcı arayüzünün bir parçası olan, her biri kendi mantığına ve kendi görünümüne sahip yapılardır. Basit ya da karmaşık yapıda bileşenler oluşturabiliriz. Örneğin, sıradan bir butonu içeren basit bir bileşen oluşturabiliriz ya da bir navbar içeren daha büyük bir bileşen oluşturabiliriz.

React’in çalışma mantığı ve özellikleri hakkında sade anlatımla hazırlanmış bir yazım var. Buradan ulaşabilirsiniz.

Aşağıda bir React bileşeni örneği görüyorsunuz.

function ClickMe () {
return (<button>Tıkla!</button>);
};

Burada ClickMe adında bir fonksiyon oluşturduk. Bu fonksiyon bir buton döndürüyor ve üzerinde “Tıkla!” yazıyor. Gayet basit özellikte bir bileşen. Bu bileşeni istersek daha modern bir şekilde ifade edebiliriz. Onu da şöyle yapıyoruz:

const ClickMe = () => {return (<button>Tıkla!</button>)};

Burada daha modern bir yöntem olan ok fonksiyonu (arrow function) kullandık. Fark ettiyseniz her iki yöntemde de bileşen ismi büyük harfle başlıyor. “React bileşenleri”ni oluştururken mutlaka büyük harfle başlamalıyız. Bu bir JSX kuralıdır.

Bileşenlerimizi istersek bir başka bileşen içinde yazabiliriz. Buna iç içe geçmiş bileşenler diyoruz. Mesela aşağıdaki kodu inceleyelim.

export default function App() {
  return (
    <div>
      <h1>App Bileşenine Hoş Geldiniz</h1>
      <ClickMe />
    </div>
  );
}

Burada daha önce oluşturduğumuz ClickMe bileşenini, App bileşeni içinde kullandık. Çıktı olarak önce “App Bileşenine Hoş Geldiniz” başlığını ve ardından da “Tıkla!” yazılı buton göreceğiz.

export default anahtar kelimesi ana bileşenimizi dışarıya aktarmamızı sağlar. Bu sayede, oluşturduğumuz diğer bileşenler ana bileşenimizi görebilir.