CODEWITHSUNDEEP
reactjsreact-native
afyonkes
afyonkes

Reputation: 155

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

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?

Upvotes: 7

Views: 14228

Answers (5)

Shtefan
Shtefan

Reputation: 808

On React the initial rendering started from index.html file which you can find under "public" folder. And it has one element inside. And its id is "root". So all React magic started from it. Thus the very first element you define is the root taken from the document by the Id. Then you adding all other elements to the root.

Upvotes: 0

navinrangar
navinrangar

Reputation: 1372

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.

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

Upvotes: 5

Stefan Generalao
Stefan Generalao

Reputation: 111

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.

Upvotes: 7

CertainPerformance
CertainPerformance

Reputation: 370659

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.

Upvotes: 10

thelonglqd
thelonglqd

Reputation: 1862

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.

Upvotes: 2

Related Questions