How the Page Starts in JavaScript

When you open a Vite app, the browser first gets one file: index.html. It is almost empty. Two lines in its body start everything: an empty element for the app to live in, and a script tag that loads the app's first JavaScript file.

The script needs type="module": only a module script may use import. Its src starts with /, which means the project's folder. The browser asks Vite for that file, and each import in it loads the next file.

Here is the same idea on another page, a clock:

<span id="time"></span>
<script type="module" src="/src/clock.js"></script>

clock.js finds the span with document.getElementById("time") and writes the time in it. Without the span there is nowhere to write; without the script nothing runs at all.

In the Corner Shop, src/main.jsx calls createRoot(document.getElementById("root")) and renders App there. Opening the page must print:

> open the page
  screen:
    main
      heading 1: Corner Shop
      text: Mugs, lamps, plants and more, a short walk from home.
> how the page starts
  div#root: there, and React drew the app inside it
  script /src/main.jsx (type="module"): the file is there
  modules that ran: src/main.jsx, src/App.jsx

Your task: the body of index.html is empty, so the page is blank. Add an empty div with the id root, and below it a script of type module that loads /src/main.jsx.

Assignment
Follow the Coding Tutorial to add the two lines inside index.html's body that start the Corner Shop's React app.

Hint
The id must be the same name main.jsx looks for: id="root". A script tag always needs its closing </script>, even when nothing is between the tags.