Folder Structure For React / React Native

How to structure your react project for better scalability & maintainability

Structuring Your Project Is Like Playing Jenga :P

Introduction

It’s been three months since i started working with React Native, and before that i had been working with React for over a year. I remember when i was starting out with my first React Native project that i didn’t want to repeat the same mistakes i did with my previous React project.

The previous project was not following a strict folder structure from the get-go and when one team member took some decision regarding the folder structure, the rest of the team was not informed. This lead to chaos and rewrites that could have been easily avoided.

This article summarises why a properly defined folder structure is very important, especially for React / React Native projects and then we will discuss the folder structure that i personally have been following for the past 3 months.

What Importance Does A Good Folder Structure Hold For Your Project?

When you start working with large-scale projects, which usually has multiple programmers working on it, you can easily lose track of code written by you or by your team member as the project scales with time. This is especially true for React based projects where we can all agree that the number of lines in the codebase increases at an alarming rate everyday depending on your team size and workload. In such an environment, one should especially give importance to code maintainability.

Code that should have been a screen/container becomes a component and vice-versa. This leads to bad design and confusion later on as to what should be what, when it should have been clear from the very start.

Business logic gets mixed with UI logic which is really bad. You might not realise when you first start your project how important it is to keep those two separate because as the project scales UI logic can easily take hundreds of lines of code in a file and we can say the same for business logic. Would you like it if i told you to make a change in a file that spans over a thousand line of code and doesn’t even have a clear distinction between business and UI logic? Exactly.

I can go on and on about why a good folder structure is important but lets stop here and move onto the next part of the article.

Folder Structure

MY-APP
├── envs
├── scripts
└── src
    ├── services
    ├── state
    ├── utils
    └── views 

Environments

If you are planning to run your project in different environments i.e. debug , staging and production . You would need a place to store your different .env files and that is what the envs folder is used for.

envs
├── .env.debug
├── .env.staging
└── .env.release

Scripts

We run some pre-commit scripts on every commit and store those scripts in scripts folder.

Services

This is where we store the classes that handle our API calls, error reporting and wrappers for third party services like moment.js , uxcam, axios etc.

services
├── api
├── http
├── sentry
...

State

This is where we store all our business logic i.e. validations, api requests, what happens on a button click, etc.

We are using Redux and Redux-Sagas in our project and handle business logic using them. This helps us keep our view and business logic separate and helps us avoid clutter as the project scales. You don’t want to write asynchronous code in the same file as your React code, believe me.

state
├── ducks
│   ├── Feature/Screen
│   │   ├── actions.js
│   │   ├── constants.js
│   │   ├── reducer.js
│   │   ├── sagas.js
│   │   ├── selectors.js
│   │   └── types.js
│   │   
│   │
│   ...
│
├── rootReducer.js
├── rootSaga.js
└── store.js

If you noticed, we are using a folder structure inspired from re-ducks folder structure, which we personally like very much!

Views

This is where we store our UI logic i.e. our components, screens, hocs, custom hooks, etc.

views
├── assets
│   ├── animations
│   ├── fonts
│   └── images
│
├── components
├── hocs
├── screens
├── hooks
└── configs
    ├── colors.js
    ├── spacings.js
    ├── styles.js
    └── typography.js

In configs , we store what colors, font families, global stylesheets, values of medium/large/etc. spacings, base font size, etc. we are using throughout our project. Its a good practice to keep all these configurations in one place and reference them from there only.

Wrapping Up

I hope you learned something from this article and figured how to structure your brand new or existing React project.

I wish i could have gone much deeper into every part of this article but then we would have strayed from the original purpose of it.

This was my first attempt at an article and a way of expressing thanks to the medium and open-source community for helping me figure things out whenever i was in a pinch!

If you want me to write more articles on React / React Native. Do ping me, i would be happy to contribute more to this wonderful community :)

If you found this article helpful, don’t forget to share and clap! 👏