Why does create-react-app creates both App.js and index.js?

Question

I started learning React and now I'm trying to understand what is the purpose of the index.js and App.js which are created by by running create-react-app.

Why can't we just use, for example. App.js?

I've read that App.js usually used as a main entry point to the application, but auto-generated code of index.js seems like a part of main entry point:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker';  ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); 

I saw a similar questions for react native but I want to know about this in react in general.

Answer 1

index.js is the traditional and actual entry point for all node apps. Here in React it just has code of what to render and where to render.

App.js on the other hand has the root component of the react app because every view and component are handled with hierarchy in React, where <App /> is the top most component in the hierarchy. This gives you the feel that you maintain hierarchy in your code starting from App.js.

Other than that, you can have the App logic in the index.js file itself. But it's something related to conventions followed by the community using the library or framework. It always feels good to go along the community.

Answer 2

Great question. The answer is that App.js is not necessary and I personally delete it and just use Index.js as the root.

People "say" it makes it look nicer / easier but it is just adding an extra step that is not necessary. I hope that they will eventually delete App.js out of npx create-react-app and just use index.js.

Edit: I'm not going to alter my original comment, however, I gave up deleting App.js. I now just funnel everything through App.js and use Index.js. The nice thing about index.js is you can do all your imports there and funnel them through App.js