loading...
Cover image for Best Scalable React App Architecture 2020

Best Scalable React App Architecture 2020

gkhan205 profile image Ghazi Khan Originally published at codewithghazi.com ・1 min read

Big and extensive ReactJS application should have a well planned and organized project structure.

I will show you how I built a Best Scalable Architecture for ReactJS Applications. First, have a look at my directory structure then I will explain every bit I did or used in creating this architecture.

Alt Text

Click here to read full article

I have used this architecture in 5+ projects of mine and have been continuously enhancing this to date and will continue to do so in the future. I have created a Pre-configured React Starter Kit which is like plug and play for your new projects, everything is configured so you just have to take care of the development. Check on Github and don’t forget to give STAR to the repo.

GitHub logo gkhan205 / cwg-react-starter

Pre-configured and Ready to use React Starter App. To save time in settings things up for new project. Almost everything needed is already configured. Just clone and start developing without wasting time in doing same stuffs for every project. (#codewithghazi)

CWG React Starter

Pre-configured and Ready to use React Starter App. To save time in settings things up for new project. Almost everything needed is already configured. Just clone and start developing without wasting time in doing same stuffs for every project

Read detailed explanation here

Overview

Things included in this starter app

  • Folder Structure
  • Axios Interceptor
  • Redux with Redux-Thunk
  • Router with Private Route
  • Confugured for SCSS/SASS
  • Eslint & Prettier
  • Pre-commit Hook
  • Absolute Imports

Please follow this import style for better code readability

Folder Structure

Big and extensive React application should have well planned and organized project structure. Best way is to use a mix of strategies to achieve better results as I am going to describe next.

Top level project architecture (which is under src/ folder) should be organized by type. No files should be here, just folders. This way it will be clear and understandable. Similar to a…

Discussion

pic
Editor guide
Collapse
perry profile image
Perry Janssen

Thanks for sharing! Although, it would've been nice if you could explain why this works best for you and how you've got there :) Others will have different needs. Maybe your journey to finding out this architecture can help others finding theirs.

Collapse
jivkojelev91 profile image
JivkoJelev91

I like it.

Collapse
gkhan205 profile image
Ghazi Khan Author

Thank you. I'm glad you liked it.

Collapse
stlnick profile image
Nick

There’s so much freedom with React it can be overwhelming on how to logically structure a project, especially once it gets larger.

This is great and I’ll definitely be giving this a go!

Collapse
gkhan205 profile image
Ghazi Khan Author

Thanks, Nick,

Yes in react there is a lot of freedom and I have seen many projects structured not in a good manner which is not very easy to scale the app with those. Even I made such mistakes in my earlier days with React. But with time I enhance this architecture and I found it very handy when it comes to scale app and increase maintainability.

Collapse
piotrlewandowski profile image
Piotr Lewandowski

One of the most important things to remember about React: there is no "best React architecture"

Collapse
gkhan205 profile image
Ghazi Khan Author

Yes, I fully agree with this. I used this title (Best Scalable Architecture) for 2 major reasons.

  1. I found this architecture as best for my use. I have tried different patterns and styles but this was the best among them all.
  2. Catch the eye of developers in this huge sea of posts flowing every minute.
Collapse
piotrlewandowski profile image
Piotr Lewandowski

You need to think how others will read your article: people might think that the architecture you propose is the best for every use case. It isn't. This architecture, like you said is best for you, for that specific project at the specific time. Once your project grow substantially it might not be good anymore.

As per "Catch the eye of developers in this huge sea of posts flowing every minute" - so you went like "title is misleading, but it works!"? Bad idea.

Also: you named one of your folder axios - the moment you change the axios client to something else you need to rename the folder as well (assuming you'll remember to do so). It's better to name your folder with names that describe functionality (e.g. api or api-client or similar) rather then library you use at that specific moment...

Thread Thread
gkhan205 profile image
Ghazi Khan Author

Sure. Thanks for the suggestions, I will update the folder name :). And yes as I mentioned this architecture has proved to be my best because I have used this in more than 5 projects and found it very easy to scale the application. As the application grew I haven't had any issue in adding more functionalities.

Regarding the title: I didn't mean that the Title is misleading, This architecture has proved to be my best. (While thinking for post title I thought it this way only. {It was best for me and scalable so I kept the title Best Scalable React App Architecture and 2020 added with keeping SEO in mind}) As you already have mentioned in your first comment there is nothing like best react architecture. We are free to use any pattern and style and using this style I felt this is best for me and I shared it with others too.

Collapse
andreimelo profile image
Andrei Melo

Good structure, nice and neat! would probably use this structure for my future project!

Collapse
gkhan205 profile image
Ghazi Khan Author

I'm glad you liked the structure. I would be really happy if you use it.

Collapse
srikanth597 profile image
srikanth597

Nice , I would like to use complete Typescript startup pack similar to this structure if you have any.

Collapse
gkhan205 profile image
Ghazi Khan Author

Yes I'll create a typescript version shortly.