Bileşen mantığı

Bir bileşenin bir fonksiyon olduğunu ve JSX döndürdüğünü öğrenirsin.

Bileşen mantığı

Bir React bileşeni, büyük harfle başlayan ve JSX döndüren bir fonksiyondur. Örneğin function Header() { return <h1>Başlık</h1>; } basit bir bileşendir.

Bileşeni çağırdığında React fonksiyonu çalıştırır, dönen JSX'i çizilir. Aynı bileşeni birden çok kez çağırabilirsin; her çağrı ayrı bir kopya gibi davranır.

Bileşenler saf fonksiyon olmalıdır: aynı girdi her zaman aynı çıktıyı verir. Bu yöntem React'in hızlı çalışmasını ve güvenilir güncellemeler yapmasını sağlar.

Bileşen ağacı

Bileşenleri iç içe çağırarak bir ağaç oluşturursun. App bileşeni Header ve Main çağırır; Main de Card ve Footer çağırır. Bu yapı React'in çizim sırasını belirler.

Ağacın tepesinde her zaman tek bir kök bileşen vardır. Varsayılan olarak bu App'tir ve main.jsx içinde createRoot'a verilir.

Ağaç ne kadar derin olursa React o kadar çok iş yapar. Bu yüzden bileşenleri mantıklı parçalara ayırmak hem okunurluğu hem performansı artırır.

Uygulama Header bileşeni yaz

Aşağıdaki iskeleti tamamla. Header adında bir bileşen yaz; <header> içinde <h1>Site başlığı</h1> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function Header() {
  return <header><h1>Site başlığı</h1></header>;
}

export default Header;

Kendini test et

Bir bileşen ne döndürür?
- JSX
- Bir dizi
- Bir sayı
- CSS
Cevabı göster

JSX — Diğer tipler doğrudan çizilemez.

Bileşen ağacının kökü

Bileşen ağacının kökünde genellikle ____ bileşeni durur.

Cevabı göster

Bileşen ağacının kökünde genellikle App bileşeni durur.

Ağaç parçalarını eşleştir

App

Kök
Header

Üst başlık
Main

Ana içerik
Footer

Alt bilgi

Sıradaki ders: Bileşen ağacı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler