Desarrollo De Frontend (Clase) - VALIDACIÓN DE FORMULARIOS EN REACT: UX y Control de Errores (parte 11) 🔥

Estos vídeos no están hechos con propósitos de enseñar, solo los subo para mantener un recuerdo de la Universidad, y para eventos futuros (errores, ¿Cómo diseñé esto?, ¿Qué error cometí?), lo digo porque no me fijo en la musica de fondo ni esos detalles mínimos ... Hola buenas, esta es la clase de "Desarrollo de Frontend" del día Viernes 28 de Marzo del 2025 (semestre 2025-1) de la Universidad de Caldas. En esta clase como tal vimos como hacer validaciones de formularios en *React* con *Formik* y *YUP* ¡Bienvenidos a la undécima sesión de nuestro curso de *Desarrollo Frontend*! En esta clase magistral, profundizamos en la lógica de *Validación de Formularios*, una habilidad crítica para cualquier desarrollador profesional. No basta con recibir datos; debemos asegurar que sean correctos, seguros y útiles para el sistema. Aprenderás a implementar validaciones en tiempo real utilizando el estado de React (useState). Exploramos el uso de *Expresiones Regulares (RegEx)* para validar formatos complejos como correos electrónicos y contraseñas. Además, vemos cómo gestionar mensajes de error dinámicos, deshabilitar botones de envío y mejorar la accesibilidad de tus interfaces, manteniendo siempre nuestra arquitectura por capas. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Lógica de Validación: Diferencias entre validación en el cliente y en el servidor. • Manejo de Estados de Error: Creación de objetos de error dinámicos para cada input. • Expresiones Regulares: Introducción a los patrones de búsqueda para emails y textos. • Experiencia de Usuario (UX): Feedback visual inmediato mediante clases de CSS condicionales. • Seguridad: Cómo prevenir el envío de datos incompletos o malformados. • Limpieza de Código: Centralización de reglas de validación en funciones auxiliares. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Introducción a la importancia de validar datos en el Frontend 01:46 Impacto en la UX: ¿Por qué no esperar la respuesta del servidor? 03:21 Preparación del proyecto y repaso de la estructura de formularios 05:11 Captura de eventos onChange y actualización del estado de datos 08:36 Creación del estado de errores: Gestionando múltiples mensajes 12:51 Validación de campos obligatorios: El concepto de Dirty vs Pristine 15:41 Introducción a las Expresiones Regulares para validación de Email 18:31 Implementación de la lógica de validación dentro del controlador 22:16 Renderizado condicional de mensajes de error bajo los inputs 25:51 Estilos dinámicos: Cambiando colores de bordes según la validez 29:11 Lógica del botón Submit: Deshabilitación y validación final 34:26 Refactorización: Creando un Hook personalizado para validaciones 40:16 Validación de tipos de datos: Números, fechas y longitudes 45:31 Integración con la API: Asegurando el envío de datos válidos 50:21 Buenas prácticas y cierre: Hacia un código más robusto [Image showing React form validation flow with error state objects] 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=MMCLRr_x130 • Video Siguiente: ¡Próximamente disponible! 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • FRONTEND CLASE 9 (CRUD): https://www.youtube.com/watch?v=kkP_WVQeHcQ • FRONTEND CLASE 6 (API/Fetch): https://www.youtube.com/watch?v=TSGmxQufmyY #Frontend #ReactJS #FormValidation #UX #JavaScript #DesarrolloWeb #Programacion #IngeSRM #WebDevelopment #RegEx #Coding TAGS IGNORAR: react, introducción a react, curso de react, tutorial de react, react desde cero, aprender react, react js, fundamentos de react, componentes en react, estado en react, props en react, hooks en react, useState, useEffect, jsx, virtual dom, desarrollo frontend, curso de desarrollo web, programación en javascript, biblioteca de javascript, spa, aplicaciones de una sola página, react router, gestión de estado, redux, contexto en react, ciclo de vida de componentes, renderizado condicional, eventos en react, formularios en react, manejo de eventos, desarrollo de interfaces, arquitectura de componentes, patrones de diseño en react, mejores prácticas en react, optimización de rendimiento, react para principiantes, guía de react, react avanzado, integración con apis, consumo de apis rest, fetch en react, axios en react, despliegue de aplicaciones react, herramientas para desarrollo en react, entorno de desarrollo, create react app, next.jj proyectos con react, desarrollo de aplicaciones web, interfaces de usuario, diseño de interfaces, experiencia de usuario, usabilidad, responsive design, diseño adaptable, css en react, styled-components, css modules, sass en react, testing en react, pruebas unitarias, jest, testing library, tdd, desarrollo dirigido por pruebas, depuración en react, debugging, manejo de errores, manejo de estados asíncronos, promesas en javascript, async await, manejo de datos en react, fetch api, integración con backend, fullstack con react, mern stack, mongodb, express.js, node.js, despliegue en netlify, despliegue en vercel, github pages, continuous deployment