Bloques de construcción

Hasta ahora, App hacía todo. Las aplicaciones reales de React dividen la página en muchos componentes pequeños, y usar uno se ve exactamente como usar una etiqueta HTML:

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

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

Cuando React ve <Header /> llama a tu función y renderiza lo que sea que devuelva. Dos reglas:

• Los nombres de componentes empiezan con una Letra Mayúscula: así es como React distingue <Header /> (tu componente) de <header> (una etiqueta HTML)
• Úsalo como una etiqueta de autocierre: <Header />

¿Por qué molestarse? Porque una página hecha de bloques con nombre (<Header />, <Menu />, <Footer />) se lee como una tabla de contenidos, y cada bloque se puede reutilizar en cualquier lugar.