React JS— Architecture + Features + Folder structure + Design Pattern

Complete corporate standard React JS boilerplate

Last updated on Nov 04, 2021.
Trying my best to keep the story up-to-date. (react-v17.0.2, MUI-v5.0)
Git repo: SAURABH SHAH / ReactJS myapp · GitLab (wip)
Code-sandbox live (playgroud embeded at bottom)
If you like the story, buy me a coffee!

fig-1. ReactJS app architecture modules

This story will cover all the aspects of a react js web app architecture. If you are creating a new responsive web application using react JS, then follow along.
Our app architecture includes various features. A quick list of few aspects that we will cover is as per fig-1 above and fig-2 below.

Agenda of this story to create a robust and scalable web app from scratch using ReactJS:

✓ Create a new web application using react js framework.
✓ Cover all the dependencies used by a react js application
✓ Reasoning behind each dependency
✓ Dependency integration and configurations
✓ App integration steps for each dependency, if any.

This app architecture will possess all the below features with few bonus implementations on the go:

1. App title + Favicon
2. Material UI
3. Router (navigation)
4. Backend — Data connectivity (AXIOS for REST API, Firebase SDK integration)
5. Redux + Thunk
   ↪ Redux vs Context API
   ↪ Redux toolkit & Redux persist
6. Multi-environment setup (create deployable builds pointing to specific Database environments using environment variables, without having all environment config bundled in code.)
7. Internationalization
8. Unit testing.
9. Deployment and hosting (Firebase hosting)
10. ES Lint
11. Design Pattern (Container-View)
12. CI/CD for continuous integration.

The story is divided into 3 sections:

Section-1 ENVIRONMENT SETUP

Section-2 FOLDER STRUCTURE

Section-3 ARCHITECTURE — DEVELOP / ADD FEATURES