Your First Component

React builds a page out of components. A component is a JavaScript function that returns markup. The markup is written in JSX, which looks like HTML but sits right inside your JavaScript file.

Here is a component for another part of a page:

function OpeningHours() {
  return (
    <section>
      <h2>Open today</h2>
    </section>
  );
}

You never call the function yourself. The given index.html has an empty <div id="root">, and the given src/main.jsx tells React to draw <App /> inside it. React calls App and puts whatever it returns on the page.

The check opens the page and prints what a visitor sees: one line per thing, indented under what holds it. Your page must show:

> open the page
  screen:
    main
      heading 1: Corner Shop
      text: Mugs, lamps, plants and more, a short walk from home.

Your task: in src/App.jsx, the function App already returns an empty main. Put a heading 1 with the text Corner Shop inside it, and under it a paragraph with the tagline.

Assignment
Follow the Coding Tutorial to fill the shop's first component, App, with a heading and a paragraph.

Hint
Both new tags go between <main> and </main>. The check prints an h1 as "heading 1" and a p as "text".