With a fast scale rate, how should ReactJS projects be structured?

Tram Ho

React is a library and not a framework, so it doesn’t give any structure when building an app. This gives developers the freedom to create their own project structure. However, with junior developers it is very difficult to find the right structure for your project.

Personal opinion

Each project, will solve a specific problem and therefore need a specific structure and rules. There are very good structures for this project but for another it is a bad approach. Therefore, the approach covered by this article will not necessarily address your project’s needs. However, it can help you change mindset to refactor your project in a more optimal way.

The structure in this article will allow your project to be scalable and easily maintained.

If we find a structure that works for our project to refactor, it will improve your productivity.

OK, Let’s go …

1. Global Structure

The root directory will be similar in structure to other projects, since it contains the project’s config so we will only focus on the structure of the ./src directory.

Below is the structure of the ./src directory

1.1. Root

  • ./index.js : is the endpoint file of the project. In this file, you will initialize the libraries the project will use, for example the theme provider ( styled-components , store ( Redux , Apollo or others) @ material-ui ), the router ( React Router ). and <App /> component.
  • ./App.js : contains containers for the entire project and <Router /> .
  • ./router.js : includes <Switch /> and <Route /> project.

1.2. ./assets

This folder will contain images, icons, fonts and other media files. But so that this directory does not become a “trash” as the project grows, then this directory will be sorted by context.

An asset file, if used only in a specific container, will be placed in the directory where the name of that container is.

For example, the logo.svg file will be used anywhere in the app so we’ll put it at the root of the ./assets directory. But the avt-default.png file is only used in the container profile so it will be located in the ./assets/profile directory.

This way, we can easily search for duplicate or deprecated asset files and asset files.

1.3. ./components

According to React documentation , to group components we can use two ways: ‘

  • Group by feature or route
  • Group by style (CSS, components, tests, …)

However, with the second method, when the number of components is large, we can face a lot of risks, the files overlap, the changes can affect other files or fix the bug not completely.

For a component to be true, it is necessary to satisfy the following two rules:

  • It should be a Presentational component , which means it doesn’t directly connect to the app state and certainly doesn’t fetch or post data. It can interact with the parent container by triggering functions passed in props .
  • It must be used on container or other components.

Depending on the purpose of the project, the component can be a page or a module of a page.

1.4. ./containers

Files in this directory can:

  • Subsribe store.
  • Trigger side effects, interacting with the store, fetch or post data, …
  • Submit analysis events.
  • Provides state, data, and actions to the component through props.

With this division, we can separate the logic and presentational components of the application.

1.5. ./core

This folder can also be named commons or shared . It contains everything that is reused within the application.

The ./store directory contains store configurations and middlewares. It also contains all reducers , actions , actionTypes , selectors .

There are two ways to organize reducers :

  • is next to the container for which it is primarily used.
  • merge all reducers into one directory. Since the states and actions will be re-used in the project, we should organize the reducer in the first way. This will make it easier to search.

The ./themes folder contains global styles and animations . The shared variables will be stored in the index.js file. (Documentation) .

2. Container Structure

2.1. Root

  • ./index.js : definition and return value of container.
  • ./styled.js : contains the style of the component (used with styled-compent), the components in this file will have the structure <StyledAaa /> .
  • index.test.js : for testing.

2.2. ./components

A container will use its own components . This directory is used to merge sub-components that make up a parent component that is exclusively used in the container itself. Here, <SubComponentB /> can be a child of <SubComponentA/> .

2.3. ./service

The service will perform the task of calling the API of the specific container . Not all containers need ./service because it may already be in the ./core directory.

To make the container as light as possible, ./service is located in the container using this service itself. It is completely possible to include all the services in one directory. However, this can make other developers feel uncomfortable when they don’t know exactly what services the container used.

3. Structure of the React Component

Below is an example of how we can use it to write a component .

When you open up a component , you will immediately know the props that the component will receive from its parent. Next we will initialize the hooks that the component needs to use. As soon as we know the props of the component , we need to pay attention to the globle state and local state that this component receives and uses.

In order of importance, the effect is the part we want to see next to the state so we can see how this component works. Finally, logic. With this code presentation, we will very quickly grasp the purpose of this component for what?

4. Attention

To ensure consistency of your project, you need to keep the following rules in mind:

  • An asset file, if used only in a specific container, will be placed in the directory where the name of that container is.
  • The component must be a Presentational component , which means it doesn’t connect directly to the app state and certainly doesn’t fetch or post data. It can interact with the parent container by triggering functions passed in props .
  • The component must be used on the container or other components.
  • The service will perform the task of calling the API of the specific container . Not all containers need ./service because it may already be in the ./core directory.

5. Summary

There are many approaches when it comes to structuring a React project. With this approach, we help the project scale faster, operate efficiently, allowing for quick maintenance without compromising the quality of the codebase.

So going back to the main question of this article “What should ReactJS projects be structured at a fast scale?” Each project will have a different structure. However, the most important thing is to maintain consistency across the project and team members need to follow exactly the rules the structure sets out.

Also, what should we do to refactor with the project using React – Redux? Please welcome to read in the next section.

Thanks for reading!

References

Share the news now

Source : Viblo