Как вы организовываете folder structure в medium-to-large size react приложении?

Question

[Islam Ibakaev]

Чем больше разрастается приложение, тем очевиднее становится осознание того, что дефолтной структуры папок, примерно той, что выдаёт create-react-app уже недостаточно.

/src
/src/components
/src/containers
/src/actions
/src/reducers
/src/selectors
/src/types

Поделитесь структурой папок, которая легко подстраивается под всё разрастающееся приложение

Answer 1

[Максим]

Какая-то тенденция, возможно.. Хочется как-то все "улучшить", вместо "просто писать, пока не будет проблемы". С чем, конкретно, вы столкнулись, что пришло осознание такое?

Мне кажется, может где-то в проекте и есть неудобства, но я их не ощущаю. Появилась папка helpers, куда я выношу функции, которые используются в разных других файлах, все остальное осталось так же как и было изначально (в проекте уже 1200+ коммитов, много компонентов/контейнеров).

p.s. папка locales - там файл перевода, в routes и store - по одному конфиг.файлу.

Comments

[Islam Ibakaev]

1. есть компоненты, которые появятся только на определённой страницы
2. есть компоненты, котороые появятся на нескольких страницах(или на всех, типа Button)
3. есть компоненты типа "лейаутовые"(Header, Footer), которые появятся на всех страницах, однако логически их нельзя поместить в одну папку с теми, что из 2 пункта.
4. есть компоненты, которые принадлежат только компоненту, который находится внутри только определённой страницы.

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

[Максим]

Islam Ibakaev: проект показать не могу, но видимо вам это и не очень подойдет, так как я просто не выделяю как-то особенно. То есть 1,2,3,4 - для меня это все "компоненты", иногда я их бросаю в одну папку, если они как-бы "внутренние" по отношению к index.js из этой папки. Тот же Header - у меня просто компонент, и лежит на том же уровне, что и RangePicker какой-нибудь, или Preloader...

Answer 2

[Frozen Coder]

Разбиваю на папки по как-бы модулям - по разделам приложения. В каждой такой папке уже есть подпапки с actions, components, constants, reducers и проч. У каждого такого модуля есть свой компонент роутера, а редьюсеры собираются в один. Компонеты-роутеры потом собираются в компоненте роутера верхнего уровня, аналогично и для редьюсеров. Таким образом разделы приложения получаются слабо связаны друг с другом. CRA никак же не ограничивает в структуре папок в src.

Comments

[Islam Ibakaev]

можете показать пример(на гитхабе?)

[Frozen Coder]

Islam Ibakaev: увы, примера нет. На реакте пишу только на работе и только полгода, на гитхабе не обзавелся пока что. Могу идею на пальцах объяснить.
Любой проект как-то делится логически или по разделам. Например, админка, справочники, о товаре, документация и т. п. от конкретного проекта зависит. Так и делим по т.н. модулям, по папкам. Внутри этих папок структура похожая на структуру у Максим в ответе.
Через combineReducers объединяем редьюсеры одного модуля в один, который экспортируем. Роутер v4 позволяет разнести роутинг по разным компонентам, чем и пользуемся - в каждом модуле есть свой компонент-роутер, который отвечает за роутинг внутри модуля. Потом все эти роутеры модулей входят в другой главный (Root) компонент-роутер. Редьюсеры модулей также через combineReducers объединяются в RootReducer. Вне всех этих папок модулей лежат RootRouter, RootReducer, index.js и компонент App.