Understanding the React Project Structure

📚 MERN Stack 📂 Chapter 14: Introduction to React 📄 Lesson 14030 Beginner 🕒 February 27, 2026

Understanding what every file in your Vite React project does — and why — gives you the confidence to modify the scaffold, add new files correctly, and debug problems when the build or runtime behaves unexpectedly. In this lesson you will walk through every file in the generated project, understand the relationship between index.html, main.jsx, and App.jsx, and reorganise the folder structure into the architecture the MERN Blog client will use throughout Part 4.

The Generated Files — Explained

File	Purpose	Do You Edit It?
`index.html`	HTML shell — the single page React mounts into. Contains the `<div id="root">` where React renders.	Rarely — add <meta> tags, title, fonts
`src/main.jsx`	Entry point — imports React, ReactDOM, and App. Calls `ReactDOM.createRoot().render()` to mount the app.	Rarely — add global providers (Router, Context)
`src/App.jsx`	Root component — the top of your component tree. Usually sets up routing.	Yes — add routes, global layout
`src/index.css`	Global CSS — applies to the whole application.	Yes — add resets, CSS variables, base styles
`src/App.css`	Styles scoped to App.jsx.	Optional — often deleted and replaced with a CSS Modules approach
`vite.config.js`	Vite configuration — plugins, dev server proxy, build options.	Yes — add proxy, aliases, plugins
`package.json`	Project manifest — dependencies, scripts.	Yes — add packages, update scripts
`public/`	Static assets served at the root URL. Files here bypass Vite processing.	Yes — add favicons, robots.txt, static images

Note: The key difference between public/ and src/assets/: files in public/ are copied to dist/ as-is and served at their exact path (e.g. public/logo.png → /logo.png). Files in src/assets/ are processed by Vite — they get content-hashed filenames in the build, optimised, and tree-shaken. Import assets from src/assets/ when they are used in components; put truly static files (favicon, robots.txt) in public/.

Tip: Add a jsconfig.json (or tsconfig.json for TypeScript) at the client root with "paths": { "@/*": ["./src/*"] } and configure the same alias in vite.config.js. This gives you absolute imports: import Button from '@/components/ui/Button' instead of fragile relative paths like import Button from '../../../components/ui/Button'.

Warning: Every file in src/ is processed by Vite and included in the bundle only if it is imported somewhere. Files that are not imported will be tree-shaken and excluded from the production build. If you add an image to src/assets/ but never import it in a component, it will not appear in the built site. Move truly standalone static files to public/ instead.

index.html — The HTML Shell

<!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>MERN Blog</title>
  </head>
  <body>
    <!-- React mounts here — this div is the entire SPA container -->
    <div id="root"></div>

    <!-- Vite injects the JS bundle here at build time -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx — The Entry Point

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot }  from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // added in MERN Blog
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>   {/* Router wraps the entire app */}
      <App />
    </BrowserRouter>
  </StrictMode>
);

The MERN Blog Client Structure

client/src/
├── assets/               ← Images, SVGs imported in components
├── components/           ← Reusable UI components (Button, Modal, PostCard...)
│   ├── ui/               ← Generic UI primitives
│   └── layout/           ← Header, Footer, Sidebar, Layout wrapper
├── pages/                ← Page-level components (one per route)
│   ├── HomePage.jsx
│   ├── PostPage.jsx
│   ├── LoginPage.jsx
│   └── RegisterPage.jsx
├── services/             ← Axios API call functions (one file per resource)
│   ├── authService.js
│   └── postService.js
├── context/              ← React Context providers (AuthContext, ThemeContext)
│   └── AuthContext.jsx
├── hooks/                ← Custom hooks (usePosts, useAuth, useForm)
│   └── useAuth.js
├── utils/                ← Helper functions (formatDate, truncate...)
│   └── helpers.js
├── App.jsx               ← Root component — defines routes
├── main.jsx              ← Entry point — mounts React
└── index.css             ← Global styles

Configuring Path Aliases in Vite

// client/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // @ → src/
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/api': { target: 'http://localhost:5000', changeOrigin: true },
    },
  },
});

// client/jsconfig.json — for VS Code IntelliSense with the alias
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

Common Mistakes

Mistake 1 — Putting all components in one flat directory

❌ Wrong — all 30+ component files in src/components/ with no organisation:

src/components/
  Header.jsx, Footer.jsx, Button.jsx, Modal.jsx, PostCard.jsx,
  LoginForm.jsx, RegisterForm.jsx, PostForm.jsx...
// Finding a specific component requires scanning the whole list

✅ Correct — group by domain and responsibility from day one:

src/components/ui/         (Button, Input, Modal, Spinner)
src/components/layout/     (Header, Footer, Sidebar)
src/components/posts/      (PostCard, PostList, PostForm)
src/components/auth/       (LoginForm, RegisterForm)

Mistake 2 — Writing API calls directly in component files

❌ Wrong — fetch calls scattered across component files:

// PostCard.jsx
useEffect(() => {
  axios.delete(`/api/posts/${id}`, { headers: { Authorization: `Bearer ${token}` } });
}, []);

✅ Correct — centralise all API calls in service files:

// services/postService.js
export const deletePost = (id) => axios.delete(`/api/posts/${id}`);

// PostCard.jsx
import { deletePost } from '@/services/postService';
const handleDelete = () => deletePost(id);

Mistake 3 — Not wrapping the app in BrowserRouter

❌ Wrong — using React Router hooks without a Router provider:

Error: useNavigate() may be used only in the context of a <Router> component

✅ Correct — wrap the entire app in BrowserRouter in main.jsx (already shown above).

Quick Reference

File / Folder	Purpose
`index.html`	HTML shell with `<div id="root">`
`src/main.jsx`	Entry point — mounts React into the DOM
`src/App.jsx`	Root component — routing and global layout
`src/pages/`	One component per route
`src/components/`	Reusable UI pieces
`src/services/`	Axios API call functions
`src/context/`	React Context providers
`src/hooks/`	Custom React hooks
`public/`	Static files (favicon, robots.txt) — not processed by Vite
`vite.config.js`	Vite config — proxy, aliases, plugins

The Generated Files — Explained #

index.html — The HTML Shell #

main.jsx — The Entry Point #

The MERN Blog Client Structure #

Configuring Path Aliases in Vite #

Common Mistakes #

Mistake 1 — Putting all components in one flat directory #

Mistake 2 — Writing API calls directly in component files #

Mistake 3 — Not wrapping the app in BrowserRouter #

Quick Reference #

🧠 Test Yourself #

📚 More in this Tutorial Series

The Generated Files — Explained

index.html — The HTML Shell

main.jsx — The Entry Point

The MERN Blog Client Structure

Configuring Path Aliases in Vite

Common Mistakes

Mistake 1 — Putting all components in one flat directory

Mistake 2 — Writing API calls directly in component files

Mistake 3 — Not wrapping the app in BrowserRouter

Quick Reference

🧠 Test Yourself