All React topics
React • Topic Section3 scenarios

Component Architecture & Design Systems

Compound Components, Radix Primitives/Base UI & WAI-ARIA accessibility

Building a production UI library: asChild Slot pattern, focus management (Focus Trap / Roving Tabindex), and seamless integration with Tailwind CSS v4 design tokens.

Compound ComponentsRadix PrimitivesBase UIasChild SlotWAI-ARIA 1.3
Topic Progress
0%(0 of 3 completed)
+150 XP~105 min

Practical Section Scenarios

3 scenarios available

Difficulty level:
Junior35 min+50 XP
Modern React 19 SPA from Scratch: Vite 6, Tailwind CSS v4, Feature-Sliced Design, and 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
Production ScenarioOpen workflow
Senior35 min+50 XP
Compound Components Architecture: asChild Slot Pattern, Radix Primitives, and WAI-ARIA 1.3

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

React 19Radix UI PrimitivesTypeScript 5.8+Tailwind CSS v4WAI-ARIA 1.3
Production ScenarioOpen workflow
Middle35 min+50 XP
Dynamic Type-Safe Forms: React Hook Form, Zod, and Radix UI

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

React 19React Hook FormZodRadix UITailwind CSS v4
Production ScenarioOpen workflow