Структура приложения React — Масштабируемое приложение.

Ищете способ структурировать приложение, которое вы запускаете?
Не смотрите дальше.

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

Итак, обо всем по порядку. Структура, над которой мы будем работать, основана на утиной и фрактальной архитектурах.

Давайте начнем.

Для этого я буду использовать приложение create-react-app.

create-react-app example-project

После инициализации проекта структура проекта может выглядеть так:

Следующим шагом будет устранение беспорядка и переопределение точки входа приложения.
Для этого мы создадим каталог Routes в src/ и добавим необходимые маршруты (учитывая, что вы установили react-router-dom) .

Затем сопоставьте его с src/index.js — это будет точка входа нашего приложения.
Просто следуйте простому утверждению «Один файл, чтобы управлять ими всеми».

Техническое разделение папок

Далее мы создадим каталоги для наших общих и независимых элементов.

1. src/Components
2. src/Utils
3. src/Pages
4. src/Store [если требуется приложению]

Теперь ваш проект должен приобретать форму.

Структурирование подкаталогов

— src/Components
Каталог, в котором будут храниться все общие компоненты, которые станут строительными блоками вашего приложения.
Каждый из компонентов будет иметь входной файл с другими вспомогательными файлами/вложенными файлами. каталоги:

src/Components/ComponentDirectory
├─Readme.md --- Component Documentation
├─index.jsx  —-- Component Entry file
├─Component.styled.js --- component style
└─__test__ --- component testing sub-directory
    ├─ component.mock.js --- component mock data
    └─component.test.js --- component test file

— src/Utils
Каталог, в котором будут храниться все фрагменты вспомогательной логики/кода, которые будут использоваться во всем приложении.

— src/Pages
Каталог, который будет содержать все страницы, которые мы создадим.
Каждая из страниц будет иметь входной файл с другими вспомогательными файлами/подкаталогами:

src/Pages/PageDirectory
├─index.jsx  —-- Component Entry file
├─Container.jsx --- HOC to with all business logics of the page
├─Component.styled.js --- Page styles
├─components --- Page specific components
├─duck --- Page specific ducks
   ├─constants.js --- Page's all static data
   ├─actions.js --- page actions
   ├─reducer.js --- page reducer
   ├─types.js --- all action types
   └─services.js --- page's API services 
└─__test__ --- Pages testing sub-directory (if required)

— src/Store
Каталог, в котором будут храниться все файлы/подкаталоги, связанные с избыточным хранилищем.

src/Store --- Application store
   ├─actions.js --- common actions
   ├─types --- common types
   ├─reducers
      ├─index.js --- root reducer
      ├─reducerName.js --- a common reducer
   ├─types.js --- common action types   
   └─index.js --- store config and entry file

Кроме того, мне нравится иметь импорт в абсолютном формате в качестве соглашения, или они могут быть относительными, если хотите.
Для абсолютного добавления файла jsconfig.json в корень вашего приложения выполните следующее:

{
   "compilerOptions": {
   "baseUrl": "./src"
   }
}

TL;DR

Хорошо, после всего этого наша окончательная структура приложения будет выглядеть примерно так:

Ура… Теперь у вас есть структура, которую можно масштабировать в любом направлении без необходимости рефакторинга адского кода.

Это всего лишь один из многих других способов, которые можно использовать для разработки реагирующего приложения.

Есть вопросы? Оставьте отзыв, я обязательно свяжусь с вами там.

Почетные упоминания