📁 React JS Project Structure – A Complete Guide for Beginners

One of the key steps to becoming a proficient React developer is understanding the standard folder structure of a React project. Whether you’re using Vite, Create React App (CRA), or your own build tool, having a clean, modular structure is critical for scalability and maintainability.

🚀 Default React Folder Structure (Vite + React)

When you create a project with Vite, this is the basic file/folder layout:

my-react-app/
├── node_modules/
├── public/
│   └── favicon.svg
├── src/
│   ├── App.jsx
│   ├── main.jsx
├── index.html
├── package.json
├── vite.config.js
  

📂 Understanding Each Folder and File

📁 node_modules/

This is where all the project dependencies are stored. You typically never edit anything here directly.

📁 public/

• Contains static assets like favicon.svg and images
• index.html in the root usually links to this directory

📁 src/

This is the heart of your React application. You write all your components, pages, styles, and logic here.

• App.jsx – The root component of your app
• main.jsx – Entry point that renders <App /> into the DOM

📄 index.html

Contains a <div id="root"></div> where the entire React app is injected.

📄 package.json

• Lists all dependencies, scripts, and metadata
• Example scripts: npm run dev, npm run build

📄 vite.config.js

Configuration file for the Vite bundler. You can customize paths, aliases, plugins, etc.

📐 Recommended Scalable Folder Structure

As your app grows, consider organizing code using a feature-based structure:

src/
├── assets/         # Images, fonts, icons
├── components/     # Reusable UI components (buttons, inputs)
├── pages/          # Full pages like Home, About, Contact
├── routes/         # Route definitions
├── services/       # API calls, business logic
├── store/          # Redux or Zustand store (if used)
├── hooks/          # Custom React hooks
├── utils/          # Helper functions
├── styles/         # Global CSS/SASS files
├── App.jsx
├── main.jsx
  

💡 Why Use This Modular Structure?

• Improves code readability and reusability
• Makes the app easier to scale as features grow
• Promotes separation of concerns

🌐 Sample Component File: Button.jsx

import React from 'react';
import './Button.css';

const Button = ({ label, onClick }) => {
  return <button className="btn" onClick={onClick}>{label}</button>;
};

export default Button;
  

📁 Vite vs CRA – Folder Differences

• Vite has a minimal setup; faster dev experience
• CRA includes more tooling (like Webpack, Babel) out of the box
• Both follow similar structure, but Vite uses main.jsx instead of index.js

🧠 Best Practices

• Use consistent naming (e.g., PascalCase for components)
• Group files by feature or domain, not just type
• Use aliases to avoid long relative imports (e.g., @components/Button)

📌 Final Thoughts

Your React project’s folder structure plays a huge role in how maintainable and scalable your code is. As your application grows, stick to a modular architecture and use best practices to keep your codebase clean and organized.

In the next blog, we’ll cover how to manage state in React using useState and useReducer.