Comporre una pagina

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 14 di 42.

Una pagina tipica è una composizione: App si limita a disporre blocchi con nome:

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

Leggi ad alta voce quell’istruzione di return: descrive letteralmente la pagina dall’alto verso il basso. Ogni blocco nasconde il proprio markup, quindi modificare il piè di pagina non rischia mai di compromettere il titolo. Questa struttura è il modo in cui costruirai ogni vera app da qui in avanti.

Sfida

Facile

Assembla una pagina da due componenti.

Definisci Title: un <h1> con id="page-title", testo Coddy Cooking.
Definisci Footer: un <p> con id="page-footer", testo Made with React.
App visualizza prima <Title />, poi <Footer />.

Provalo tu

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