React.js Setup and Folder Structure Guide

Learn how to set up React using Vite and organize your project with a scalable folder structure. Understand components, pages, assets, hooks, services, and best practices.
React.js Setup and Folder Structure: A Complete Beginner Guide
Before building React applications, you need to understand how to properly set up a project and organize its files.
Many beginners create React projects successfully but struggle when their applications start growing.
A good folder structure helps you:
- organize code
- improve scalability
- maintain projects easily
- collaborate with teams
- reduce development time
In this guide, you'll learn how to create a React project and organize it using a practical folder structure.
Prerequisites
Before learning this topic, make sure you understand:
These concepts are used frequently in React applications.
Setting Up a React Project
The easiest way to create a modern React application is using Vite.
Vite provides:
- fast development server
- instant hot reload
- optimized builds
- better performance than older tools
Create a React project:
npm create vite@latest
Choose:
Project Name
React
JavaScript
Install dependencies:
npm install
Start development server:
npm run dev
You should see:
Local: http://localhost:5173
Your React application is now running.
Understanding the Default Vite Structure
After creating a React project, you'll see something similar to:
project/
├── node_modules/
├── public/
├── src/
├── package.json
├── vite.config.js
└── index.html
Let's understand the important folders.
The Public Folder
public/
This folder stores static assets.
Examples:
- images
- favicon
- robots.txt
- sitemap.xml
Example:
public/
├── logo.png
├── favicon.ico
└── robots.txt
Files inside public can be accessed directly.
Example:
<img src="/logo.png" />
The Src Folder
Most of your React code lives inside:
src/
This is the main development folder.
Understanding Main.jsx
Example:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM
.createRoot(
document.getElementById("root")
)
.render(<App />);
Responsibilities:
- starts React
- renders the application
- connects React to the DOM
Understanding App.jsx
Example:
function App() {
return (
<h1>
Hello React
</h1>
);
}
export default App;
This acts as the root component of your application.
Why Folder Structure Matters
Small projects can work with very few folders.
As projects grow:
- files increase
- components multiply
- maintenance becomes difficult
A proper structure keeps projects organized.
Beginner-Friendly Folder Structure
For small projects:
src/
├── components/
├── pages/
├── assets/
├── App.jsx
└── main.jsx
Components Folder
components/
Contains reusable UI elements.
Example:
components/
├── Navbar.jsx
├── Footer.jsx
├── Button.jsx
└── Card.jsx
Reusable components reduce duplication.
Pages Folder
pages/
Contains application pages.
Example:
pages/
├── Home.jsx
├── About.jsx
├── Contact.jsx
└── Blog.jsx
Each page represents a route.
Assets Folder
assets/
Stores:
- images
- icons
- fonts
- illustrations
Example:
assets/
├── images/
├── icons/
└── fonts/
Recommended Folder Structure
As projects become larger:
src/
├── assets/
│
├── components/
│ ├── ui/
│ ├── layout/
│ └── common/
│
├── pages/
│
├── hooks/
│
├── services/
│
├── utils/
│
├── context/
│
├── constants/
│
├── App.jsx
│
└── main.jsx
This structure scales well for most projects.
Hooks Folder
Contains custom hooks.
Example:
hooks/
├── useAuth.js
├── useTheme.js
└── useFetch.js
Custom hooks help reuse logic.
Services Folder
Contains API-related code.
Example:
services/
├── authService.js
├── productService.js
└── userService.js
Separating API calls improves maintainability.
Utils Folder
Stores helper functions.
Example:
utils/
├── formatDate.js
├── generateSlug.js
└── calculatePrice.js
Useful for reusable utility functions.
Context Folder
Contains React Context providers.
Example:
context/
├── AuthContext.jsx
├── ThemeContext.jsx
Used for global state management.
Constants Folder
Stores application constants.
Example:
constants/
├── routes.js
├── api.js
└── config.js
Helps centralize configuration.
Real-World Example
A simple blog application:
src/
├── assets/
│
├── components/
│ ├── Navbar.jsx
│ ├── Footer.jsx
│ └── PostCard.jsx
│
├── pages/
│ ├── Home.jsx
│ ├── Blog.jsx
│ └── PostDetails.jsx
│
├── services/
│ └── postService.js
│
├── App.jsx
│
└── main.jsx
This structure is clean and beginner-friendly.
Common Beginner Mistakes
Keeping Everything in One Folder
Avoid:
src/
Navbar.jsx
Footer.jsx
Home.jsx
About.jsx
Product.jsx
Button.jsx
Projects quickly become difficult to manage.
Creating Too Many Folders
Don't create folders unless they solve a real problem.
Keep the structure simple.
Mixing API Logic with Components
Separate API calls into dedicated service files.
Ignoring Reusability
Create reusable components whenever possible.
Watch Full React Setup Tutorial
If you prefer video learning, watch the complete tutorial below where we create a React project using Vite and organize it using a scalable folder structure.
Watch the Full React Setup Tutorial
This tutorial demonstrates how professional React projects are organized.
Build Something
Practice by creating:
- Portfolio Website
- Blog Application
- Todo Application
- Product Listing Page
- Weather App
Focus on organizing files properly from the beginning.
Production Tip
Professional React developers usually:
- keep components reusable
- separate business logic
- organize API calls properly
- use feature-based structures for large projects
- avoid unnecessary complexity
A clean folder structure becomes increasingly valuable as projects grow.
Why Folder Structure Matters
A well-organized project helps developers:
- work faster
- find files easily
- scale applications
- reduce bugs
- collaborate efficiently
Good architecture is just as important as writing code.
Conclusion
Setting up React with Vite provides a fast and modern development experience.
As your projects grow, a structured folder organization becomes essential for maintainability and scalability.
By following a clean folder structure and separating concerns properly, you'll build React applications that are easier to develop, maintain, and scale in the future.