Componer una página

Parte de la sección Fundamentos del Journey de React de Coddy — lección 14 de 42.

Una página típica es una composición: App solo organiza bloques con nombre:

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

Lee esa sentencia return en voz alta: literalmente describe la página de arriba a abajo. Cada bloque oculta su propio marcado, por lo que cambiar el Footer nunca corre el riesgo de romper el Title. Esta estructura es la forma en que construirás cada App real de aquí en adelante.

Desafío

Fácil

Ensambla una página a partir de dos componentes.

Define Title: un <h1> con id="page-title", texto Coddy Cooking.
Define Footer: un <p> con id="page-footer", texto Made with React.
App renderiza <Title /> primero, después <Footer />.

Pruébalo tú mismo

<!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>