Desarrollo De Frontend (Clase) - COMPONENTES EN REACT: Atomic Design y Reutilización (parte 10) 🔥

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 hacer componentes de React, para reutilizar nuestro código... ¡Bienvenidos a la décima sesión de nuestro curso de *Desarrollo Frontend*! Hoy dominamos el concepto que hace que React sea la herramienta favorita de la industria: la *Componentización*. Basándonos en la metodología de *Atomic Design*, explicamos cómo dividir una interfaz en átomos, moléculas y organismos para lograr un código limpio, modular y altamente reutilizable. Aprenderás a crear etiquetas personalizadas mediante componentes que reciben información a través de *Props*. Ponemos esto en práctica construyendo una *Tabla Genérica*, una estructura capaz de renderizar cualquier tipo de datos simplemente configurando sus columnas y acciones. Además, exploramos el concepto de *Paso por Referencia* para inyectar lógica de programación desde las páginas hacia los componentes, asegurando una separación clara de responsabilidades. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Atomic Design: Diferencias entre átomos, moléculas, organismos y plantillas. • Props e Interfaces: Definición de contratos de datos para componentes seguros. • Tablas Genéricas: Creación de componentes que se adaptan a cualquier entidad. • Inyección de Funciones: Cómo pasar lógica personalizada (callbacks) a través de Props. • Refactorización: Dejar de copiar y pegar código para usar estructuras modulares. • Buenas Prácticas: Principios de cohesión y acoplamiento en el software. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Filosofía de Atomic Design: Átomos, moléculas y organismos 01:32 El concepto de molécula: Reutilización de buscadores y botones 05:10 Componentes como etiquetas HTML personalizadas 06:32 Preparación del repositorio y copia de seguridad del proyecto 13:18 Identificando elementos comunes en diferentes páginas web 18:46 Taller: Creando la componente Operation.tsx 21:34 Definición de Props: El contrato de atributos del componente 23:39 Interfaces en TypeScript: Atributos y métodos obligatorios 28:30 Uso de la componente: Creando la página de prueba Suma.tsx 31:08 Configuración de rutas e importación en el archivo Index 37:26 Funciones Lambda y paso por referencia en componentes 40:00 Ejemplo de reutilización: Usando la misma componente para Restar 43:11 Aplicación real: Analizando componentes en plataformas reales 52:53 Introducción al desarrollo de la Tabla Genérica 56:21 Estructura técnica: Definición de columnas, data y acciones 1:04:12 El prop de acciones: Configurando botones dinámicos 1:08:27 Refactorización y eliminación de deuda técnica 1:12:01 Recorriendo columnas y data con ciclos .map() anidados 1:16:56 Renderizado de botones y captura del evento OnAction 1:21:01 Programación en la página: El controlador HandleAction 1:28:21 Teoría avanzada: Principios de Cohesión y Acoplamiento 1:30:31 Reto de la semana y cierre de la sesión 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=kkP_WVQeHcQ • Video Siguiente: ¡Próximamente disponible! 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • FRONTEND CLASE 7 (INTRO REACT): https://www.youtube.com/watch?v=7spPVt3T6LA • FRONTEND CLASE 5 (DOM): https://www.youtube.com/watch?v=O9ITvXqYsZQ #Frontend #ReactJS #AtomicDesign #Componentes #JavaScript #DesarrolloWeb #Programacion #IngeSRM #WebDevelopment #Coding #TypeScript 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, proyectos con react, desarrollo de aplicaciones web, interfaces de usuario, diseño de interface