React: Scalable Code architecture

When we start any project from scratch, we need to make sure that our code architecture is scalable and code reusability is high.

In react, we have flexibility to architect our code base structure according our project need. Here, We can consider this example as a generic example how you can structure your code and scale it any time in future. Scalable code architecture also help multiple teams to easily contribute on your app.

Application root structure:

We can keep our code base clean and structure. So, it also help in smooth on-boarding new teams. We always make sure that our code looks structured and scalable, code reusability is high and code quality is maintained.

We can structure out root of application like this:

Our main code will reside in src folder. Other root files and folders are basically supportive role in developing, running, testing, building and deployment of our code.

Initialize source code structure:

It is important to structure your src folder for scalable code architecture, so multiple teams can easily contribute and scale app accordingly.

Maintaining core app structure:

Here we maintain core app structure-

Components: We keep our reusable components here and use these throughout the app.

Scenes: We keep our routes in one place and where we use containers needed for that route.

Containers: Container components are responsible for calling APIs and data passing data to the components.

Layouts: We generally keep our main layout here. e.g: Header, Footer, 2-column-layout etc.

Custom HOC: There are Higher Order Components using which we can easily tweak functionality in future.

Utils: We keep our utilities here and reuse it through out the app.

Managing assets:

Here we can have assets like fonts, images, icons etc.

Define app styles in scalable way:

We can maintain our styling folder structure like below, so it is easy to maintain SCSS code in large application. We can breakdown these SCSS files like:

Conclusion:

While building a new project, setting up base code architecture is never easy task. We work hard and sometime we end up wasting lot of time in future because of a bad code architecture. So, it is important for us to spent some time in setting up base code architecture in scalable manner. Good scalable code architecture is gonna payoff in future.

Thanks for reading :)

If you find it helpful, please follow for more technical articles. :)