89 lines
5.8 KiB
Markdown
89 lines
5.8 KiB
Markdown
|
---
|
|||
|
|
title: Компоненты
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Компоненты
|
|||
|
|
|
|||
|
|
## Правила создания и работы с компонентами.
|
|||
|
|
|
|||
|
|
### 1. Структура компонента
|
|||
|
|
Ассистент при создании/рефакторинге компонента должен **строго** придерживаться следующей структуры файлов и папок:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
component-name/
|
|||
|
|
index.ts
|
|||
|
|
component-name.tsx
|
|||
|
|
styles/
|
|||
|
|
component-name.module.css
|
|||
|
|
locales/
|
|||
|
|
ru.json
|
|||
|
|
en.json
|
|||
|
|
types/
|
|||
|
|
component-name.interface.ts
|
|||
|
|
component-name.type.ts
|
|||
|
|
component-name.enum.ts
|
|||
|
|
schemas/
|
|||
|
|
schema-name.schema.ts
|
|||
|
|
utils/
|
|||
|
|
util-name.util.ts
|
|||
|
|
hooks/
|
|||
|
|
use-hook-name.hook.ts
|
|||
|
|
stores/
|
|||
|
|
store-name.store.ts
|
|||
|
|
ui/
|
|||
|
|
... # вложенные компоненты для component-name
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Пояснения к структуре компонента:
|
|||
|
|
**Обязательные файлы** обязательны для всех компонентов, даже если они пустые.
|
|||
|
|
- component-name/: Папка компонента корень для всего компонента.
|
|||
|
|
- index.ts: экспортирует главный компонент, интерфейс и всё, что может быть переиспользовано.
|
|||
|
|
- component-name.tsx: главный компонент.
|
|||
|
|
- styles/component-name.module.css: стили компонента.
|
|||
|
|
- locales/ru.json: локализация на русском языке.
|
|||
|
|
- locales/en.json: локализация на английском языке.
|
|||
|
|
- types/component-name.interface.ts: интерфейс пропсов компонента.
|
|||
|
|
**Не обязательные файлы** добавляются только при необходимости
|
|||
|
|
- types/component-name.type.ts: типы компонента.
|
|||
|
|
- types/component-name.enum.ts: enum компонента.
|
|||
|
|
- schemas/schema-name.schema.ts: схемы валидации.
|
|||
|
|
- utils/util-name.util.ts: утилиты компонента.
|
|||
|
|
- hooks/use-hook-name.hook.ts: хуки компонента.
|
|||
|
|
- stores/store-name.store.ts: хранилища состояния компонента.
|
|||
|
|
- ui/: Папка для вложенных компонентов.
|
|||
|
|
|
|||
|
|
### Требования к компоненту
|
|||
|
|
- Использовать `memo()` для всех компонентов, которые принимают пропсы.
|
|||
|
|
- Использовать `useMemo` для всех вычислений, которые передаются в пропсы других компонентов.
|
|||
|
|
- Использовать `useCallback` для всех функций/методов, которые передаются в пропсы других компонентов.
|
|||
|
|
|
|||
|
|
### Требования к вложенным компонентам
|
|||
|
|
- Вложенный компонент — это полноценный компонент, который обязан полностью соблюдать все правила, описанные для компонентов (структура, именование, документация, типизация, стилизация и т.д.).
|
|||
|
|
- Все вложенные компоненты размещаются только в папке ui/ основного компонента.
|
|||
|
|
|
|||
|
|
**Пояснение**
|
|||
|
|
Нет необходимости повторять структуру и требования — вложенный компонент подчиняется тем же правилам, что и любой другой компонент, только располагается в папке ui/ родительского компонента.
|
|||
|
|
|
|||
|
|
### Требования к локализации
|
|||
|
|
- Все добавленные локализации обязательно подключать в экземпляр `app/i18n` (чтобы новые namespace были доступны для i18next).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### Чек-лист для создания нового компонента
|
|||
|
|
- [ ] Главный компонент размещён в корне и назван по правилу PascalCase.
|
|||
|
|
- [ ] Создан файл стилей в папке `styles/`, имя в kebab-case, используется BEM.
|
|||
|
|
- [ ] Все классы применяются через `className={styles['component-name']}`.
|
|||
|
|
- [ ] Создана папка `locales/` с файлами `ru.json` и `en.json`.
|
|||
|
|
- [ ] Создан файл интерфейса пропсов в папке `types/`, даже если интерфейс пустой.
|
|||
|
|
- [ ] Создан файл `index.ts` с экспортом главного компонента и интерфейса.
|
|||
|
|
- [ ] Внутренние компоненты (если есть) размещены в папке `ui/`.
|
|||
|
|
- [ ] Все важные части кода документированы по TSDoc (см. раздел 16).
|
|||
|
|
- [ ] Остальные файлы (schemas, дополнительные типы, enum) добавлены только при необходимости.
|
|||
|
|
- [ ] Именование файлов и папок соответствует правилам (см. выше).
|
|||
|
|
- [ ] Нет неиспользуемого или невалидного кода.
|
|||
|
|
- [ ] Для компонентов с пропсами используется `React.memo`.
|
|||
|
|
- [ ] Для вычислений, передаваемых в пропсы, используется `useMemo`.
|
|||
|
|
- [ ] Для функций, передаваемых в пропсы, используется `useCallback`.
|
|||
|
|
- [ ] Все тексты вынесены в локализационные файлы и используются через i18n.
|
|||
|
|
- [ ] Новые namespace подключены в экземпляр i18n.
|