React Project Structure and File Organization

⏱ Estimated reading time: 2 min

A clean project structure makes React applications scalable, readable, and maintainable. While React does not enforce a strict structure, following best practices is important as projects grow.

Typical React Project Structure

src/
├── assets/
│   ├── images/
│   └── styles/
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.css
│   └── Navbar.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
├── hooks/
│   └── useAuth.js
├── context/
│   └── AuthContext.jsx
├── services/
│   └── api.js
├── utils/
│   └── helpers.js
├── App.jsx
├── main.jsx
└── index.css

Folder Breakdown

components/

• Reusable UI components

• Buttons, modals, cards, inputs

Best practice: One component per folder for complex components.

pages/

• Page-level components

• Used with React Router

• Each file represents a route

assets/

• Static files (images, fonts, global styles)

hooks/

• Custom React hooks

• Reusable logic (useFetch, useAuth)

context/

• Context API files

• Global state (theme, auth, language)

services/

• API calls and external services

• Axios or Fetch configurations

export const getUsers = () => axios.get("/users");

utils/

• Helper functions

• Constants and formatting logic

Entry Files

main.jsx

• Application entry point

• Renders

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

App.jsx

• Root component

• Routes and layout setup

File Naming Conventions

• Components → PascalCase (UserCard.jsx)

• Hooks → camelCase starting with use (useAuth.js)

• Utilities → camelCase

• Folders → lowercase or kebab-case

Small Project Structure

src/
├── App.jsx
├── components/
├── index.css
└── main.jsx

Large Project Tips

• Group files by feature, not type

• Split contexts and reducers

• Lazy load pages

• Avoid deeply nested folders

Feature-Based Structure (Advanced)

src/
├── auth/
│   ├── AuthPage.jsx
│   ├── authService.js
│   └── useAuth.js
├── dashboard/
│   ├── Dashboard.jsx
│   └── dashboardAPI.js

Best Practices

• Keep components small and reusable

• Separate logic from UI

• Avoid duplication

• Refactor as the app grows

Key Points

• No single “correct” structure

• Organize for scalability

• Use folders intentionally

• Maintain consistency