index.html Connects to index.jsWhen you create a React app (using create-react-app, Vite, or Next.js), the index.html file is the entry point for the browser, but it doesn’t directly contain your React code. Instead:
public/index.html (Simplified)
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<!-- React mounts (attaches) the app here -->
<div id="root"></div>
<!-- This script tag loads your compiled React code -->
<script src="/dist/main.js" type="module"></script>
</body>
</html>
<div id="root"></div> is where React will inject your entire app .<script src="..."> loads the bundled JavaScript (which includes index.js and all React components).(Note: In create-react-app, the exact script name may differ, but the concept is the same.)
index.js Renders AppYour src/index.js is the JavaScript entry point and does the following:
src/index.js (Modern React)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // Your root React component
// 1. Select the DOM container where React will attach
const rootElement = document.getElementById('root');
// 2. Create a React "root" (like a mounting point)
const root = ReactDOM.createRoot(rootElement);
// 3. Render the <App /> component inside the root
root.render(<App />);
document.getElementById('root')
<div id="root"> from index.html.ReactDOM.createRoot()
root.render(<App />)
<App /> component (and all its children) into the root div.