React Project Directory Structure and Entry Points0%
Virtual DOM and React Render Cycle Explained

React Project Directory Structure and Entry Points

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

React Project Directory Structure and Entry Points

1. Anatomy of a Production React Project

When you scaffold a modern React application using Vite, a clean and standardized folder structure is created. Understanding the exact role of each file and folder ensures smooth collaboration and clean architectural scalability.

Output
msk-react-project/
├── index.html # HTML shell hosting the root DOM container
├── package.json # Manifest of scripts and dependencies
├── vite.config.js # Vite build and plugin configuration
├── public/ # Static assets served untouched at root URL
│ └── favicon.ico # Browser tab icon
└── src/ # Application source code
├── main.jsx # Application entry point (mounts React to DOM)
├── App.jsx # Top-level root React component
├── App.css # Component-specific styles for App
├── index.css # Global CSS reset and typography
└── assets/ # Bundled images, SVGs, and fonts

2. The HTML Host: index.html

Unlike older bundlers where index.html resided in a hidden public folder, Vite treats index.html as the project's direct entry point at the root level.

HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MSK Institute React App</title>
</head>
<body>
<!-- The mount target: React controls all children inside this element -->
<div id="root"></div>
 
<!-- The script module that bootstraps React -->
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

The <div id="root"></div> serves as the container where React mounts its component tree. Notice the direct <script type="module" src="/src/main.jsx"></script> tag, which gives Vite immediate visibility into the JavaScript entry point.

3. The React Entry Point: src/main.jsx

In main.jsx, React establishes its bridge to the browser's Document Object Model using react-dom/client:

JSX
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
 
// 1. Locate the physical DOM node
const rootElement = document.getElementById('root');
 
// 2. Create the React concurrent root
const root = ReactDOM.createRoot(rootElement);
 
// 3. Render the root component tree into the container
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Key Elements of main.jsx:

  • createRoot (React 18+): Creates a modern concurrent root container. This unlocks automatic batching of state updates and concurrent rendering capabilities.
  • <React.StrictMode>: A development-only wrapper that helps surface potential side-effect bugs, deprecated APIs, and uncleaned timers by intentionally invoking component render functions twice in local development. It is completely inactive in production builds.

4. The Root Component: src/App.jsx

App.jsx is the topmost React component in your application hierarchy. It imports child components, coordinates global layouts, and returns JSX markup:

JSX
import React from 'react';
 
export default function App() {
return (
<div className="app-container">
<header>
<h1>Welcome to MSK Institute React Mastery</h1>
<p>Mastering modern front-end web engineering.</p>
</header>
</div>
);
}

5. public/ vs src/assets/

Front-end engineers often confuse static asset locations:

  • public/: Files placed here (e.g., robots.txt, favicon.ico) are served directly at the root path (/favicon.ico). They are not processed or hashed by Vite's build pipeline.
  • src/assets/: Images, fonts, and stylesheets placed here are imported directly into JavaScript files (import logo from './assets/logo.png'). Vite hashes their filenames for long-term browser cache invalidation (logo.8f3a12.png) and inlines small images as base64 data URIs.
Interactive Quiz

Practice Quiz

Question 1
In a modern Vite React application, where is the index.html file located?
Question 2
What is the primary purpose of ReactDOM.createRoot in React 18+?
Question 3
What does <React.StrictMode> do during development?
Question 4
Why should production image assets generally be imported from src/assets/ rather than referenced from public/?
Question 5
What is the standard HTML id used by conventional React starters to mount the root application component?
Next Lesson

Virtual DOM and React Render Cycle Explained

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Setting Up Modern React with ViteVirtual DOM and React Render Cycle Explained

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext