So it looks like I’m using Vite to create the initial version of the React App, which has App.jsx as a react component rendered by main.jsx

So, the index.html is loaded first (this is what is requested by the browser - it’s the standard file that browser environments look for when a request is made to a directory without specifying a file)

The index.html has a script tag that searches for main.jsx . This javascript file gets executed immediately.

main.jsx then mounts the React component App.jsx onto the element “root” from the index.html file.

? What happens if there are multiple elements with id root? Let’s try it.

Seems like it doesn’t duplicate because the id needs to be UNIQUE to each element.

When I changed the second div’s id to “root1” and added a line in main.jsx to render the App.jsx component to root1 as well, two of these sections were rendered!!! side by side. yay