Composer une page

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 14 sur 42.

Une page typique est une composition : `App` ne fait qu'agencer des blocs nommés :

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

Lisez cette instruction return à voix haute : elle décrit littéralement la page de haut en bas. Chaque bloc masque son propre balisage, ainsi modifier le Footer ne risque jamais de casser le Title. C'est avec cette structure que vous construirez chaque véritable App à partir d'here.

Défi

Facile

Assemblez une page à partir de deux composants.

Définissez Title : un <h1> avec id="page-title", le texte Coddy Cooking.
Définissez Footer : un <p> avec id="page-footer", le texte Made with React.
App affiche <Title /> en premier, puis <Footer />.

Essayez vous-même

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