Тестовое задание для Volt

Минутка оправданий: MobX в этом приложении не нужен. Был добален просто для демонстрации. Здесь используется, только показа Loading при переходе между роутами

Для запуска приложения в консоли, находясь в папке приложения, выполнить команды

yarn
yarn start

или

npm install
npm run start

Далее открываем в браузере ссылку http://localhost:8000

Структура проекта

Директории

source/utils - функции утилиты. алиас @utils source/api - api функции. алиас @api source/components - алиаса нет. состоит из компонента приложения Application, НОС для HOC компонентов - алиас @HOC, UI для UI компонентов - алиас @UI source/views - страницы и разделы сайта. алиас @views source/services - служебные функции. алиас @services

Структура страниц и разделов

Немного о структуре views. В ней содержатся страницы и разделы.

К примеру, мы имеем страницу Account, которая не содержит подразделы. то создается папка @views/Account с компонентом страницы. Все компоненты этой страницы лежат в папку @views/Account/components

Если мы имеем раздел Estates, со страницами List, Form, Show, то структура будет следующая @views/Estates/views/List, @views/Estates/views/Form, @views/Estates/views/Show.

Роуты лежат в routes.js, основной лежит в @views, в котором подключаются роуты разделов со страницами. К примеру, роуты раздела Estates подключаются из @views/Estates/routes.js

Если разделу необходимы сторы, то они должны лежать в папке stores раздела. Пример, @views/Estates/stores/* Сторы относящиеся ко всему приложению, лежат в source/components/Application/components/Layout/stores

Компоненты должны лежать в папке components, если компоненты используются только на странице, то папка находится в папке страницы @views/Estates/views/List/components/*, если компоненты используются всем разделом, то в @views/Estates/components/* Если всем приложением, то в source/components/*

Документация

Если к компоненту, функции есть документация, то в папке с ним создается README.md

project.json

в dependencies добавляем, то что далее импортится, подключается в проекте в папке source. в devDependencies добавляем различные транспиляторы, библиотеки для тестов, вебпак и т.п.

Нейминг кэйс

Для нейминга имен функций используем pascalCase,

function someFunction()

Для нейминга файлов с фукнциями kebab-case, format-date.js

Нейминг компонентов и файлов/папок компонентов CamelCase, ComponentName

Для удобства отображения имен компонентов в открытых вкладках редактора кода. Если компоненту нужна папка, то создается ComponentName/index.js в котором

export { default } import './Component';

И создается jsx файл ComponentName/ComponentName.jsx в котором и разрабатывается компонент

.env

Различные токены/ключи для апи стороних сервисов должны быть в Enviroment variables