How I Structure my React Projects

React.js has been a game-changer in the world of web development since its introduction by Facebook. As we move forward into 2024, it’s important to keep up with the best practices for setting up a React project. In this blog post, we’ll explore how to set up a folder structure for a React project in 2024.

Why is Folder Structure Important?

A well-organized folder structure is crucial for maintaining large codebases. It makes your code easier to understand, debug, and scale. It also helps new developers get up to speed quickly.

Recommended Folder Structure

Here’s a recommended folder structure for a React project:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── containers/
│   ├── context/
│   │   ├── ThemeContext.js
│   │   └── UserContext.js
│   ├── pages/
│   ├── navigation/
│   ├── imports/
│   ├── styles/
│   │   ├── global.css
│   │   ├── variables.css
│   │   └── components/
│   │       ├── button.css
│   │       └── ...
│   ├── store/ or redux/
│   ├── utils/
│   └── tests/ or __tests__/
├── config/
└── package.json

Understanding the Folder Structure

Let’s break down what each folder is for:

• public/: This folder is reserved for assets that don’t require processing by webpack. Place your HTML files, favicon.ico, and other public assets here.
• src/: The src folder is the epicenter of your React.js project. Keep it clean and focused on your source code.
• assets/: House images, fonts, and other static assets in an organized manner.
• components/: Store your reusable UI components here, promoting a modular and maintainable approach.

context/
├── ThemeContext.js
└── UserContext.js

• containers/: Group container components that handle the logic and state management.
• contexts/: folder is typically used to manage global state using the Context API1. The Context API is a feature in React that allows you to share state and pass it through the component tree without having to pass props down manually at every level.
• ThemeContext.js and UserContext.js are context providers. They provide state (theme and user information, respectively) to the components in your application that need it context
• pages/: Each page or major section of your application gets its dedicated folder.
• navigation/: This folder can be used to manage your navigation logic. If you’re using a library like react-router-dom, this is where you’d store your Router components
• imports/: This folder can be used to manage your import statements. You can create index.js files here that export multiple components, making your import statements elsewhere in the project cleaner and more manageable1
• styles/: Create a styles folder to store your global styles, variables, and utility classes.
• store/ or redux/: For projects utilizing Redux or any state management library, gather related files in a store or redux folder.
• utils/: House utility functions, helper classes, or any miscellaneous tools in a utils folder.
• tests/ or __tests__/: If you’re adopting a test-driven development (TDD) approach, dedicate a folder named tests or tests for your unit and integration tests.
• config/: Centralize your configuration files in a dedicated config folder.

Conclusion

A well-structured React project can save you a lot of time and headaches in the long run. It’s worth investing the time upfront to set up a scalable and maintainable folder structure. Remember, these are general guidelines and the specific needs of your project may require different approaches or additional steps. Always refer to the latest documentation and best practices for the most accurate information.

All Set 👍 Happy Coding :)