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:

• React.js Introduction
• JavaScript Variables
• JavaScript Functions
• Objects in JavaScript

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.