Compose a Page

Part of the Fundamentals section of Coddy's React journey — lesson 14 of 42.

A typical page is a composition: App just arranges named blocks:

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

Read that return statement out loud: it literally describes the page top to bottom. Every block hides its own markup, so changing the footer never risks breaking the title. This structure is how you'll build every real app from here on.

Challenge

Easy

Assemble a page from two components.

Define Title: an <h1> with id="page-title", text Coddy Cooking.
Define Footer: a <p> with id="page-footer", text Made with React.
App renders <Title /> first, then <Footer />.

Try it yourself

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