Компоненты · База
Собрать переиспользуемый компонент
Выделить UI-элемент с понятными props, states и ответственностью.
Быстро понять за 2 минуты
Выделить UI-элемент с понятными props, states и ответственностью.
Контекст
Компоненты должны быть предсказуемыми, изолированными и удобными для повторного использования без копирования логики и стилей.
Что это дает
Переиспользуемый компонент ускоряет разработку и уменьшает расхождение интерфейса в разных частях продукта.
Как выполнить
- Определите назначение компонента.
- Задайте минимальный набор props.
- Покройте варианты: size, state, disabled, loading.
Критерии приемки
- Компонент не содержит лишней бизнес-логики.
- Props документированы.
- Состояния можно проверить отдельно.
Типичные ошибки
- Делать компонент слишком универсальным.
- Копировать стили вместо токенов.
- Смешивать data fetching и UI без причины.
Инструменты
Рабочий артефакт
UI inventory
Карта компонентов
Список компонентов, их props, variants, states и связь с дизайн-системой.
- Components
- Variants
- Duplication
- Design tokens
Контроль качества
Карта компонентов
Компонент не содержит лишней бизнес-логики.
После изменения пользовательского сценария, дизайна, API-контрактов, релизов и замечаний по доступности.
Сценарий, состояние интерфейса, источник данных, критерии доступности, тесты и ограничения адаптива.
Перед отметкой выполнено: Компонент не содержит лишней бизнес-логики.
Как применять
Начинайте с пользовательского действия и состояния интерфейса. Затем проверьте данные, адаптивность, доступность, ошибки и производительность. Хороший frontend-пункт помогает понять, что увидит пользователь, как интерфейс поведет себя в крайних состояниях и чем подтверждается качество реализации.
Режим обучения
Прочитайте материал, прослушайте аудио и проверьте понимание по коротким вопросам. Ответ раскрывается после попытки сформулировать его самостоятельно.