Elementy składowe

Do tej pory App robił wszystko. Prawdziwe aplikacje React dzielą stronę na wiele małych komponentów, a używanie jednego z nich wygląda dokładnie tak samo jak używanie znacznika HTML:

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

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

Gdy React widzi <Header />, wywołuje twoją funkcję i renderuje wszystko, co ona zwraca. Dwie zasady:

• Nazwy komponentów zaczynają się od Wielkiej litery: dzięki temu React odróżnia <Header /> (twój komponent) od <header> (tagu HTML)
• Używaj go jak tagu samozamykającego: <Header />

Po co się tym przejmować? Ponieważ strona złożona z nazwanych bloków (<Header />, <Menu />, <Footer />) przypomina spis treści, a każdy blok można ponownie wykorzystać w dowolnym miejscu.