Menu
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?
707
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:
200
I believe you are using
create-react-app. Afternpm installwhen you check a file namednode_modules/react-scripts/config/paths.jsinside thenode_modulesfolder. 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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
