I am in the phase of planning a React web app, and can't decide on a correct architecture. My React app will contain a few features, such as:
At the beginning of the project, it will all be under 1 React app, but later (unknown time), I will have to split every "system" to another app.
I would like to avoid duplicate code, and make every "system" independent of the other, so I can later split it with ease, and minimal refactoring.
It will be built on the Microsoft Teams infrastructure, as a single tab application, and later I will have to deploy it as 1 system per tab, each tab can be rendered as a React component, this is the reason for that and this is a must.
There is no definite way to solve this. The best approach is to just make components as modular as possible. If possible use typescript as it makes life less difficult later on.
Maybe take look at Nx. It is a great framework to generate sub-libraries and sub-applications in your frontend code and thus modularize your code. There might be similar other libraries out there. I used Nx to create a mobile and desktop app, reusing some logic and some components but not all of it. Furthermore you can constraint access between your libraries.
They also provide you with a guide on best-practices to make sure your application stays modular.
Just saying "Well just use components, duh", is imho not enough.