How to organize the structure of the components?

Question

React

The project has three pages. They should have the same slider, but with different content. Content will be taken from the management system. Tell me how to properly organize the structure of the components?

Would it be correct to make a folder for common components and place a component with a slider in it, and use the children property instead of the content of the slider and then use this card on the pages where the slider should be and on each page make a request for data from the server? or maybe there is some simpler way

Answer 1

├── src/ # root
│ ├── apps/ # applications (views, pages are synonyms)
│ │ ├── app1/
│ │ │ ├── components/ # ⚛️-components from app1 and only from it
│ │ │ ├── const/ # similarly, constants
│ │ │ ├── contexts/ # ⚛️-contexts
│ │ │ ├── hooks/ # ⚛️-hooks
│ │ │ ├── interfaces/ # interfaces from app1 and only from it
│ │ │ ├── types/ # types from app1 and only from it
│ │ │ ├── models/ # store-models from app1 and only from it
│ │ │ ├── viewmodels/ # store-view-models from app1 and only from it
│ │ │ ├── services/ # services specific to the app1 application (api services are always better to put in the general level)
│ │ │ ├── helpers/ # helper modules, eg: date converters, string converters, etc. .
│ │ ├── ...
│ │ ├── appN/
│ │ │ ├── ... # similar to app1
│ │
│ ├── components/ # common ⚛️-components for 2+ applications
│ ├── const/ # common constants for 2+ applications
│ ├── contexts/ # similarly common ⚛️-contexts
│ ├── hooks/ # common ⚛️-hooks
│ ├── interfaces/ # common interfaces for 2+ applications
│ ├── types/ # types common to 2+ applications
│ ├── models/ # store-models common to 2+ applications
│ ├── viewmodels/ # viewmodel stores shared by 2+ applications
│ ├── services/ # services shared by 2+ applications (e.g. API services or singletons)
│ ├── utils/ # helper modules , note: date converters, strings, etc., common for 2+ applications
│ ├── store/ # For working with redux
│ ├── pages/ # What we pass to the router