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!
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:
- App title + Favicon
- Material UI
- Router (navigation)
- Backend — Data connectivity (AXIOS for REST API, Firebase SDK integration)
- Redux + Thunk
↪ Redux vs Context API
↪ Redux toolkit & Redux persist
- Multi-environment setup (create deployable builds pointing to specific Database environments using environment variables, without having all environment config bundled in code.)
- Unit testing.
- Deployment and hosting (Firebase hosting)
- ES Lint
- Design Pattern (Container-View)
- 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