Bileşen mantığı
- React kursu
- Başlangıç
- Ders 9/84
- 4 dk
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.
Başlangıç kodu
// Header bileşenini buraya yazÖrnek çözüm
function Header() {
return <header><h1>Site başlığı</h1></header>;
}
export default Header;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir bileşen ne döndürür?
- JSX Doğru cevap
- Bir dizi
- Bir sayı
- CSS
Açıklama: Diğer tipler doğrudan çizilemez.
2 Bileşen ağacının kökü
Bileşen ağacının kökünde genellikle ____ bileşeni durur.Bileşen ağacının kökünde genellikle App bileşeni durur.Açıklama: App genellikle kök bileşendir.
3 Ağaç parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
App |
Kök |
Header |
Üst başlık |
Main |
Ana içerik |
Footer |
Alt bilgi |