CODEWITHSUNDEEP
javascriptreactjs
Grateful
Grateful

Reputation: 10175

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

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?

Upvotes: 8

Views: 23682

Answers (3)

Jagrit Joshi
Jagrit Joshi

Reputation: 29

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.

Upvotes: 0

TeachMe
TeachMe

Reputation: 635

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:

Upvotes: 15

Sajal Shrestha
Sajal Shrestha

Reputation: 554

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.

Upvotes: 7

Related Questions