Split React website in separate modules and load as npm dependency in one package

Question

I am working on a react website which has few separate sections for ex. contact management, message management, etc. All these sections are quite big. The navigation to these sections is controlled from a single dashboard. As we have separate teams working on each team sections, we want to deconstruct the app into individual modules which will contain each part of the website. I haven't done this before, but I want to load these modules as npm dependency into the main app which will handle navigation between each module. I am trying to this to segregate the work and anyone introducing any changes that might break other sections. Sorry for being a bit vague, but your help will be really appreciated.

Answer 1

This is easily done.

Each individual npm package (for example module1 ) will depend on react (but not react-dom ), and contain a number of files export ing React components.

Then the main dashboard would list each package under dependencies (as well as react-dom and react ) and can import and render the components, for example import {ContactManager} from 'module1' .

Each module can in turn import common stuff from the dashboard or a separate common package.