UI-компоненты
Что это такое
UI-компонент — это самодостаточная часть интерфейса — кнопка, поле формы, карточка, диалог, — у которой есть собственный определённый интерфейс: какие входные данные она принимает, что рисует и как себя ведёт. Собрать компонент — значит решить, каким будет этот интерфейс, реализовать его один раз и использовать везде, где встречается та же задача.
Почему это важно
Без компонентов каждый экран придумывает собственную кнопку. Кнопки расходятся по одному свойству за раз, пока продукт не начинает выглядеть собранным из трёх разных дизайнов, а изменение основного цвета не превращается в правку сорока файлов. Библиотека компонентов исправляет расхождение у источника: одно определение, одно место для изменения, — и после первого дня она же ускоряет работу, ведь второй и третий экраны собираются, а не проектируются с нуля. Однако у этого есть цена: плохой API компонента хуже его отсутствия, потому что он распространяет свою путаницу всюду, где используется.
Что в этом треке
- Проектирование API компонента (02-frontend/12-ui-components/01-designing-a-component-api) — выбор свойств, вариантов и значений по умолчанию, при которых компонент трудно использовать неправильно.
- Композиция и темизация компонентов (02-frontend/12-ui-components/02-composing-and-theming-components) — сборка крупных частей из мелких и смена их вида без правки самих компонентов.
Предварительные требования
- Язык гипертекстовой разметки (HTML) (02-frontend/03-html)
- Каскадные таблицы стилей (CSS) (02-frontend/05-css)
Что читать дальше
- Дизайн-системы (03-design-ux/32-design-systems) — библиотека компонентов — та половина дизайн-системы, что отвечает за реализацию.
- React (02-frontend/29-react) — один конкретный способ собирать и компоновать такие компоненты.
- Дизайн-токены (03-design-ux/41-design-tokens) — слой переменных, который позволяет одному компоненту носить несколько тем.