Mattoni di base

Finora App faceva tutto. Le app React reali suddividono la pagina in molti piccoli componenti e usarne uno è proprio come usare un tag HTML:

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

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

Quando React vede <Header />, chiama la tua funzione e visualizza ciò che restituisce. Due regole:

• I nomi dei componenti iniziano con una lettera maiuscola: è così che React distingue <Header /> (il tuo componente) da <header> (un tag HTML)
• Usalo come un tag autochiudente: <Header />

Perché preoccuparsene? Perché una pagina composta da blocchi con nome (<Header />, <Menu />, <Footer />) si legge come un indice e ogni blocco può essere riutilizzato ovunque.