Éléments de base

Jusqu'à présent, App faisait tout. Les vraies applications React divisent la page en plusieurs petits composants, et en utiliser un ressemble exactement à l'utilisation d'une balise HTML :

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

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

Lorsque React voit <Header />, il appelle votre fonction et affiche tout ce qu'elle renvoie. Deux règles :

• Les noms de composants commencent par une Majuscule : c'est ainsi que React fait la différence entre <Header /> (votre composant) et <header> (une balise HTML)
• Utilisez-le comme une balise auto-fermante : <Header />

Pourquoi s'en embêter ? Parce qu'une page composée de blocs nommés (<Header />, <Menu />, <Footer />) se lit comme une table des matières, et chaque bloc peut être réutilisé n'importe où.