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.