Todos los temas de React
React • Sección temática3 escenarios

Arquitectura de Componentes y Sistemas de Diseño

Compound Components, primitivas Radix/Base UI y accesibilidad WAI-ARIA

Creación de una biblioteca de UI de producción: patrón de ranura asChild (Slot), gestión de foco (Focus Trap / Roving Tabindex) e integración con tokens de diseño de Tailwind CSS v4.

Compound ComponentsRadix PrimitivesBase UIasChild SlotWAI-ARIA 1.3
Progreso del tema
0%(0 de 3 completado)
+150 XP~105 min

Escenarios prácticos de la sección

3 escenarios disponibles

Nivel de dificultad:
Junior35 min+50 XP
Desarrollo de SPA Moderna en React 19 desde Cero: Vite 6, Tailwind CSS v4, Feature-Sliced Design y 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
Escenario integralAbrir flujo de trabajo
Senior35 min+50 XP
Arquitectura de Compound Components: Patrón Slot asChild, Radix Primitives y WAI-ARIA 1.3

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

React 19Radix UI PrimitivesTypeScript 5.8+Tailwind CSS v4WAI-ARIA 1.3
Escenario integralAbrir flujo de trabajo
Middle35 min+50 XP
Formularios Dinámicos con Seguridad de Tipos: React Hook Form, Zod y Radix UI

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

React 19React Hook FormZodRadix UITailwind CSS v4
Escenario integralAbrir flujo de trabajo