Blocos de Construção

Até agora o App fazia tudo. Aplicativos React reais dividem a página em muitos componentes pequenos, e usar um deles é exatamente como usar uma tag HTML:

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

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

Quando o React vê <Header /> ele chama sua função e renderiza o que quer que ela retorne. Duas regras:

• Nomes de componentes começam com uma Letra Maiúscula: é assim que o React diferencia <Header /> (seu componente) de <header> (uma tag HTML)
• Use-o como uma tag de fechamento automático: <Header />

Por que se importar? Porque uma página feita de blocos nomeados (<Header />, <Menu />, <Footer />) é lida como um índice de conteúdos, e cada bloco pode ser reutilizado em qualquer lugar.