Desarrollo De Frontend (Clase) - REACT AVANZADO: Listado de usuarios y alertas con SweetAlert2 (parte 9) 🔥

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 Lunes 17 de Marzo del 2025 (semestre 2025-1) de la Universidad de Caldas. En esta clase como tal vimos como modificar una plantilla de REACT, y además, obtener contenido desde una API externa, además, se mostró como crear usar animaciones sobre elementos con ayuda de una librería. ¡Bienvenidos a la novena sesión de nuestro curso de *Desarrollo Frontend*! En esta clase, llevamos la teoría a la práctica construyendo una interfaz de administración completa. Reforzamos la importancia de la *Arquitectura por Capas* (Presentación, Lógica de Negocio y Acceso a Datos), explicando cómo cada carpeta en nuestro proyecto cumple un rol vital para la escalabilidad. Aprenderás a maquetar tablas dinámicas que consumen servicios de una API, utilizando el hook useState para gestionar los datos y useEffect para las cargas iniciales. Implementamos funciones de *CRUD*, destacando la lógica de eliminación con confirmación mediante la librería *SweetAlert2*, lo que mejora drásticamente la experiencia del usuario. Además, exploramos el renderizado condicional para mostrar estados y la gestión de rutas dinámicas. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Repaso de Arquitectura: Conexión profesional entre Services, Models y Pages. • Renderizado Dinámico: Uso del método .map() para generar filas de tablas desde una API. • Interactividad con SweetAlert2: Creación de alertas estéticas para procesos críticos. • Lógica de Estado: Cómo actualizar la interfaz en tiempo real tras una operación. • Configuración de Rutas: Integración de nuevas páginas en el sistema de navegación. • Buenas Prácticas: Organización de subsecciones para proyectos reales. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Introducción y preparación del entorno de clase 03:42 Objetivos del día: Vista de listado y lógica de CRUD 04:42 Instalación de librerías de visualización y dependencias 06:16 Organización del proyecto: Creación de la carpeta /users en Pages 13:26 Estructura de la nueva página list.tsx 15:06 Repaso profundo: Las 3 capas de la arquitectura de software 25:06 Capa de Negocio: Modelos e interfaces en TypeScript 28:21 Capa de Presentación: El rol de las vistas y componentes 31:48 Definiendo variables reactivas con useState para el listado 35:37 El hook useEffect y el llamado al servicio de datos 40:10 Maquetación de la tabla: Encabezados y estructura HTML 43:01 Renderizado con .map(): Transformando objetos en filas de tabla 46:31 Lógica de visualización: Condicionales para estados Activo/Inactivo 48:25 Creación de botones de acción con iconos 51:20 Implementación de la eliminación: Confirmación con SweetAlert2 55:22 Conexión con el servicio deleteUser y manejo de promesas 1:03:51 Actualización de la UI tras eliminar un registro correctamente 1:12:01 Configuración de rutas dinámicas en el archivo de rutas 1:16:55 Taller práctico: Creación de las secciones de Roles y Permisos 1:33:31 Análisis de diagramas de clases y relaciones de bases de datos 1:43:31 Reflexiones finales sobre la disciplina y el éxito en ingeniería 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=rY7yUhqlcSQ • Video Siguiente: ¡Próximamente disponible! 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • FRONTEND CLASE 7 (INTRO REACT): https://www.youtube.com/watch?v=7spPVt3T6LA • FRONTEND CLASE 6 (API/JSON): https://www.youtube.com/watch?v=TSGmxQufmyY #Frontend #ReactJS #TypeScript #SweetAlert2 #CRUD #DesarrolloWeb #Programacion #IngeSRM #WebDevelopment #Coding #SoftwareArchitecture 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, vite, next.js, frameworks de javascript, comparación entre react y otros frameworks, ventajas de usar react, comunidad de react, recursos para aprender react, documentación oficial de react, ejemplos prácticos de react