Skip to content

Home

Jump to bottom
Alexander Merzlikin edited this page Feb 23, 2023 · 30 revisions

Документация frontend части проекта Sticker Stack

Файловая структура

В корне проекта:

  • 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. У каждого компонента имеется своя папка, в ней дочерние файлы - сам компонент, стили к нему.

├── public/
├── src/
|    ├── components/                                   # React components
|    |   ├── UserProfile/
|    |   |   ├── UserProfile.tsx
|    |   |   └── UserProfile.module.scss
|    |   └── Card/
|    |       ├── Card.tsx
|    |       └── Card.module.scss
|    |
|    └── services/                                     # Redux
|        ├── actions/
|        |   ├── UserProfile.ts
|        |   └── Card.ts
|        |
|        └── reducers/
|            ├── UserProfile.ts
|            ├── Card.ts
|            └── index.ts
|
├── README.md
└── LICENSE.md

Требования к именованию файлов:

  • Названия директорий в components используют наименование компонента, который в ней расположен
  • Название файла компонента (.tsx) повторяет имя директории в которой находится
  • Название файла стилей (.scss) повторяет имя директории в которой находится и добавляет к себе .module (Component.module.scss)

Как залить свои изменения

https://www.conventionalcommits.org/ru/v1.0.0/

Как отправить на ревью

Любые изменения должны приходить из новой ветки, которая создана от наиболее поздней версии ветки main. Далее создается пулреквест на слияние этой новой ветки с main. Код должны одобрить хотя бы два человека, прежде чем будет доступен merge. В параметрe Reviewers можно запросить ревью и одобрение у конкретных пользователей.

Form desctop — копия (4)

Шаблон именования веток: feature/<здесь краткое описание содержимого>. Например, feature/authorization, feature/new-design.

Шаблон именования коммитов: <разновидность изменений>: <краткое описание требуемых изменений>. Например, 'fix: rewrite error messages', 'feat: add validation to main form'.

После создания пулреквеста vercel автоматически реализует деплой данной ветки. Посмотреть его можно по ссылке Visit Preview. Form desctop — копия (4)

После каждого коммита в ветку деплой автоматически обновляется.

Как сделать ревью

На странице пулреквеста нужно найти кнопку "Добавить ревью":

Form desctop — копия (4)

Далее следует проверить все измененные автором файлы. К любой строчке кода можно оставить комментарий. Далее можно прокомментировать, утвердить изменения (approve), либо запросить новые (request chages).

Form desctop — копия (4)

Кодстайл

Clone this wiki locally