File Structure (Simplified)
When you create a new React app using CRA, your project structure looks like this:
my-app/├── public/
│ └── index.html ← Static HTML Template
├── src/
│ └── index.js ← JavaScript Entry Point
│ └── App.js ← Main Component
├── package.json
What is the Role of index.html in a Create-React-App Project?
The index.html file in a Create-React-App (CRA) serves as the single HTML shell that React injects all your JavaScript and rendered content into. It’s stored inside the public/ folder and acts as the root HTML template of your app.
public/index.html
This is a static HTML template. It’s not where you build your components. It has a placeholder div for React to inject dynamic content.
<!-- public/index.html --><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My React App</title>
</head>
<body>
<!-- This is the placeholder for your entire React app -->
<div id="root"></div>
</body>
</html>
What Does index.js Do in the React Application?
The index.js file inside the src/ directory is the entry point of your React application. It’s where React takes over and mounts your entire component tree to the DOM. This is where the app starts rendering from.
Also Read: ReactJS forwardRef
src/index.js
This is the first JavaScript file executed when the React app loads. It tells React to render the app inside the root div from index.html.
// src/index.jsimport React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // Main component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
src/App.js – Your First Component
When you run the app (npm start), this App component appears inside the <div id="root"> of your index.html.
// src/App.jsimport React from 'react';
function App() {
return (
<div>
<h1>Hello from React!</h1>
<p>This is rendered via index.js into index.html.</p>
</div>
);
}
export default App;
Final Output in the Browser
The browser sees this (after React injects your app):
<body> <div id="root">
<div>
<h1>Hello from React!</h1>
<p>This is rendered via index.js into index.html.</p>
</div>
</div>
</body>
Flow Summary (Visual)
index.html → Provides <div id="root"> ↑
index.js → Finds #root and injects React App
↑
App.js → Contains UI component tree to render
Conclusion
- index.html is the static entry HTML file.
- index.js is the dynamic JavaScript entry point.
- React injects your UI from App.js into the #root div in index.html.
