Project Anatomy: How is Everything Connected?

When you first open a project created with Vite, there seem to be many folders. Let's break them down like a city map where every building has its role.

1. The Foundation: index.html

In React, we have only one HTML file for the entire application.

• If you open it, you'll see an almost empty page with one important line: <div id="root"></div>.
• This is the " landing pad. " Your entire massive application will " land " exactly in this small empty block.

2. The Electrical Panel: main.jsx

This is the most important file. This is where React " wakes up " and connects your code with reality.

• It finds that same div#root and says: " Alright, I'm the boss here now! Render the App component here. "
• This file handles the " Mounting " of the entire application.

3. City Districts: src/ folder

This is where you'll spend 99% of your time.

• assets/: " Prop storage. " Here lie images, icons, and fonts.
• components/: " Parts workshop. " Here you create buttons, cards, and menus — the pieces you'll use to build the site.
• App.jsx: " Main Square. " This is the first full component that assembles all other components into one interface.

4. StrictMode: Your Personal Safety Inspector

In the main.jsx file, you'll notice the wrapper <React.StrictMode>. It's not just a tag; it's a " strict oversight mode. " Why it's needed (only in development):

1. Double Check: it deliberately runs your code twice. If your app breaks on the second run, it means you've written " dirty " code with Side Effects. This helps find bugs before a user ever sees them.
2. Deprecation Warnings: If you use old, unsafe React methods, StrictMode will " shout " at you in the browser console.

Remember: StrictMode only works while you are writing code on your computer. When you put the site online (Production), it turns off automatically to save resources.