Componha uma Página

Parte da seção Fundamentos do Journey de React da Coddy — lição 14 de 42.

Uma página típica é uma composição: `App` apenas organiza blocos nomeados:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

Leia essa instrução return em voz alta: ela descreve literalmente a página de cima a baixo. Cada bloco esconde sua própria marcação, então alterar o footer nunca corre o risco de quebrar o title. Essa estrutura é como você construirá todo app real a partir daqui.

Desafio

Fácil

Monte uma página a partir de dois componentes.

Defina Title: um <h1> com id="page-title", texto Coddy Cooking.
Defina Footer: um <p> com id="page-footer", texto Made with React.
App renderiza <Title /> primeiro, depois <Footer />.

Experimente você mesmo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>