REACT File Structure

A well-organized React file structure improves maintainability, scalability, and collaboration. Here’s a structured approach to organizing your React project

1. Basic File Structure (for Small Projects)

my-react-app/
│── public/         # Static assets (favicon, index.html)
│── src/            # Main source code
│   ├── components/ # Reusable UI components
│   ├── pages/      # Page components (for React Router)
│   ├── assets/     # Images, fonts, icons
│   ├── styles/     # CSS, SCSS, or Tailwind styles
│   ├── App.js      # Main app component
│   ├── index.js    # Entry point
│── package.json    # Project dependencies
│── .gitignore      # Files to ignore in Git
│── README.md       # Documentation

Try It Now

2. Scalable File Structure (for Large Projects)

my-react-app/
│── public/        
│── src/            
│   ├── api/        # API calls (Axios, Fetch)
│   ├── assets/     # Static files (images, fonts)
│   ├── components/ # Reusable UI components
│   ├── pages/      # Page components
│   ├── hooks/      # Custom React hooks
│   ├── context/    # React Context API for state management
│   ├── redux/      # Redux store, actions, reducers (if using Redux)
│   ├── utils/      # Helper functions, formatters
│   ├── routes/     # Centralized routing setup
│   ├── styles/     # Global & module styles
│   ├── App.js      # Main application component
│   ├── index.js    # Entry point
│── .env            # Environment variables
│── package.json    # Project dependencies
│── .gitignore      # Git ignore file
│── README.md       # Documentation

Try It Now

3. Explanation of Key Folders

📁 1. public/

  • Stores static files that don’t change dynamically.
  • Includes index.html, favicon, and images.

📁 2. src/ (Main Source Code)

📂 components/ (Reusable UI Components)

  • Stores UI components used across multiple pages.
  • Examples: 
    components/
├── Button.js
├── Navbar.js
├── Footer.js
├── Card.js

    Try It Now

pages/ (Page Components)

  • Each file represents a page (for React Router or Next.js).
  • Example: 
    pages/
├── Home.js
├── About.js
├── Contact.js
├── Dashboard.js

    Try It Now

📂 api/ (API Calls)

  • Stores functions for fetching data using Axios or Fetch API.
  • Example: 
    // api/user.js
import axios from "axios";

export const fetchUsers = async () => {
  const response = await axios.get("https://jsonplaceholder.typicode.com/users");
  return response.data;
};

    Try It Now

📂 hooks/ (Custom Hooks)

  • Stores reusable custom hooks.
  • Example: 
    // hooks/useFetch.js
import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
};

export default useFetch;

    Try It Now

📂 context/ (React Context API)

  • Stores global state management logic.
  • Example: 
    // context/AuthContext.js
import { createContext, useState } from "react";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

    Try It Now

📂 redux/ (Redux Store)

  • Stores Redux logic (reducers, actions, store).
  • Example: 
    redux/
├── store.js
├── reducers/
├── actions/
├── slices/

    Try It Now

📂 routes/ (React Router Configuration)

  • Centralized routing setup.
  • Example: 
    // routes/Routes.js
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";

const AppRoutes = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
);

export default AppRoutes;

    Try It Now

📂 utils/ (Helper Functions)

  • Stores utility functions.
  • Example: 
    // utils/formatDate.js
export const formatDate = (date) => new Date(date).toLocaleDateString();

    Try It Now

📂 styles/ (CSS & Styling)

  • Stores global styles, CSS modules, or Tailwind CSS.
  • Example: 
    styles/
├── global.css
├── Home.module.css
├── theme.js

    Try It Now

4. File Naming Conventions

✔️ Use PascalCase for components (Navbar.js, Footer.js).
✔️ Use camelCase for utility functions (formatDate.js).
✔️ Use kebab-case for CSS files (global.css).