Curso de React con PrimeReact para Equipos de Desarrollo

Repasar componentes funcionales como unidad principal de construcción de interfaces.

Diseñar componentes con props tipadas, estado local, eventos y renderizado condicional.

Usar `useState`, `useEffect`, `useMemo`, `useCallback`, `useRef` y custom hooks con criterio.

Diferenciar estado local, estado derivado, estado remoto, estado de formulario y estado global.

Evitar efectos innecesarios, duplicidad de estado y lógica mezclada con presentación.

Aplicar composición de componentes para construir pantallas flexibles y reutilizables.

Separar componentes de dominio, componentes UI, hooks, servicios, tipos y utilidades.

Trabajar con listas, keys, fragmentos, children, slots simples y patrones de composición.

Preparar componentes para mantenimiento en equipos con naming, carpetas y contratos claros.

Realizar ejercicio de refactorización de una pantalla monolítica en componentes reutilizables.

Configurar TypeScript en un proyecto React moderno con reglas estrictas y tipos reutilizables.

Tipar props, eventos, estados, callbacks, respuestas de API y modelos de dominio.

Usar tipos genéricos en componentes reutilizables, tablas, formularios y hooks.

Tipar eventos de PrimeReact en inputs, dropdowns, DataTable, menús, botones y overlays.

Crear modelos separados para DTOs de API, modelos internos y formularios.

Gestionar nulos, opcionales, unions, enums, discriminated unions y tipos derivados.

Evitar `any` innecesario y crear tipos de utilidad para casos repetidos.

Integrar TypeScript con validación de formularios y transformación de datos.

Configurar reglas de linting para mantener calidad y consistencia en el código.

Realizar ejercicio de tipado completo de una pantalla de gestión con PrimeReact.

Diseñar estructura de carpetas por dominio, feature, capa técnica o patrón híbrido.

Separar `components`, `pages`, `layouts`, `routes`, `services`, `hooks`, `types`, `styles` y `shared`.

Definir convenciones de naming para componentes, hooks, modelos, servicios y utilidades.

Crear una capa de servicios para consumir APIs sin acoplar la UI al transporte HTTP.

Diseñar componentes compartidos sobre PrimeReact para estandarizar uso corporativo.

Evitar que cada pantalla configure DataTable, Dialog, Toast o formularios de forma diferente.

Preparar un sistema de imports, alias y organización de módulos limpio.

Gestionar errores, loading, empty states y permisos de forma transversal.

Documentar decisiones de arquitectura para facilitar onboarding de nuevos desarrolladores.

Realizar ejercicio de diseño de arquitectura base para un backoffice con PrimeReact.

Instalar y configurar PrimeReact correctamente en la aplicación.

Incorporar PrimeIcons para iconografía coherente en botones, menús, tablas y estados.

Usar temas disponibles en PrimeReact y comprender su impacto visual y técnico.

Configurar estilos globales, reset, layout base y clases utilitarias.

Integrar PrimeFlex para grid, spacing, alineación, flexbox y layouts responsivos.

Diferenciar estilos globales, CSS modules, utilidades, clases PrimeReact y estilos inline.

Crear variables visuales corporativas para colores, espaciados, bordes y tipografía.

Preparar modo claro y oscuro cuando el diseño corporativo lo requiere.

Evitar sobrescrituras CSS frágiles que se rompen al actualizar PrimeReact.

Realizar ejercicio de tematización inicial de una aplicación corporativa.

Comprender la diferencia entre Styled Mode y Unstyled Mode en PrimeReact.

Analizar cuándo conviene usar componentes ya tematizados y cuándo controlar todo el estilo.

Usar Pass Through para acceder a partes internas del DOM de componentes PrimeReact.

Aplicar clases, atributos, `aria-*`, `data-*` y estilos específicos mediante `pt`.

Diseñar personalizaciones sin copiar componentes completos ni romper actualizaciones futuras.

Integrar Tailwind CSS o librerías de estilos cuando se trabaja en Unstyled Mode.

Crear presets visuales para componentes frecuentes como Button, InputText, Dialog y DataTable.

Evitar dependencias excesivas de selectores internos no documentados.

Preparar una estrategia de personalización compatible con mantenimiento a largo plazo.

Realizar ejercicio de personalización avanzada de componentes con Pass Through.

Crear layout principal con cabecera, menú lateral, área de contenido, breadcrumbs y acciones contextuales.

Usar componentes PrimeReact como Menubar, Sidebar, PanelMenu, Breadcrumb, Toolbar y Button.

Diseñar navegación responsive para escritorio, tablet y pantallas reducidas.

Integrar React Router para rutas públicas, privadas, anidadas y con parámetros.

Crear layouts diferenciados para login, administración, detalle, edición y dashboards.

Gestionar estado de navegación, elementos activos, permisos de menú y breadcrumbs dinámicos.

Diseñar páginas con acciones primarias, secundarias y zonas de feedback claras.

Evitar layouts rígidos que dificultan crecimiento funcional.

Preparar estructura para lazy loading de rutas y separación por módulos.

Realizar ejercicio de layout corporativo con rutas, menú lateral y navegación protegida.

Construir formularios usando InputText, InputNumber, Calendar, Dropdown, MultiSelect, Checkbox, RadioButton y InputTextarea.

Diferenciar formularios simples, formularios dinámicos, formularios multi-step y formularios de edición compleja.

Integrar PrimeReact con React Hook Form o enfoque equivalente de gestión de formularios.

Definir validaciones síncronas y asíncronas con mensajes claros para usuario final.

Gestionar valores iniciales, reset, edición, creación, modo lectura y cambios pendientes.

Trabajar con componentes controlados y eventos específicos de PrimeReact.

Diseñar validación visual consistente con estados `invalid`, mensajes y accesibilidad.

Crear formularios dependientes donde un campo condiciona opciones, reglas o visibilidad de otro.

Evitar formularios con lógica repetida y validaciones dispersas en cada componente.

Realizar ejercicio de formulario corporativo de alta y edición con validación completa.

Usar DataTable y Column para presentar datos empresariales de forma clara y eficiente.

Configurar paginación, ordenación, filtros por columna, filtros globales y plantillas de celda.

Implementar selección simple, múltiple, acciones por fila y acciones masivas.

Crear columnas con renderizado personalizado, iconos, estados, tags, fechas, importes y enlaces.

Implementar edición inline, edición por fila o edición mediante Dialog según el caso de uso.

Gestionar lazy loading, paginación remota, filtros remotos y ordenación servidora.

Mostrar estados de carga, tabla vacía, error de datos y reintento.

Exportar datos o preparar acciones de descarga cuando el negocio lo requiere.

Optimizar tablas con muchos registros evitando renders innecesarios y payloads excesivos.

Realizar ejercicio de DataTable completa con API, filtros remotos, acciones y edición.

Usar AutoComplete para búsquedas asistidas contra datos locales o remotos.

Configurar Dropdown, MultiSelect, ListBox, TreeSelect y CascadeSelect según complejidad de selección.

Crear buscadores con debounce para evitar llamadas excesivas a API.

Diseñar filtros reutilizables para listados empresariales.

Implementar chips, tags, estados, badges y elementos visuales de clasificación.

Usar Skeleton, ProgressSpinner y ProgressBar para mejorar percepción de carga.

Crear feedback de usuario con Toast, Messages, InlineMessage y ConfirmDialog.

Diseñar empty states útiles con explicación, acción sugerida y contexto.

Evitar pantallas que fallan sin información o fuerzan al usuario a recargar.

Realizar ejercicio de pantalla de búsqueda avanzada con filtros, resultados y feedback.

Usar Dialog para formularios, detalles, confirmaciones ampliadas y acciones contextuales.

Aplicar ConfirmDialog y ConfirmPopup para operaciones destructivas o decisiones sensibles.

Usar OverlayPanel, Tooltip, Sidebar y Menu para información contextual.

Diseñar modales accesibles, enfocados, cerrables y coherentes con flujo de usuario.

Gestionar apertura, cierre, loading interno, errores y confirmación de cambios pendientes.

Evitar modales anidados que complican navegación y accesibilidad.

Crear patrones reutilizables para alta, edición, eliminación y visualización de detalle.

Integrar diálogos con formularios, tablas y servicios de API.

Controlar scroll, foco, teclado y experiencia responsive.

Realizar ejercicio de flujo CRUD con Dialog, ConfirmDialog, Toast y DataTable.

Crear una capa HTTP para consumir APIs REST con fetch, Axios o cliente corporativo.

Separar modelos de API, modelos de pantalla y formularios.

Gestionar loading, error, reintento, caché, invalidación y estados optimistas.

Integrar TanStack Query o patrón equivalente para estado remoto cuando el proyecto lo requiere.

Implementar paginación, filtros, ordenación y búsqueda en servidor.

Gestionar errores HTTP, validaciones backend, timeouts, desconexión y respuestas parciales.

Mostrar mensajes de error útiles y accionables mediante Toast, Message o paneles específicos.

Evitar llamadas duplicadas, efectos mal definidos y actualizaciones de estado después de desmontar componentes.

Crear servicios testeables sin depender directamente de componentes PrimeReact.

Realizar ejercicio de módulo conectado a API con listado, detalle, edición y errores controlados.

Definir cuándo usar Context API, Zustand, Redux Toolkit u otra solución de estado global.

Separar estado global real de estado local que no debe escalarse innecesariamente.

Gestionar sesión de usuario, preferencias, tema, idioma, permisos y navegación.

Crear guards de rutas y componentes visibles según permisos.

Diseñar menús dinámicos en PrimeReact según rol, módulo o feature flag.

Evitar lógica de permisos duplicada en cada pantalla.

Integrar feature flags para activar o desactivar funciones de forma controlada.

Crear providers de aplicación para configuración, autenticación, notificaciones y tema.

Probar flujos con usuarios de distintos permisos.

Realizar ejercicio de aplicación con roles, rutas protegidas y menú dinámico.

Aplicar principios WCAG en formularios, tablas, diálogos, menús y feedback visual.

Usar atributos `aria`, labels, descripciones, roles y mensajes de error comprensibles.

Revisar navegación por teclado en Dialog, Menus, DataTable, Dropdown y componentes de formulario.

Controlar foco al abrir modales, validar formularios y mostrar errores.

Verificar contraste, tamaño de texto, estados visuales y legibilidad.

Preparar textos internacionalizables con librerías como i18next o solución corporativa.

Gestionar fechas, importes, números, moneda, idioma y formatos regionales.

Evitar depender solo del color para transmitir estados o errores.

Crear checklist de accesibilidad para componentes PrimeReact personalizados.

Realizar ejercicio de auditoría y mejora accesible de una pantalla existente.

Analizar renders innecesarios con React DevTools y técnicas de profiling.

Usar `memo`, `useMemo`, `useCallback` y composición solo cuando aportan mejora real.

Optimizar DataTable con paginación remota, lazy loading y columnas controladas.

Dividir código con lazy loading de rutas y módulos pesados.

Revisar impacto de temas, iconos, CSS, dependencias y componentes no utilizados en el bundle.

Medir bundle con herramientas de análisis y detectar dependencias excesivas.

Evitar cargar datos masivos en cliente cuando la API puede paginar, filtrar u ordenar.

Implementar debounce, cancelación de peticiones y estados de carga eficientes.

Mejorar percepción de rendimiento con Skeleton, progresos y renderizado progresivo.

Realizar ejercicio de optimización de una pantalla lenta con tabla, filtros y datos remotos.

Configurar Vitest, Testing Library y herramientas equivalentes para pruebas de componentes.

Probar componentes PrimeReact mediante comportamiento visible, no detalles internos frágiles.

Crear tests para formularios, validaciones, errores, diálogos, tablas y permisos.

Mockear APIs, servicios, rutas y contexto de aplicación en pruebas.

Añadir pruebas de accesibilidad con herramientas automatizadas cuando el proyecto lo permite.

Configurar ESLint, Prettier, TypeScript strict y reglas corporativas de calidad.

Documentar componentes reutilizables, contratos, props y ejemplos de uso.

Crear Storybook o catálogo interno para componentes compartidos si el equipo lo necesita.

Preparar CI/CD con build, lint, test, análisis de bundle y validación de calidad.

Realizar ejercicio de suite de tests para formulario, DataTable y flujo modal.

Revisar riesgos de XSS, exposición de tokens, datos sensibles, almacenamiento local y manipulación de permisos en cliente.

Evitar confiar en validaciones frontend como único control de seguridad.

Gestionar autenticación, autorización, refresh tokens y cabeceras de seguridad según arquitectura corporativa.

Controlar configuración por entorno sin incrustar secretos en el bundle.

Preparar build de producción con Vite, variables seguras, sourcemaps controlados y análisis de tamaño.

Desplegar aplicación en servidor estático, CDN, contenedor, plataforma cloud o entorno corporativo.

Configurar observabilidad frontend con logs, métricas, trazas, errores y eventos relevantes.

Crear runbooks de soporte para errores frecuentes de UI, API, permisos y despliegue.

Definir estándares de actualización de React, PrimeReact, dependencias y temas.

Realizar ejercicio de checklist de seguridad, build y despliegue de una aplicación React con PrimeReact.

Diseñar una aplicación empresarial completa con React, TypeScript, Vite y PrimeReact.

Definir dominio funcional del proyecto: CRM interno, gestión de incidencias, panel administrativo o backoffice operativo.

Crear arquitectura modular con rutas, layouts, servicios, tipos, hooks, componentes compartidos y estilos.

Configurar PrimeReact, PrimeIcons, tema visual, PrimeFlex y estructura de estilos corporativos.

Implementar layout principal con menú lateral, cabecera, breadcrumb, área de contenido y acciones globales.

Crear autenticación simulada, roles, permisos, rutas protegidas y menú dinámico por perfil.

Implementar listado principal con DataTable, paginación remota, filtros, ordenación, acciones y estados de carga.

Crear formulario completo con PrimeReact, validación, errores, modo alta, modo edición y modo solo lectura.

Añadir Dialog, ConfirmDialog, Toast y flujo CRUD completo con feedback de usuario.

Integrar API mock o backend de laboratorio con capa de servicios, manejo de errores y reintentos.

Incorporar búsqueda avanzada con Dropdown, MultiSelect, Calendar, AutoComplete y filtros persistentes.

Crear dashboard con tarjetas, métricas, gráficos, estados, indicadores y navegación hacia detalle.

Añadir accesibilidad básica: labels, foco, teclado, contraste, mensajes de error y estructura semántica.

Internacionalizar textos principales, fechas, importes, estados y mensajes de validación.

Optimizar renders, bundle, carga de rutas, DataTable y peticiones remotas.

Crear tests para componentes críticos: formulario, tabla, permisos, diálogo y flujo de guardado.

Documentar componentes reutilizables, decisiones de arquitectura, convenciones y guía de mantenimiento.

Preparar build de producción, variables por entorno, análisis de bundle y checklist de despliegue.

Revisar seguridad frontend: tokens simulados, datos sensibles, permisos, validaciones y configuración.

Presentar la aplicación final defendiendo arquitectura, UX, accesibilidad, rendimiento, calidad, seguridad y evolución futura.