Bausteine

Bisher hat App alles erledigt. Echte React-Apps teilen die Seite in viele kleine Komponenten auf, und die Verwendung einer Komponente sieht genau so aus wie die Verwendung eines HTML-Tags:

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

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

Wenn React <Header /> sieht, ruft es Ihre function auf und rendert das, was sie zurückgibt. Zwei Regeln:

• Komponentennamen beginnen mit einem Großbuchstaben: So unterscheidet React <Header /> (Ihre Komponente) von <header> (einem HTML-Tag)
• Verwenden Sie es wie ein selbstschließendes Tag: <Header />

Warum der Aufwand? Weil eine Seite, die aus benannten Blöcken besteht (<Header />, <Menu />, <Footer />), wie ein Inhaltsverzeichnis zu lesen ist und jeder Block überall wiederverwendet werden kann.