CSTechie
Comments
courseReact JS

Folder Structure

​When working on a React.js project, organizing your folder structure is crucial for maintaining scalability, readability, and ease of collaboration. A well-structured project ensures that your codebase remains clean and manageable, especially as your application grows in complexity.


Why is Folder Structure Important in React.js?

  • Scalability: A clear structure makes it easier to add new features without cluttering the codebase.
  • Readability: Developers can quickly locate files and understand the project layout.
  • Maintainability: A well-organized structure simplifies debugging and updating code.
  • Collaboration: Teams can work more efficiently when the project follows a consistent structure.


Basic React.js Folder Structure

​When you create a React app using create-react-app, the default folder structure looks like this:

​my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

While this structure is sufficient for small projects, larger applications require a more organized approach.


Recommended Folder Structure for React.js Projects

​Here’s a commonly used folder structure for medium to large React.js applications:

​​my-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── assets/
│       ├── images/
│       └── fonts/
├── src/
│   ├── components/
│   │   ├── Header/
│   │   │   ├── Header.js
│   │   │   ├── Header.css
│   │   │   └── Header.test.js
│   │   ├── Footer/
│   │   │   ├── Footer.js
│   │   │   ├── Footer.css
│   │   │   └── Footer.test.js
│   │   └── common/
│   │       ├── Button.js
│   │       └── Input.js
│   ├── pages/
│   │   ├── Home/
│   │   │   ├── Home.js
│   │   │   ├── Home.css
│   │   │   └── Home.test.js
│   │   ├── About/
│   │   │   ├── About.js
│   │   │   ├── About.css
│   │   │   └── About.test.js
│   ├── services/
│   │   └── api.js
│   ├── hooks/
│   │   └── useCustomHook.js
│   ├── context/
│   │   └── AuthContext.js
│   ├── utils/
│   │   └── helpers.js
│   ├── styles/
│   │   ├── variables.css
│   │   └── global.css
│   ├── App.js
│   ├── index.js
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

Explanation of Each Folder

1. public/

  • Contains static files like index.html, images, and fonts.
  • The index.html file is the entry point for the React app.
  • Assets in this folder are served directly without being processed by Webpack.

2. src/

This is where the main application code resides. It is further divided into subfolders:

a. components/
  • Contains reusable UI components.
  • Each component has its own folder, which includes the component file (.js or .jsx), styles (.css), and tests (.test.js).
  • Example: Header, Footer, and Button components.
b. pages/
  • Contains components that represent entire pages or views.
  • Each page has its own folder, which includes the page file, styles, and tests.
  • Example: Home and About pages.
c. services/
  • Contains files for API calls or external services.
  • Example: api.js for managing HTTP requests using libraries like Axios or Fetch.
d. hooks/
  • Stores custom React hooks for reusable logic.
  • Example: useCustomHook.js.
e. context/
  • Contains React Context files for managing global state.
  • Example: AuthContext.js for authentication state.
f. utils/
  • Contains utility functions or helper methods used across the app.
  • Example: helpers.js for formatting dates or numbers.
g. styles/
  • Stores global styles, CSS variables, and theming files.
  • Example: global.css for global styles and variables.css for CSS variables.


Best Practices for React.js Folder Structure

  • Group by Feature or Module:
    Organize files by feature or module rather than by type. For example, keep all files related to a specific feature (e.g.,     Home) in one folder.

  • Keep Components Reusable:
    Place reusable components in a common/ folder under components/.

  • Separate Concerns:
    Keep logic (e.g., API calls) separate from UI components by using folders like services/ and hooks/.

  • Use Consistent Naming Conventions:
    Use PascalCase for component and folder names (e.g., Header.js) and camelCase for utility functions (e.g., formatDate).

  • Avoid Deep Nesting:
    Keep the folder structure as flat as possible to avoid complexity.

  • Test Files:
    Place test files alongside the components they test, using the     .test.js extension.