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

Saurabh Shah
Geek Culture
Published in
24 min readAug 23, 2020

--

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…

--

--

Saurabh Shah
Geek Culture

Solutions architect in IT organization. Experience on wide range of solutions for web and mobile apps with cloud integration.