Home
Фронтенд-домен с функционалом - http://stickerstack.ru/
Прототипы и макеты от дизайнера - https://www.figma.com/file/Z1qiU1QZYnQjvKMplUsRkj/PoC?node-id=0%3A1
API-документация - https://api.stickerstack.ru
- node-modules – это папка, которая содержит пакеты (зависимости), которые требуются нашему приложению. Их загружает и обновляет npm.
- public – это папка, в которой находится страница index.html, определяющая HTML шаблон всего нашего приложения; кроме этого она ещё содержит некоторые другие файлы приложения.
- src (сокращенно от source) – каталог, содержащий исходный код приложения.
- gitignore – нужен для скрытия файлов и папок от системы контроля версий GIT. Этот файл содержит все необходимые записи, каким-то определённым образом его настраивать не нужно.
- package.json – это набор метаданных о приложении: название проекта, версия, пакеты от которых зависит проект и т.д. package.json является ключевым файлом для любых приложений, основанных на Node.js.
- package-lock.json – файл, который создаёт npm автоматически при установке зависимостей. Он содержит в себе полную информацию обо всех установленных зависимостях, включая их точные версии.
- README.md - это описание проекта
- .eslintrc.json - конфигурация EsLint. ESLint — это инструмент статического анализа кода для выявления проблемных шаблонов, обнаруженных в коде.
- .eslintignore - исключения для EsLint.
- LICENSE.md - лицензия проекта.
- tsconfig.json - конфигурация для TypeScript. TS - язык программирования, позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.
Весь интерфейс разбит на отдельные React-компоненты, которые хранятся в папке Components. У каждого компонента имеется своя папка, в ней дочерние файлы - сам компонент, стили к нему.
- Названия директорий в components используют наименование компонента, который в ней расположен
- Название файла компонента (.tsx) повторяет имя директории в которой находится
- Название файла стилей (.scss) повторяет имя директории в которой находится и добавляет к себе .module (Component.module.scss)
https://www.conventionalcommits.org/ru/v1.0.0/
Любые изменения должны приходить из новой ветки, которая создана от наиболее поздней версии ветки main. Далее создается пулреквест на слияние этой новой ветки с main. Код должен одобрить хотя бы один человек, прежде чем будет доступен merge. В параметрe Reviewers можно запросить ревью и одобрение у конкретных пользователей.
Шаблон именования веток: feature/<здесь краткое описание содержимого> или bug/<здесь краткое описание исправления>. Например, feature/authorization, feature/new-design, bug/form-styles.
Шаблон именования коммитов: <разновидность изменений>: <краткое описание требуемых изменений>. Например, 'fix: rewrite error messages', 'feat: add validation to main form'.
После создания пулреквеста vercel автоматически реализует деплой данной ветки. Посмотреть его можно по ссылке Visit Preview.
После каждого коммита в ветку деплой автоматически обновляется.
На странице пулреквеста нужно найти кнопку "Добавить ревью":
Далее следует проверить все измененные автором файлы. К любой строчке кода можно оставить комментарий. Далее можно прокомментировать, утвердить изменения (approve), либо запросить новые (request chages).
-
Первый блок сторонние библиотеки\фреймворки + Redux (слайсы)
-
Второй блок наши компоненты
-
Третий блок стили(но стили всегда ниже всех), константы и любой другой импорт
Пример
Блоки импортов разделены одной пустой строкой.
Компонент экспотируем не defualt export, а просто export.
Пример
Папка с компонентом содержит index.ts в котором экспортируется компонент, чтобы не дублировать в импорте название.
Пример
Используется модульная система. Файл стилей для каждого компонента хранится в папке с компонентом. Нейминг: NameComponent.module.scss.
Импортируется в самом конце импортов.
Пример
Пример использования стилей
Интерфейс пропсов храним в самом компоненте перед его объявлением. Название всегда IProps.
Пример
Интерфейсы других сущностей храним в том же компоненте, где использовали. Если интерфейс будет использован несколько раз, нужно создать отдельный файл в src/interface с названием INameInterface.ts.
Пример
