REACT SPA structure

The rules

These are rules I use in my apps (mostly management software)
1) use as few libraries as possible
2) the VIEW must not contain code
3) use the STORE as CONTROLLER and possibly separate them from the BUSINESS LOGIC
4) the client must also work offline (mock)
5) of course: test

Technologies

We choose REACT.
I don't like REACT but, in my opinion, it's the best choice today.
Therefore:

• CRA: God Facebook says: there is no need to think about it
• use the STORE: on how to use them (in my opinion) I wrote this article
• material-ui: is the most used: many "use cases" and documentation
• react-router-dom: this is also used a lot ... you need a router!
• cypress: you don't have to go crazy to create the test environment and it's absolutely "realistic". It works for any framework - it's worth learning
• i18n: sooner or later it serves and in any case centralized texts are a good idea
• (optional) mswjs: facilitates mocks to work even offline: rule 4

Basic implementation

on sandbox:

What you will find:

material-ui (material components)
It is a bit cumbersome for some things, for example the management of the Drawer.
But it is great for many others, for example managing styles and themes.

STORE centralize app status link article
codesandbox
In the example only the storeLayout is defined.
It keeps, for example, the status of the Drawer, side menu and the title of the ToolBar

ROUTING on the client with react-router-dom
codesandbox
Intuitive and use hooks.
I personally find the documentation a bit confusing.

What you will not find:

• centralized component focus management in the STORE
• dynamic change of the interface theme
• handling of rendering errors (Error Boundaries)
• mock (mswjs)
• message box (you can't do without it!)
• component validation (mandatory fields, password confirmation, etc etc ...)
• route change validation (Preventing Transitions)
• internationalization (i18n)
• cypress test
• separation of BUSINESS LOGIC from STORE

Which will be the next topics.
The idea is to grow this DEMO in order to create a complete APP

(Forgive my bad English)