Understanding React Project Structure and Folder Setups

Most of the time, create-react-app doesn’t create a build configuration when we use it.

In this blog, we will create our boilerplate. Let us look at the best boilerplate structures that most developers prefer.

What is React Project Architecture?

React is a JavaScript library designed by Facebook, a User Interface(UI) library, and a tool for making UI components.

Furthermore, the React.js library is a User interface library. It does not implement any pattern for designing a complex application.

Moreover, the React developers are free to select the design pattern. The React community endorses specific design patterns. One of the design patterns is the Flux pattern.

React library also encloses a lot of concepts like Higher Order components, Context, Render props, Refs, etc., to write more useful code.

How to Structure a React Project?

There is no “best React project architecture” that will match any project and coding technique.

But you should always give structure to your React.js project.

Furthermore, React doesn’t follow any precise project structure, and the favourable thing about this is that it permits us to create a structure to serve our needs.

The discussion here is just an opinionated way to structure a React project. You can employ some parts or all of them for designing your React project. So let’s dive in.

Setup

Firstly, let’s fix the development environment.

VS Code with different extensions as a code editor.

Google Chrome as a browser delivers numerous easy-to-understand developer tools for debugging.

As a debugging tool, React developer tools and Redux DevTools are helpful.

Now we can use CLI to start a new project.

React js is designed using ‘create-react-app’ and provides some default code.

Now, delete almost everything like logos, images, styling, etc., and hold the skeleton application, so that we can begin our folder structure.

Folder Structure

Let us define each folder structure of React

1. Assets Folder
As the name says, it includes assets of React.js project.

Furthermore, it includes images and styling files. Additionally, here we can store our global styles.

Also, we are centralizing the React project so we can keep the page-based or component-based styles over here.

Lastly, we can even maintain the style according to the pages folder or component folder also. But it relies on programmer comfortability.

2. Layouts Folder

As the name says, it includes layouts available to the entire React project like header, footer, etc. Furthermore, we can keep the code of the header, footer, or sidebar here and call it.

3. Components Folder

The building blocks of any folder are components.

Furthermore, this folder encloses a collection of UI components like buttons, modals, inputs, loader, etc., and it is useful across multiple files in the React project.

Additionally, each component should include a test file to perform a unit test as it is more utilised in the project.

4. Pages Folder

The files in the pages folder display the path of the react application.

Furthermore, each file in this folder has its route. A page has its subfolder. Each page includes its state and is normally utilised to call an async operation.

Lastly, It encloses different components grouped together.

5. Middleware Folder

This folder includes a middleware that permits side effects in the application.

Furthermore, it is useful when we are utilising redux with it. Also, maintain all our custom middleware.

6. Routes Folder

This folder encloses all routes of the application. Furthermore, it includes private, protected, and all kinds of routes. Additionally, we can even call our sub-route.

7. Config Folder

This folder encloses a configuration file where we keep environment variables in config.js. Furthermore, we will utilise this file to create multi-environment configurations in your React application.

8. Services Folder

This folder will be added significance if perform with redux in your project. Furthermore, there are 3 folders named actions, reducers, and constant subfolders present inside it to handle states.
Also, the actions and reducers will be called in nearly all the pages, so generate actions, reducers & constants according to the page’s name.

9. Utils Folder

Utils folder encloses some constantly used functions that are typically operated in the project.

Lastly, it should possess only standard js functions & objects like dropdown options, regex conditions, data formatting, etc.