Фронтенд сервиса коротких ссылок
- React
- Typescript
- react-router-dom v6
- Redux Toolkit
- SCSS module
- classNames
Удостовериться, что установлены все зависимости npm i и актуальная версия
Node.js. Тесты и сборка запускаются на v17.
- запуск
npm run start- билд
npm run build- unit тесты
npm run test- запуск eslint
npx eslint .- запуск eslint--fix
npx eslint --fix .Из-за смешанного контента при деплое перестают работать запросы на сервер (https у деплоя http у сервера) необходимо добавлять адреса деплоя в исключения браузера
При создании pull request и merge в main прогоняется:
- билд приложения
- unit тесты слайсов
- Называть директории и файлы компонентов в нотации kebab-case
Приложение построено на основе атомарного дизайна. Распределение по директориям:
- components\atoms: простые компоненты, из которых строятся более сложные компоненты. Не могут включать в себя другие атомы,
- components\molecules: состоят из атомов и представляют собой цельный полезный элемент. Включают простую логику и свои стили,
- components\organisms: сочетания молекул, существующих вместе. Также могут включать в себя атомы,
- components\templates: разметка. Если вам нужен компонент, который бы просто разместил некоторые не связанные компоненты по определенной верстке,
- components\pages: конечная точка роутера, финальный рендер целой страницы,
- config: конфигурационные файлы проекта + константы и роуты,
- hooks: кастомные реакт-хуки для бизнес-логики,
- router: роутер проекта,
- api: запросы к API.
- store: файлы redux и селекторы.
- Импорт компонентов из 'react'
- Импорт всех сторонних библиотек.
- Импорт всех необходимых пользовательских компонентов
- Импорт стилей компонента
- Импорт всех необходимых redux-действий
- Импорт всех необходимых пользовательских утилит