Building Blocks

Part of the Fundamentals section of Coddy's React journey. Lesson 11 of 42.

So far App did everything. Real React apps split the page into many small components, and using one looks exactly like using an HTML tag:

function Header() {
    return <h1>My Blog</h1>;
}

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

When React sees <Header /> it calls your function and renders whatever it returns. Two rules:

Component names start with a Capital Letter: that's how React tells <Header /> (your component) from <header> (an HTML tag)
Use it like a self-closing tag: <Header />

Why bother? Because a page made of named blocks (<Header />, <Menu />, <Footer />) reads like a table of contents, and each block can be reused anywhere.

Try it yourself

This lesson doesn't include a code challenge.