What is the Index.html file used for in React?

Question

If you're writing JSX in other files to create the frontend. What is the point of having the index.html file there?

Answer 1

JSX can be thought of as syntactical sugar for writing react components. There is usually a transpiler at work working to turn the JSX into valid JavaScript. This valid JavaScript and other assets is then bundled. But what use is this without any html to use it? The bundle is injected into the index.html. If you open it there should be a comment giving a brief explanation about it.

Answer 2

public/index.html is the main HTML file of our app that includes your React code and provides a context for React to render to.

If you look at the html file you could see <div id="root"></div>. We call this a “root” DOM node because everything inside it will be managed by React DOM. That is the mounting point for react app.

In your index.js you could see a code at the bottom,

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

this function mounts your react app to the "root" provided in the index.html file.

Basically, react is for the components and react-dom is for rendering the components in the DOM. ‘react-dom’ acts as a glue between components and DOM.