Один#React-компонент - один файл. Помещаем все#React-компонент в папку components. Хорошие компоненты - независимые компоненты.

Файлы компонента удобно хранить в отдельной папке. Кроме JS и CSS у компонента могут быть файлы с#unit-test и другими ресурсами Если в папке есть файл index.js , то он импортируется по-умолчанию.

Есть ли рекомендации по структуре React-проектов? §

Единого мнения не существует. Однако, есть несколько популярных подходов, которые вы можете рассмотреть.

1 Группировка по функциональности или маршруту §

Один из популярных подходов — это размещение файлов CSS, JS и тестов в папках, сгруппированных по функциональности или маршруту.

common / Avatar.js;
Avatar.css;
APIUtils.js;
APIUtils.test.js;
feed / index.js;
Feed.js;
Feed.css;
FeedStory.js;
FeedStory.test.js;
FeedAPI.js;
profile / index.js;
Profile.js;
ProfileHeader.js;
ProfileHeader.css;
ProfileAPI.js;

Понятие «функциональность» не является универсальным, поэтому выбор уровня детализации остаётся за вами. Если у вас не получается составить список папок верхнего уровня, вы можете спросить у пользователей вашего продукта, из каких основных частей он состоит, и взять модель мышления пользователей за образец.

2 Группировка по типу файла §

Другим популярным способом структурирования проектов является группировка похожих файлов, например:

api / APIUtils.js;
APIUtils.test.js;
ProfileAPI.js;
UserAPI.js;
components / Avatar.js;
Avatar.css;
Feed.js;
Feed.css;
FeedStory.js;
FeedStory.test.js;
Profile.js;
ProfileHeader.js;
ProfileHeader.css;

Некоторые предпочитают идти ещё дальше и размещать компоненты в различные папки в зависимости от их роли в приложении. К примеру, методология разработки Atomic Design построена на этом принципе. Помните, что данные методологии следует рассматривать как полезные примеры, а не как строгие правила.

Избегайте чрезмерной вложенности §

Проблем, связанных с чрезмерной вложенностью папок в JavaScript-проектах, может возникнуть достаточно много. Одна из них — это сложность контроля относительных импортов или обновления этих импортов при перемещении файлов. Если у вас нет веских оснований использовать глубокую вложенность папок, подумайте о том, чтобы ограничить себя максимум тремя или четырьмя уровнями вложенности в рамках одного проекта. Разумеется, это всего лишь рекомендация и она может быть не актуальна в случае вашего проекта.

Не переусердствуйте §

Если вы только начинаете проект, не тратьте более 5 минут на выбор структуры проекта. Выберите любой из перечисленных выше подходов (или придумайте свой собственный) и начните писать код! Есть большая вероятность, что вы вернётесь к переосмыслению структуры проекта после написания некоторого количества кода.

Если вы чувствуете что окончательно застряли, начинайте с одной папки. Со временем, когда она станет настолько большой, что вам захочется отделить некоторые файлы от остальных, у вас будет достаточно знаний, чтобы определить, какие файлы вы редактируете чаще всего. Как правило, файлы, которые часто меняются вместе, следует держать ближе друг к другу. Этот принцип называется «совместное размещение».

На практике проекты часто используют сочетание нескольких вышеупомянутых подходов. Поэтому выбор «правильного» подхода в самом начале проекта не слишком важен.