A Component Is a Function

App is a component: a JavaScript function that returns what should be on the page. React calls the function and puts what it returns into #root. That's called rendering: React renders the component. A component's name starts with a capital letter, as App does.

What the function returns is JSX. It looks like HTML, but it's part of the JavaScript code. There are no quotes around it, because it isn't text.

A page has more than a heading, so JSX can take several lines. Then put it in parentheses after return, and put all of it into one element, such as main:

export default function App() {
    return (
        <main>
            <h1>Summer Sounds</h1>
            <p>Two days of music in the forest.</p>
        </main>
    );
}

Inside, you write the tags as in HTML: elements in elements, each level indented by four more spaces.

Typical mistakes:

• A forgotten parenthesis: return alone on its line, with the JSX below it. JavaScript ends the return at the end of the line, so the function returns nothing, and the page stays empty, without an error.
• Two elements side by side with nothing around them, such as <h1> and <p> right after return (. The app doesn't run, and a red message under the preview says JSX expressions must have one parent element. You'll find out why in the next lesson, JSX.