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

Answer 3

Yes, App.js is not necessary. You can have just the index.js as follows.

// Import React and ReactDOM Libraries.
import React from 'react';
import ReactDOM from 'react-dom';
import CommmentDetail from './CommentDetail';

function getLabelText() {
  return 'Enter Name: ';
}

// Create React Components 
const App = () => {
  const buttonText = {text: 'Submit'};
  const buttonStyle = {backgroundColor: 'blue', color: 'white'}; 
  return (
    <div>
      <label className="label" htmlFor="name">{getLabelText()}</label>  
      <input id="name" type="text" />
      <button style={buttonStyle} >{buttonText.text}</button>

      // You can have other components here as follows.
      // CommmentDetail is someOther component defined in another file.
      // See the import statement for the same, 4th line from top

      <CommmentDetail author='Nivesh' timeAgo='3 months ago at 4.45 PM' commentText='Good Point' } />
    </div>
  )
}

// Take the react component and show it on the screen
// ReactDOM.render(<App />, document.getElementById('root'));
// You can use the following as well.
ReactDOM.render(<App />, document.querySelector('#root'));

Answer 4

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <h2>How are you!</h2>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

This is a sample where we can directly implement without using App.js.

Answer 5

App.js is the "top component" that contains the logic of your Application whereas index.js is the "entry point" for your server and contains the logic of the server.

This can also help to have multiple Applications if needed to switch from one to the other without changing anything in the server.

Answer 6

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.