What is the purpose of using `demo` or `root`?

Question

ReactDOM.render(
    <App />,
    document.getElementById('root')
    );

What should I understand when I see something like this at the end of the app?
What does 'root' or 'demo' stand for?

Answer 1

TL:DR;

index.html --> index.js --> app.js (<App/>) --> More components (via Router)

Many React beginners are curious about this thing, so was I. Therefore I will try explaining this in simple words.

When Browser gets response from server and starts rendering, it goes to the root file which in most cases is public/index.html, and render the same file most first.

Inside this html a <div> element is written whose id is "root"

<div id="root"> <div>

Then control goes to another file that is index.js.

Inside this .js file, a component is used (in most React apps this component is called <App/>.

ReactDOM.render(
    <App />,
  document.getElementById("root"),
);

This <App/> component is the most first component that is rendered on the screen. Every Component is defined inside this component or it's children.

And document.getElementById("root") renders the index.html file that is the root file.

PS: We can copy and adjust the App.js file code into index.js file, subsequently removing extra file. The app will work same. However, keeping App.js is a common practice found in the react community.

This is how all the components are rendered and your React App starts working.