Как правильно структурировать реакт проект?

Всем привет. Не так давно начал изучать React Native, но возник небольшой вопрос по поводу структурирования проекта.

Поначалу я где-то увидел и придерживался подобной схемы: все компоненты разбиты по папкам, в которых так же были файл со стилями для компонента и разного рода зависимости (иконки, картинки и прочее). Но впоследствии это стало не совсем удобно, например, при использовании одних и тех же стилей и классов в разных компонентов, ведь дублировать их не хочется, и тогда стили для компонента будут разбросаны по всему проекту. Или же, например, проблема с логотипом, который находится в директории компонента Header, но впоследствии появляется необходимость использовать его для компонента Footer.

Возможно, есть какое-то оптимальное решение этой проблемы?
  • Вопрос задан
  • 592 просмотра
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
делаете папку shared (или как больше нравится) куда складываете все что нужно использовать в разных компонентах.
Если появляется необходимость что-то куда-то перенести - то это не "проблема", это нормально, берете и переносите, приложение поменялось - структура оптимальная уже другая.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@McBernar
Общее в app/assets, частное в app/components/assets
Ответ написан
Комментировать
alexiusp
@alexiusp
senior frontend developer
я предпочитаю feature-first подход, когда всё относящееся к определённой фиче лежит в отдельной папке. Ситуация описанная вами возникает регулярно, и это тот случай, когда нужно сделать рефакторинг и вынести общую функциональность в некую общую папку, которая будет зависимостью для всех, кто её использует. В этом нет ничего плохого, это общепринятая практика. Главное, чтобы то, что вы выносите в зависимость было самостоятельной сущностью, а не просто одной какой-то переменной или функцией. Логотип - вполне себе отдельная сущность. Набор иконок, анимаций или общих стилевых правил, которыми пользуются другие компоненты - тоже вполне себе отдельная сущность.
В перспективе можно набор общих компонентов вынести в отдельный репозиторий и yarn/npm модуль, но с этим не стоит торопиться.
Другое дело, когда у одной самостоятельной фичи появляется зависимость от другой не связанной с ней прямо фичи - это не всегда хорошо, лучше выносить общий функционал в отдельную фичу, чтобы эти две от неё очевидно зависели.
Ответ написан
Комментировать
mattedev
@mattedev
web developer
Src
-components
--form
---input
---button
---...
--...
-compositions
--header
--footer
--...
-domain
-containers
--auth
---resources
----default.png
---...
--navigator.js
-services
--api
--store
--styles
-config
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы