Перед стартом работы с проектом не забываем установить все необходимые зависимости:
npm installУбеждаемся, что на локальном компьютере последняя версия нужной ветки проекта (для разработки это - develop)
git pullОт ветки develop создаём ветку для работы:
git checkout -b feat/your_work_name //(если задача на новую фичу)
git checkout -b fix/your_work_name //(если задача на правку бага),
git checkout -b chore/your_work_name //(если что-то прочее)Перед коммитом необходимо проверить, что служебные файлы не попадают в коммит. Служебные файлы добавляем в .gitignore. При необходимости актуализируем README.md
Убедитесь, что ваша ветка feat/you-branch синхронизирована с веткой develop, выполните команды:
git checkout develop
git pull origin developgit pull origin develop у вас будет ошибка Your local changes to the following files would be overwritten by merge: … это означает, что у вас есть незафиксированные изменения в указанных файлах. Если встретились с этой ошибкой выполните команды:git stash
git pull origin develop
git stash applyПосле чего необходимо будет решить конфликты в файлах подсвеченных красным цветом (без решения конфликтов будет невозможно выполнить следующую команду - git checkout feat/you-branch).
Выполните команду git checkout feat/you-branch
Your local changes to the following files would be overwritten by checkout: …, то выполните команду git stash, и повторите команду указанную в предыдущем пункте.Выполните команду git merge develop. Если возникнут конфликты решите их.
Выполните команду git stash pop и достаньте спрятанные в stash изменения.
После того, как ваша ветка feat/you-branch актуализирована, выполните команды для создания нового коммита:
git add -A //Добавляем файлы
npm run commit
//Что за коммит?
//Объём коммита (варианты - Tiny, Small, Medium, Large, X-Large)
//Сокращенное описание коммита
//Полная информация о коммите
//No
//NoВыполните команду git push origin feat/you-branch.
В интерфейсе GitHub создайте PR из своей ветки в ветку develop.
git stash.git fetch origin feat/need-to-check.git checkout feat/need-to-check.git checkout feat/you-branch.git branch -d feat/need-to-check.git stash pop.Для работы используется ReqRes Fake API. Регистрация и аутентификация пользователя возможно только с применением email-адреса уже имеющегося в базе ReqRes API, например eve.holt@reqres.in. Пароль можно указать произвольный.
Миксины и переменные находятся в директории src/components/Shared/. Для того чтобы работать с миксинами и переменными необходимо в начале стилевого файла компонента указать следующие импорты (если их не указать, то при сохранение изменений в файле получим ошибку о том, что переменная или миксин не найдены):
@import '../../Shared/mixins';
@import '../../Shared/variables';Пример миксины:
@mixin font-sans($size, $color, $weight, $lh: false, $ls: false) {
font: {
family: 'OpenSans', Helvetica, Arial, sans-serif;
size: $size;
weight: $weight;
}
color: $color;
@if $lh {
line-height: $lh;
}
@if $ls {
letter-spacing: $ls;
}
}Миксин принимает 5 параметров:
$size - отвечает за размер шрифта, является обязательным параметром$color - отвечает за цвет шрифта, является обязательным параметром$weight - отвечает за вес шрифта, является обязательным параметром$lh - отвечает за высоту строки, является не обязательным, т.е. если его не указывать, то можно считать, что данный параметр вообще не указан, и браузер использует его значение по умолчанию.$ls - отвечает за расстояние между словами, является не обязательным, т.е. если его не указывать, то можно считать, что данный параметр вообще не указан, и браузер использует его значение по умолчанию.Пример использования миксины:
.app {
&__content {
/* Без необязательных параметров */
@include font-sans($textXL, $color-violet, 700);
}
}$color-..., переменные размера шрифта с $text..., это необходимо чтобы Emmet не вываливал вам все значения со знаком $, а вы пытались вспомнить название цвета.$color-violet.$color-bg-divider.Запуск проекта в режиме разработки:
npm run startСборка проекта для деплоя:
npm run buildСборка ветки develop для деплоя на GH Pages:
npm run build:devЗапуск Storybook:
npm run storybookСборка Storybook для деплоя на сервер:
npm run build-storybookПроверка проекта на ошибки:
npm run lintИсправление некоторых ошибок (для которых доступно автоисправление):
npm run lint:fixФорматирование кода (легче установить и настроить расширение Prettier на автоматическое форматирование при сохранении), команда нужна для работы Husky:
npm run formatСоздание коммита (Добавляем файлы в staged (git add -A) далее вызываем команду npm run commit и следуем подсказкам в консоли):
npm run commitСлужебная команда GH Pages запускающая скрипт сборки проекта из ветки develop:
npm run predeployСборка проекта из ветки develop и его деплой на GH Pages:
npm run deploy