Your Own Component

A page made of one big component would soon be hard to read. So you split it into smaller components, each with its own name and job. Here's a second component, Welcome, in the same file as App:

function Welcome() {
    return <p>Welcome to the festival!</p>;
}

export default function App() {
    return (
        <main>
            <h1>Summer Sounds</h1>
            <Welcome />
            <Welcome />
        </main>
    );
}

App uses Welcome as if it were an HTML tag: <Welcome />. The slash before > closes the tag right away, because there's nothing inside. React calls the function Welcome and puts what it returns in its place, as many times as you use it. The page then has this HTML:

<main>
    <h1>Summer Sounds</h1>
    <p>Welcome to the festival!</p>
    <p>Welcome to the festival!</p>
</main>

There's no <Welcome> on the page, only what the function returned. A component is your own piece of the page, which you can use wherever you need it. In the Props lesson, one component will show different bands, each with its own name.

The name has to start with a capital letter: that's how React tells your components from HTML tags. <main> is an HTML element, <Welcome /> is a component.

Only App has export default, because main.jsx needs only App. Welcome is used only in this file.