React Bileşenleri (Components)

Modern bir React uygulaması onlarca hatta yüzlerce bileşen (component) içerir. Bu bileşenler, tıpkı bir yapbozun parçaları gibi bir araya gelerek, kullanıcılar için zengin ve interaktif deneyimler sunar. Ancak React’i güçlü kılan sadece bileşenlerin varlığı değil, bu bileşenlerin birbiriyle nasıl iletişim kurduğu ve etkileşime geçtiğidir.

Bu yazımızda, bileşenlerin nasıl oluştuğunu, bileşenlerin birbiriyle nasıl etkileşim kurduğunu ve bu yapıyı daha yönetilebilir hale getirmek için neler yapılabileceğini göstereceğiz.

React’te Fonksiyonel Bileşenler

React bileşeni, HTML’yi oluşturan ve veriler değiştiğinde yeniden oluşturan, küçük ve yeniden kullanılabilir kod parçalarıdır. Bileşenler, kullanıcı arayüzünü daha küçük parçalara bölerek bir React uygulamasını oluşturmanın temel yapı taşlarını oluşturur. Örneğin, bir web sitesinde arama çubuğu, gezinme çubuğu ve ana içerik için ayrı bileşenler olark tasarlanabilir.

React bileşenlerini tanımlamak için JavaScript fonksiyonları kullanılabilir. Buna “fonksiyon bileşeni” (Function Component) adı verilir. Eskiden, React bileşenleri JavaScript sınıfları kullanılarak tanımlanıyordu. Ancak, “Hooks” gibi özelliklerin tanıtılmasıyla birlikte, modern React uygulamalarında fonksiyon bileşenleri standart haline gelmiştir.

Bir fonksiyon bileşeni tanımlandıktan sonra, bu bileşenden istediğimiz kadar örnek oluşturabiliriz. Örneğin:

import React from 'react';

function SelamBileseni() {
  return <h1>Merhaba, ben bir React fonksiyon bileşeniyim!</h1>;
}

export default SelamBileseni;

Yukarıdaki kodda, SelamBileseni adında bir fonksiyon tanımlanmış olup JSX sözdizimiyle yazılmış bir React elementi döndürmektedir:

return <h1>Merhaba, ben bir React fonksiyon bileşeniyim!</h1>;

Son olarak, bu bileşen export anahtar kelimesiyle dışa aktarılmış, başka dosyalarda kullanılabilir gelmiştir.

React’te yeni bir fonksiyon bileşeni oluştururken bu bileşene bir isim vermek gerekir. Örneğin, aşağıdaki bileşen adını kullanarak tanımlanmıştır:

function MerhabaDunya() {
  return <h1>Merhaba Dünya!</h1>;
}

Fonksiyon bileşeni isimleri büyük harfle başlamalıdır ve genelde PascalCase olarak adlandırılan bir yazım stiliyle yazılır. JSX etiketleri derlenirken, büyük harfle başlayan isimler React bileşeni olarak tanımlanır. Küçük harfle başlayan bir isim kullanılırsa, React bunun bir HTML etiketi (örneğin, div veya input) olduğunu varsayıp hata verebilir.

Fonksiyon Bileşenlerinde Return İfadesi

Fonksiyon bileşenleri, her referans verildiğinde belirli bir kullanıcı arayüzü parçasını oluşturan bir fabrika gibi çalışır. Bu işlemi, kendisine verilen talimatları izleyerek gerçekleştirir. Aslında, bu durum JavaScript fonksiyonlarının çalışma prensibine oldukça benzer. Tek fark, fonksiyon bileşenlerinin görevinin, bir arayüzün bir kısmını oluşturmak olmasıdır.

Fonksiyon bileşenini tanımlarken, talimatlarımızı fonksiyon gövdesi içinde tanımlarız. Bu talimatlar süslü parantezler arasında yer alır. Bakınız:

function Buton() {
  // Talimatlar buraya yazılır.
}

Bu arada her zaman return ifadesi kullanmamız gerekir. Çünkü fonksiyonun, tarayıcı ekranında bir şeyler oluşturmak için JSX kodu döndürmesi beklenir. Örnek:

function GeriButonu() {
  return <button>Ana Sayfaya Dön</button>;
}

Bu kod, bir button etiketi oluşturur. Ancak, bu bileşen tarayıcıda henüz görüntülenemez. Çünkü burada sadece bileşenin tanımı yapılmıştır. Görüntülenebilmesi için, bileşenin başka bir yerde kullanılması gerekir.

React Bileşenlerini İçe ve Dışa Aktarma

Tanımladığımız bir React bileşenini kullanarak tarayıcıda görüntülemek için birkaç adım daha gerekiyor. React uygulamaları genellikle iki temel dosyaya sahiptir: App.js ve index.js.

• App.js, uygulamanın en üst düzey bileşenlerini içerir.
• index.js, uygulamanın giriş noktasıdır ve tüm uygulamayı DOM’a bağlar.

Bileşenimizi App.js içinde tanımladıktan sonra, giriş noktası olan index.js dosyasına aktarmamız gerekir. Bunun için bileşeni dışa aktarmamız, ardından index.js dosyasına içe aktarmamız yeterli.

React bileşenlerinin yeniden kullanılabilir olmasının büyük bir avantajı vardır. Bileşenleri farklı dosyalara ayırıp organize ederek kodu daha düzenli ve yeniden kullanılabilir hale getirebiliriz.

Bir bileşeni dışa aktarmak için export anahtar kelimesini kullanırız. default veya isimlendirilmiş dışa aktarma seçeneklerinden biri tercih edilebilir. Burada, default seçeneğini kullanıyoruz:

App.js içinde bir bileşeni şu şekilde dışa aktarabiliriz:

function GeriButonu() {
  return <button>Ana Sayfaya Dön</button>;
}

Dışa aktarılan bu bileşeni, index.js dosyasında içe aktarabiliriz:

import Selamla from './App';

Bileşen Kullanımı ve Render Etme

Bir fonksiyon bileşeni tanımladıktan sonra, artık onu kullanmaya başlayabiliriz. React bileşenleri, HTML benzeri bir sözdizimi ile çağrılır ve kendinden kapanan bir etiket şeklinde yazılabilir:

<Selamla />

Eğer bileşenin içine başka bileşenler yerleştirmeniz gerekiyorsa, açılış ve kapanış etiketleri arasında kullanabilirsiniz:

<Selamla>
  <AltBilesen />
</Selamla>

Ancak, bileşeni tarayıcı ekranında göstermek için React DOM kütüphanesinin .createRoot() ve .render() metodlarına başvurmak gerekir. Bu işlem, giriş noktası olan index.js dosyasında gerçekleştirilir.

İlk adım, .createRoot() metodunu çağırarak React için bir kök konteyner oluşturmaktır. React uygulamaları bir kök DOM düğümüne sahiptir ve bu düğümün içindeki her şey React tarafından yönetilir.

Örneğin, aşağıdaki kod ile React’e hangi DOM öğesi üzerinde çalışması gerektiğini belirtebilirsiniz:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Selamla from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Selamla />);

Bu kod parçasında:

• document.getElementById('root') ifadesi, tarayıcıda React’in kontrol edeceği kök DOM öğesini seçer.
• ReactDOM.createRoot() bu öğeyi React uygulamasına bağlar.
• render() metodu, seçilen bileşeni (Selamla) bu kök öğenin içine yerleştirir.

Neden Bileşen Etkileşimi Önemlidir?

React’te her bileşen, kullanıcı arayüzünün bir parçasından sorumludur. Ancak bir uygulama büyüdükçe, bileşenler arasında bilgi alışverişine ihtiyaç duyulur. Bu bilgi alışverişi, bileşenleri daha modüler, yeniden kullanılabilir ve ölçeklenebilir hale getirir.

Bir bileşenin başka bir bileşeni döndürmesi veya ona veri göndermesi, bu etkileşimin temel yapı taşıdır. Aşağıda, bu etkileşimin nasıl gerçekleştiğine dair bir örnek sunacağım.

Bir kitap satış uygulaması geliştirdiğimizi düşünelim. Bu uygulamada, bir “Sepete Ekle” butonu ve bir kitap kartı yer alacak.

1. Basit Bir “Sepete Ekle” Bileşeni
Önce sadece bir buton bileşeni oluşturalım:

function SepeteEkleButonu() {
  return <button onClick={() => alert("Ürün sepete eklendi!")}>Sepete Ekle</button>;
}

Bu bileşen tek başına çalışmakta ancak henüz başka bir bileşenle etkileşim kurmamaktadır. Şimdi bunu bir kitap kartı bileşenine dahil edelim.

2. Kitap Kartı: Bir Bileşenin Diğerini Döndürmesi
Kitap kartımız, bir kitap hakkında bilgi gösterecek ve içine “Sepete Ekle” butonunu dahil edecek:

function KitapKarti() {
  return (
    <div>
      <h1>Kitap: React Öğreniyorum</h1>
      <h2>Fiyat: 150 TL</h2>
      <SepeteEkleButonu />
    </div>
  );
}

Bu yapıda, KitapKarti bileşeni, SepeteEkleButonu bileşenini döndürmektedir. Tek parça halinde yazalım:

• SepeteEkleButonu: Kullanıcı butona tıkladığında “Ürün sepete eklendi!” mesajını gösteren bir işlevi tanımlar. Bu bileşenin içinde bir button öğesi bulunur.
• KitapKarti: Bu bileşen, bir kitap kartını temsil eder. Kitabın adı ve fiyatı gibi bilgileri görüntüler. Ayrıca, SepeteEkleButonu bileşeni de burada çağrılır ve buton kitap kartına dahil edilir.
• App: Temel bileşendir ve tüm bileşenleri bir araya getirir. KitapKarti bileşenini render eder.

React’te, bir bileşeni bir başka bileşenin içinde kullanmak, uygulamaları daha modüler ve yeniden kullanılabilir hale getirmenin temel yollarından biridir. Bu yöntemle, büyük bir bileşeni daha küçük ve bağımsız bileşenlere ayırabilir, bu parçaları istediğiniz yerlerde yeniden kullanabilirsiniz.

React projelerinde bileşenler genellikle App.js olarak adlandırılan dosyada bir araya getirilir. Burada, farklı bileşenler içe aktarılır ve bir arada kullanılarak uygulamanın genel görünümü oluşturulur. Yukarıdaki örneğimiz üzerinden konuyu inceleyelim: