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…