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…