Folder structure best practices in React

Introduction

Organizing your React project files clearly helps you and others find code easily. It makes your app easier to build and fix.

Starting a new React project to keep code neat from the beginning

Working with a team so everyone understands where to put and find files

Adding new features without making the project messy

Refactoring old code to improve readability and maintenance

Preparing your app for scaling with more components and pages

Syntax

React

src/
  components/
    Button.jsx
    Header.jsx
  pages/
    Home.jsx
    About.jsx
  hooks/
    useFetch.js
  utils/
    formatDate.js
  App.jsx
  index.jsx

src/ is the main folder for your React code.

Group similar files like components, pages, hooks, and utilities into separate folders.

Examples

Put reusable UI parts like buttons and headers inside components/.

React

src/components/Button.jsx
src/components/Header.jsx

Put full pages or views inside pages/ to separate them from small components.

React

src/pages/Home.jsx
src/pages/About.jsx

Custom hooks go inside hooks/ to keep logic reusable and organized.

React

src/hooks/useFetch.js

Helper functions like date formatting belong in utils/.

React

src/utils/formatDate.js

Sample Program

This example shows a simple React app with a clear folder structure. Components like Button are in components/. Pages like Home are in pages/. The App component uses the Home page, and index.jsx renders the app.

React

/* Folder structure example for a React app */

// src/components/Button.jsx
import React from 'react';

export function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

// src/pages/Home.jsx
import React from 'react';
import { Button } from '../components/Button';

export function Home() {
  return (
    <main>
      <h1>Welcome to Home Page</h1>
      <Button onClick={() => alert('Clicked!')}>Click Me</Button>
    </main>
  );
}

// src/App.jsx
import React from 'react';
import { Home } from './pages/Home';

export function App() {
  return <Home />;
}

// src/index.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Important Notes

Keep folder names simple and meaningful.

Use index files to simplify imports if your project grows.

Consistent structure helps new team members understand your code faster.

Summary

Organize React files by purpose: components, pages, hooks, utils.

Clear structure makes your app easier to build and maintain.

Start with a simple structure and adjust as your app grows.