regulyarniy/dashboard

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

Не пытайтесь запустить проект, он не заработает, не хватает некоторых внутренних зависимостей, этот репозиторий выложен для демонстрации.

Установка зависимостей

Выполнить npm ci или npm install в директории ui/.

npm ci предпочтительней, если не требуется изменение зависимостей, т.к. не вносит изменения в package-lock.json

Для установки зависимостей и сборки необходим node.js не ниже 10 версии и npm, который обычно поставляется вместе с node.js: https://nodejs.org/en/download/

Скрипты npm для запуска

• npm run build - сборка для разработки
• npm run build - сборка для деплоя
• npm run hot - поднимает сервер с отслеживанием файлов и горячей заменой модулей для разработки. На лету перезагружаются все модули приложения, кроме html и стора. При изменениях в этих частях необходимо выполнить перезагрузку страницы вручную. Для горячей замены в компонентах React используется React Hot Loader. Подробнее - документация webpack по горячей замене модулей
• npm run watch - поднимает сервер с перезагрузкой страницы по любому изменению файлов. Редко используется, но полезно например при разработке виджета, обернутого в вебкомпонент, или иных случаях, когда требуется полностью переинициализовать приложение
• npm run lint - запуск проверки линтов и форматирования
• npm run test - запуск тестов

Основные технологии

• React+ReactDOM - основной фреймворк
• Redux+Redux Toolkit - управление состоянием
• Redux Saga - управление асинхронными событиями
• React Pose - анимации
• Reach Router - роутинг
• prop-types - проверка и типизация пропсов компонентов
• Reakit - обертки над базовыми компонентами для доступности
• classnames, react-sizes - утилиты
• styled-components, react-modal, axios, @eaist/* - пакеты для работоспособности общих компонентов ЕАИСТ

Инструменты

• Webpack - сборка
• React Hot Loader - горячая замена модулей React
• react-svg-loader - импорт инлайн-svg как компоненты
• PostCSS - процессор для CSS
• CSS Modules - изоляция CSS
• ESLint - линтер Javascript
• Jest - тест-раннер
• react-testing-library - тестирование React-компонентов
• Prettier - форматирование CSS и JS
• Babel - транспилятор для JSX и не только

Сборка CSS

• Для процессинга CSS используется PostCSS и *.pcss расширения для стилевых файлов.
• Для поддержки Webstorm синтаксиса PostCSS в *.css файлах нужно выбрать PostCSS в дропдауне File | Settings | Languages & Frameworks | Style Sheets | Dialects > Project CSS Dialect для определения корректного синтаксиса CSS редактором
• Для генерации уникальных имен классов используется CSS Modules
• При сборке поддерживаются следующие фичи синтаксиса при помощи плагинов PostCSS:
  • вложенные селекторы &
  • импорт @import
  • переменные $
  • инлайн-комментарии //
  • миксины @define-mixin \ @mixin
  • функции (обьявления через js)
  • цветовые функции color( [ <color> | <hue> ] <color-adjuster>* )

Структура папок и файлов

• ./__mocks__/ - глобаные моки для jest
• ./app/js/components/ - компоненты из которых строятся страницы
• ./app/js/pages/ - страницы приложения
• ./app/js/pages/RootPage/ - компонент, который отвечает за роутинг и рендерит остальные страницы
• ./app/js/services/ - утилиты, сервисы, слой транспорта для запросов к апи и т.д.
• ./app/js/store/ - слой управления глобальным состоянием приложения и работой с апи\асинхронными событиями
• ./app/js/index.js - точка входа в приложение для сборки, импортирует основные стили и рендерит корневой компонент
• ./app/js/App.js - корневой компонент, оборачивает в стор и горячую замену страницы и вспомогательные компоненты
• ./app/js/constants.js - файл с константами уровня приложения