Ко всем темам React
React • Тематический раздел3 сценария

Компонентная архитектура и дизайн-системы

Compound Components, Radix Primitives/Base UI и доступность WAI-ARIA

Создание продакшн UI-библиотеки: паттерн слота asChild (Slot), управление фокусом (Focus Trap / Roving Tabindex) и интеграция с токенами Tailwind CSS v4.

Compound ComponentsRadix PrimitivesBase UIasChild SlotWAI-ARIA 1.3
Прогресс темы
0%(0 из 3 пройдено)
+150 XP~105 мин

Практические сценарии раздела

3 сценариев доступно для выполнения

Уровень сложности:
Junior35 мин+50 XP
Разработка современного React 19 SPA с нуля: Vite 6, Tailwind CSS v4, Feature-Sliced Design и TanStack Query v5

Полный пошаговый рецепт создания production-ready Single Page Application (SPA) на чистом React 19 и Vite 6 с нуля: современная сборка, дизайн-токены Tailwind CSS v4 (@theme), масштабируемая модульная структура папок Feature-Sliced Design и управление серверным состоянием через TanStack Query v5.

React 19Vite 6TypeScript 5.8+Tailwind CSS v4TanStack Query v5Lucide React
Сквозной сценарийОткрыть воркфлоу
Senior35 мин+50 XP
Архитектура Compound Components: паттерн слота asChild, Radix Primitives и WAI-ARIA 1.3

Построение гибкой корпоративной дизайн-системы на паттерне Compound Components: полиморфизм через asChild Slot, контекстное разделение состояния, клавиатурная навигация Roving Tabindex и стандарты a11y.

React 19Radix UI PrimitivesTypeScript 5.8+Tailwind CSS v4WAI-ARIA 1.3
Сквозной сценарийОткрыть воркфлоу
Middle35 мин+50 XP
Динамические типобезопасные формы: React Hook Form, Zod и Radix UI

Полноценный production-пайплайн построения динамических форм со сложными массивами полей (useFieldArray), валидацией на клиенте и сервере через Zod, оптимизацией ререндеров и доступностью Radix UI.

React 19React Hook FormZodRadix UITailwind CSS v4
Сквозной сценарийОткрыть воркфлоу