React/Reduct Структура директорий компонентов, как их располагать в папках

Главная идея

Основные мысли:

1. Держать в отдельной директории универсальные компоненты, которые переиспользуются или могут быть переиспользованы в будущем и не завязаны на редакс разделить компоненты, не завязаны на Redux
2. В директории бизнес-компонентов, на первом уровне должны быть только те элементы, которые упомянуты в основном ReactRouter.
3. Рядом с бизнес-компонентом могут быть поддиректории с его зависимостями (где лежат те компоненты, для которых он выполняет import, но они при этом не рассматриваются как универсальные), как сами по себе, так и внутри директории includes/ или ее эквивалента

+ в целом во всех поддиректориях бизнес-компонентов, страться не держать слишком много элементов на одном уровне.

Подробности ниже.

Для начала приведем примерную схему диретокрий и файлов приложения:

.
.
├── node_modules
├── src/
│   ├── app/
│   │   ├── components/ // директория компонентов
│   │   └── index.ts // список основных машрутов (ReactRouter)
│   ├── helpers/
│   ├── constants/
│   ├── otherInSrc/
│   └── index.ts // точка входа
└── packase.json

Далее рассмотрим именно структуру папки components/, которая содержит все (условно) компоненты реакт, относящиеся к нашему приложению.

Структура директории components/

Идея следующая:
.

├── components/
│   ├── universal/ // универсальные, без привязки к Redux
│   ├── includes/  // зав. от Redux, для import-а на текущем уровне или ниже 
│   └── pages/     // элементы из "Основной ReactRouter"/
│       ├── main/
│       ├── article/
│       └── about/
└── index.ts // Основной ReactRouter

-- т.е.:

• В components/ на первом уровне есть три директории (кроме index.ts, где используется ReactRouter):
  1. universal/ -- универскальные компоненты, которые можно переиспользовать по всему приложению (напр. стилизованные инпуты и т.д.)
  2. includes/ -- диретория для блоков, завязанных на бизнес логику и состояние приложения (на Redux), т.е. тут используются селекторы и/или диспетчеризируется что-то в хранилище.

├── main/
├── article/
└── about/

Компоненты-страницы (pages/), могут делать import:

1. Из components/universal/
2. Из components/includes/
3. Из собственной директории includes/ или директорий includes/ других уровней

Таким образом, более подробно структара директорий страниц может быть предствлена как-то так:

components
  universal/ 
  includes/  
  pages/    
    main/ 
     includes/
     index.ts // <Main/>
    article/
      includes/
      index.ts // <Article/>
    about/
      includes/
      index.ts // <About/>
index.ts // Основной ReactRouter

Альтернатива includes/

Вместо имени "includes"(как на этом уровне, так и ниже по дереву):

• мы можем использовать любое другое объединяющее имя, подходящее по смыслу в данной директории, напр. common/ или containers/
• использовать сразу же на этом уровне несколько поддиректорий для включаемых компонентов, не объединяя их в общую папку ( с названием inculdes или иным, см. пред. пункт)

-- с учетом этого замечания приложение может иметь вид:

components
  universal/ 
  containers/ // containers вместо includes, внутри компоненты <PrivateRouter/> <CommonRouter/> 
  pages/    
    main/ 
     includes/   // просто includes
     index.ts //  компонент <Main/>
    article/
      common/   // common вместо includes
      index.ts //  компонент <Article/>
    about/      // about будет без объекдиняющей includes/
      contacts/  // внутри компонент <ContactsList/>
      mapBlock/  // внутри компонент <ContactsMap/>
      index.ts // компонент <About/>
index.ts // Основной ReactRouter