Как организовать структуру команентов?

Question

[MRcracker]

В проекте есть три страницы. На них должен быть расположен один и тот же слайдер, но с разным контентом. Контент будет браться из системы управления. Подскажите, как правильно организовать структуру компонентов?

Правильно ли будет сделать папку для общих компонентов и в ней разместить компонент со слайдером, а вместо контента слайдера использовать свойство children и потом и эту карточку использовать на страницах где должен быть слайдер и на каждой странице делать запрос данных с сервера? или может быть есть какой-то более простой способ

Answer 1

[Astral100498]

├── src/ # корень
│ ├── apps/ # приложения (вьюхи, страницы — синонимы)
│ │ ├── app1/
│ │ │ ├── components/ # ⚛️-компоненты из app1 и только из него
│ │ │ ├── const/ # аналогично, константы
│ │ │ ├── contexts/ # ⚛️-контексты
│ │ │ ├── hooks/ # ⚛️-хуки
│ │ │ ├── interfaces/ # интерфейсы из app1 и только из него
│ │ │ ├── types/ # типы из app1 и только из него
│ │ │ ├── models/ # сторы-модели из app1 и только из него
│ │ │ ├── viewmodels/ # сторы-view-модели из app1 и только из него
│ │ │ ├── services/ # сервисы, специфичные для приложения app1 (api-сервисы лучше всегда класть в общий уровень)
│ │ │ ├── helpers/ # модули-хелперы, прим.: преобразователи дат, строк и т.п.
│ │ ├── ...
│ │ ├── appN/
│ │ │ ├── ... # аналогично app1
│ │
│ ├── components/ # общие ⚛️-компоненты для 2+ приложений
│ ├── const/ # общие константы для 2+ приложений
│ ├── contexts/ # аналогично общие ⚛️-контексты
│ ├── hooks/ # общие ⚛️-хуки
│ ├── interfaces/ # общие для 2+ приложений интерфейсы
│ ├── types/ # общие для 2+ приложений типы
│ ├── models/ # сторы-модели, общие для 2+ приложений
│ ├── viewmodels/ # сторы-view-модели, общие для 2+ приложений
│ ├── services/ # сервисы, общие для 2+ приложений (например API-сервисы или синглтоны)
│ ├── utils/ # модули-хелперы, прим.: преобразователи дат, строк и т.п., общие для 2+ приложений
│ ├── store/ # Для работы с redux
│ ├── pages/ # То что передаем в роутер