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.

Practice

1. What is the main reason to organize React files into folders like components, pages, and hooks?

easy

A. To make the app run faster

B. To reduce the file size of the app

C. To keep the project easy to understand and maintain

D. To avoid using React hooks

Solution

1. Step 1: Understand folder organization purpose

   Folders like components and hooks group related files by their role.

2. Step 2: Recognize benefits of clear structure

   This grouping makes the project easier to read and maintain for developers.

3. Final Answer:

   To keep the project easy to understand and maintain -> Option C

4. Quick Check:

   Folder organization = easier maintenance [OK]

Hint: Folders group related files for clarity and ease [OK]

Common Mistakes:

• Thinking folder structure affects app speed
• Confusing file size with organization
• Believing hooks folder is optional for React hooks

2. Which of the following is the correct way to organize a React project folder for components?

easy

A. Put all components in a single components folder

B. Scatter components randomly in the root folder

C. Put components inside the public folder

D. Put components inside the node_modules folder

Solution

1. Step 1: Identify standard folder for components

   React projects usually keep components in a dedicated components folder.

2. Step 2: Avoid incorrect placements

   Components should not be in public or node_modules folders, which serve other purposes.

3. Final Answer:

   Put all components in a single components folder -> Option A

4. Quick Check:

   Components folder = centralized components [OK]

Hint: Keep components together in one folder [OK]

Common Mistakes:

• Placing components in public folder
• Scattering components without structure
• Modifying node_modules folder

3. Given this folder structure:

src/
  components/
    Button.jsx
  hooks/
    useToggle.js
  pages/
    Home.jsx

Which file would you expect to find the custom React hook?

medium

A. src/components/Button.jsx

B. src/pages/Home.jsx

C. src/index.js

D. src/hooks/useToggle.js

Solution

1. Step 1: Understand folder naming conventions

   Custom hooks are usually placed in the hooks folder.

2. Step 2: Match file to folder purpose

   The file useToggle.js inside hooks matches the custom hook naming pattern.

3. Final Answer:

   src/hooks/useToggle.js -> Option D

4. Quick Check:

   Custom hooks in hooks folder = useToggle.js [OK]

Hint: Hooks go in the hooks folder [OK]

Common Mistakes:

• Looking for hooks in components folder
• Confusing pages folder with hooks
• Assuming index.js contains hooks

4. You see this folder structure in a React project:

src/
  components/
    Header.jsx
  utils/
    helpers.js
  Header.jsx

What is the main problem here?

medium

A. Having a utils folder is not recommended

B. Duplicate Header.jsx file in root and components folder causes confusion

C. Components should be inside utils folder

D. Files should not have .jsx extension

Solution

1. Step 1: Identify duplicate file names

   There are two Header.jsx files: one in components and one in root.

2. Step 2: Understand confusion caused by duplicates

   This duplication can confuse developers and cause import errors.

3. Final Answer:

   Duplicate Header.jsx file in root and components folder causes confusion -> Option B

4. Quick Check:

   Duplicate filenames = confusion [OK]

Hint: Avoid duplicate filenames in different folders [OK]

Common Mistakes:

• Thinking utils folder is bad practice
• Believing components belong in utils
• Ignoring file extensions importance

5. You are building a large React app. Which folder structure best supports growth and easy maintenance?

hard

A. Organize by feature: each feature folder contains components, hooks, and styles

B. Put all files in one big folder to avoid complexity

C. Separate files only by file type, ignoring features

D. Keep all components and hooks mixed in the root folder

Solution

1. Step 1: Understand feature-based organization

   Grouping by feature means each feature folder holds all related files, making it easier to find and update.

2. Step 2: Compare with other structures

   Flat or type-only folders become hard to manage as app grows, causing confusion.

3. Final Answer:

   Organize by feature: each feature folder contains components, hooks, and styles -> Option A

4. Quick Check:

   Feature folders = scalable and maintainable [OK]

Hint: Group by feature for scalable projects [OK]

Common Mistakes:

• Using one big folder causes clutter
• Separating only by file type slows feature updates
• Mixing all files in root is confusing