what is the purpose of using demo or root

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

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

3 Answers

It's the element that exists in the original HTML that all of the React contents go into. For example, if your HTML contains:

<body>
  <div>Maybe some other content here</div>
  <div id="root"></div>
</body>

React rendering into the #root means that everything App renders will be put into that element:

<div id="root"> 
  <!-- App populates this element -->
</div>

The element selected to be populated can be any element you want - it doesn't have to be root or demo in particular.

I'm assuming you're using Create React App. Have a look at public/index.html. There you'll see <div id="root"></div> which is what document.getElementById('root') is referring to.

Inside the HTML main file index.html of a React App, normally, you might see a <div> tag with id=root.

This code:

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

MEANS: Render the whole React App into the element with id=root.

Related