React Entry Point: Index.html vs index.js? Where is the node code?

Question

I read somewhere on the internet that index.html is the entry point for a react app. However, the same article then went on to say that index.js is the main entry point (as well as for most node apps). So, which one is it?

When someone loads a react app in the browser, I assume index.js is run first, which in return loads index.html. But how does that happen typically... As in, how does the flow go from loading the app in the browser to first running index.js?

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

Secondly, after npx create-react-app app, the code was run using npm start. So, I presume node.js is also involved. However, I can't find any familiar looking node code here. Where is the code that makes the server listen to port 3000, for instance?

From my understanding, HTML and CSS are parsed in the browser first, and then the JS. After the HTML is fully loaded, your React code (should be compiled to normal JS when running in a browser since browsers don't understand "React" but JS), will try to find a hook, in your case "root" div in your index.html. And from that point on, everything is rendered by your JS. For me, the entry point for the App is HTML, but for React, index.js is its entry point — Joshua
– Joshua, Commented Aug 14, 2020 at 4:01
Aditi Lamkhede posted an Answer saying "I found this thread helpful: How Index.js and Index.html are connected in React App I hope it helps others looking for same." — Scratte
– Scratte, Commented Apr 2, 2021 at 20:42

TeachMe · Accepted Answer · 2020-08-14 04:29:46Z

15

In simple words: index.html is where all your UI is rendered by React and index.js is where all your JS codes exist. So browser, first get index.html and then renders the file. then JS in index.js is responsible for all the logical rendering of UI, which takes element with id root to be its base element for rendering all the UIs.

Like in vanilla JS, React searches for element with ID 'root' and keeps all the UI to be rendered inside that element using the virtual DOM concept. You can view this concept.

After you complete the React development, you have to use a build tool to build React App by npm build or yarn build, which merges all your codes to single file. So when a client requests your site, the server sends .html with the JS files. So, at last, JS files manipulates the single .html file.

About the create-react-app, react-scripts package that comes when you create a react app with npx create-react-app handles all the requirements to serve a development serve using node. All the files of packages are inside node_moudles.

This links may be helpful:

answered Aug 14, 2020 at 4:29

TeachMe

6551 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grateful Over a year ago

Thank you for such an informative answer. Have a great day.

TeachMe Over a year ago

You are welcome. If this helps your query, you can mark it as the correct answer. That helps :)

Marcelo Scofano Diniz Over a year ago

@Grateful, remember to mark TeachMe response as an Answer, top level, BTW.

Sajal Shrestha · Accepted Answer · 2020-08-14 04:23:22Z

7

I believe you are using create-react-app. After npm install when you check a file named node_modules/react-scripts/config/paths.js inside the node_modules folder. You see the below code.

....
....
appHtml: resolveApp('public/index.html'),
....

paths.appIndexJs is the entry file in the webpack config.

HtmlWebpackPlugin loads the html at the path paths.appHtml. So inside your application directory, appHtml is file public/index.html and appIndexJs is file src/index.js.

answered Aug 14, 2020 at 4:23

Sajal Shrestha

5541 gold badge5 silver badges14 bronze badges

Comments

Jagrit Joshi · Accepted Answer · 2023-09-12 08:15:02Z

It is actually the basic theoretical question that even i got when i had started react development. Following is concept responsible for this flow of react-app.

The flow of react-app is fixed and pre-determined when you use npm start, it refers to "react-scripts start" which is a standard command written in react-scripts in-built package...hence it loads ""index.js"" as entry point of react-app always and searches for index.html which is publicly accessible(bcz it is defined in public folder), thus we dont need to link index.js in in index.html explicitly.

react app is listen on port 3000 by default which is written in react-scripts in-built package, if you want to change it you can eject the react-app by npm eject and then change the pre-defined commands.

Collectives™ on Stack Overflow

React Entry Point: Index.html vs index.js? Where is the node code?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related