Yapı Taşları

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 11 / 42.

Şimdiye kadar her şeyi App yaptı. Gerçek React uygulamaları sayfayı birçok küçük bileşene böler ve birini kullanmak tıpkı bir HTML etiketi kullanmaya benzer:

function Header() {
    return <h1>My Blog</h1>;
}

export default function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

React, <Header /> ifadesini gördüğünde fonksiyonunuzu çağırır ve döndürdüğü şeyi işler (render eder). İki kural vardır:

Bileşen (Component) isimleri bir Büyük Harf ile başlar: React, <Header /> (sizin bileşeniniz) ile <header> (bir HTML etiketi) arasındaki farkı bu şekilde anlar
Bunu kendi kendini kapatan bir etiket gibi kullanın: <Header />

Neden zahmet edelim? Çünkü adlandırılmış bloklardan oluşan bir sayfa (<Header />, <Menu />, <Footer />) bir içindekiler tablosu gibi okunur ve her blok her yerde yeniden kullanılabilir.

Kendin dene

Bu ders bir kod alıştırması içermiyor.