Как я инициализирую проект на React и создаю его структуру?

На текущей работе мы пишем приложение на React с нуля. У меня стоит задача инициализировать проект, сделать начальную конфигурацию, организовать структуру и т.п.

Так вот, очень часто у меня возникал вопрос, как же организовать структуру проекта так, чтобы ее придерживались все разработчики приложения, и чтобы эта структура была понятной и поддерживаемой в будущем.

Обычно, я делал папки core, components, common и т.д. в корне (в src) проекта. И когда стояла задача добавить, например, вспомогательную функцию (helper) в проект, то я думал: "ну добавлю эту функцию, наверное, в common". А если нужно добавить новую фичу? Тогда добавляем ее в components, делаем кучу вложенных компонент, зависимых между собой, прикручиваем ко всему этому глобальное состояние. И таким образом увеличиваем проект и строим все больше и больше зависимостей между компонентами, модулями.

Так вот, по описанию можно понять, что это все не очень хорошо. Мне порекомендовали методологию Feature Sliced Design (FSD) для решения таких проблем. FSD описывает свод правил и соглашений по организации кода. Главная цель данной методологии — сделать проект понятным и структурированным.

Сейчас я в процессе инициализации проекта при помощи FSD. Пока что методология меня радует, так как помогает структурировать наш код и ограничить нас в некоторых моментах, чтобы выполнялся шаблон Low Coupling & High Cohesion (слабая зацепленность и сильная связность).

Пока проект не стартовал, и я не смог протестировать методологию в работе с командой и при добавлении новых фич в приложение. Буду смотреть, как все будет развиваться с применением FSD. В процессе буду отписывать сюда по результатам 😉