One Parent Rule

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

A component can return as much JSX as you like, with one rule: everything must live inside one parent element. This is fine:

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

But returning two elements side by side with no wrapper is an error. A function can only return one thing:

// BROKEN: two top-level elements
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

The usual fix is wrapping everything in a <div>. Watch the preview: if you break the rule, the build error tells you exactly where.

Challenge

Beginner

Build a small page header: two elements under one parent.

Keep the outer <div>.
Inside it add an <h1> with id="heading" and the text My First App.
Below the heading add a <p> with id="tagline" and the text Built with React.

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>