Start on New React Application - How React Application Rendered 

 

Root File - Index.html Page inside Public Folder

 

React look in Index.HTML file. Find the first element that has an ID of root then replace this with the React application the react Document defined in index.js ( global JavaScript component for a React application).

 

 

Once we find a route, let's implement our app component inside src folder 

Open Root/Global JavaScript component - src / app.js

• Default code is right now rendering from this page

 

Our index.JS is hooking onto indexed HTML to find the first ID that's route. We're replacing the div with our app component.

 

 

 

Let Explore the bindings

Here We want to create a new variable of r oot using ReactDOM.createRoot and we want to pass in that div an ID of root. So this root is going to match exactly with this div in Index.html file

After we create this ReactDOM root variable, we then say root render. We have this react strict mode and then we have our app inside.

 

 

<App />

App here represents app.js inside src folder

 

 

App.js

 

Return a div element 

React is using JSX and JSX is more or less a JavaScript wrapper that can create DOMS. So here React instruct that we want to create this div within that div having ID root on the index page.