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-

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 hierarchy. This gives you feel that you maintain hierarchy in your code starting from App.js.

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

Answer 2

create-react-app use a plugin for webpack that name is html-webpack-plugin and this plugin use index.js for entrypoint like below :

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: 'index.js',
 output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
 plugins: [
new HtmlWebpackPlugin()
 ]
}

this plugin use for generating html file.