Frontend

Зачем для UCP. Frontend — вторая специализация продукт-инженера: чтобы один человек довёл продукт до пользователя, ему нужна и часть, которую пользователь видит. Стек — React + TypeScript. Backend-паттерны (UseCase, агрегаты, CQRS) на него не натягиваются — у frontend свои концерны.

Раздел разбит на 9 статей. Можно читать подряд (фундамент → данные и состояние → навигация и вид → качество) или точечно.

Фундамент

1. Структура проекта и компонентная модель — раскладка, компонент как единица, типизация.
2. Компоненты: структура и композиция — границы, композиция, props против состояния.

Данные и состояние

3. Состояние: локальное и серверное — useState/useReducer/context, когда стор.
4. Загрузка данных: TanStack Query — кеш, инвалидация, мутации.
5. Формы: react-hook-form и zod — валидация, согласованность с backend-контрактом.

Навигация и вид

6. Роутинг: React Router — маршруты, вложенность, защищённые маршруты.
7. Стилизация и дизайн-токены — подходы и их цена, токены.

Качество

8. Доступность (a11y) — семантика, клавиатура, ARIA.
9. Тестирование: Vitest и Testing Library — поведение, а не реализация.

Связанное

• Продукт-инженер — карта специализаций и путь.
• Use Case Pattern (обзор) — методология, общий хребет специализаций.