Your Second Component

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

Let's extract a component. You can define as many components as you like in one file: smaller ones above, App at the bottom:

function Welcome() {
    return <p>Glad you're here!</p>;
}

export default function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

Only App carries export default: it's the entry component that main.jsx renders. The others are internal helpers.

Challenge

Beginner

Create your first standalone component.

Define a component called Header (capital H!) above App. It returns an <h1> with id="page-title" and the text My Blog.
Render it inside App's <div> with <Header />.

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>