Минутка оправданий: 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
в dependencies добавляем, то что далее импортится, подключается в проекте в папке source.
в devDependencies добавляем различные транспиляторы, библиотеки для тестов, вебпак и т.п.
Для нейминга имен функций используем pascalCase,
function someFunction()Для нейминга файлов с фукнциями kebab-case, format-date.js
Нейминг компонентов и файлов/папок компонентов CamelCase, ComponentName
Для удобства отображения имен компонентов в открытых вкладках редактора кода. Если компоненту нужна папка, то создается ComponentName/index.js в котором
export { default } import './Component';И создается jsx файл ComponentName/ComponentName.jsx в котором и разрабатывается компонент
Различные токены/ключи для апи стороних сервисов должны быть в Enviroment variables