React Project Structure: Files, Folders & main.jsx Explained

Understanding the React Project Structure

What is in the Project Folder?

student-dashboard/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
└── vite.config.js

What Each Part Does

The Two Files That Matter Most

index.html

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

This is the entire body of your HTML file. One empty div. React fills it in.

src/main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

How It Works

• createRoot(document.getElementById('root')) — finds the empty div in index.html and tells React to take control of it.
• .render(<App />) — puts your App component inside that div.
• <StrictMode> — a development-only wrapper that warns you about unsafe patterns. It does not appear in the final build. It also intentionally runs some code twice in development, which surprises beginners later in the useEffect lesson.

This is why React apps are called single-page applications: there is only one real HTML file, and React swaps the contents.