GUÍA DE ESTUDIO: Vue.

js, Tailwind CSS y AG Grid

Material de Refuerzo para Examen - Conceptos Básicos y Errores Comunes

🎯 JAVASCRIPT MODERNO: FUNDAMENTOS ESENCIALES

🤔 RAZÓN DE SER: ¿Por qué existe JavaScript moderno?
PROBLEMA que resuelve: Las versiones antiguas de JavaScript tenían "agujeros de seguridad" en el
código que causaban bugs impredecibles y difíciles de encontrar.

SOLUCIÓN que aporta: JavaScript moderno (ES6+) introduce herramientas que hacen el código más
seguro, predecible y fácil de mantener.

ANALOGÍA: Es como evolucionar de cerraduras simples (inseguras) a sistemas de seguridad modernos

(seguros y confiables).

Variables Modernas: let, const vs var

📖 DEFINICIÓN DETALLADA:
🔸 VARIABLE:
●​ QUÉ ES: Un "contenedor" con nombre donde guardas información (números, texto, objetos)
●​ PARA QUÉ: Almacenar datos que tu programa puede usar y modificar
●​ EJEMPLO: let edad = 25 → creas una caja llamada "edad" que contiene el número 25

🔸 SCOPE (ÁMBITO):
●​ QUÉ ES: El "territorio" o zona del código donde una variable puede ser accedida
●​ PARA QUÉ: Controlar dónde y cuándo se pueden usar las variables
●​ TIPOS:
○​ Scope de función: Variable existe en toda la función (peligroso)
○​ Scope de bloque: Variable existe solo entre llaves {} (seguro)
🔸 VAR (método antiguo):
●​ QUÉ ES: Palabra clave para declarar variables con scope de función
●​ PROBLEMA: La variable puede "escaparse" del bloque donde la creaste
●​ POR QUÉ es malo: Causa bugs impredecibles
●​ EJEMPLO DEL PROBLEMA:

if (true) {
var mensaje = "Hola"; // Se declara dentro del if
}
console.log(mensaje); // ¡Funciona! Pero no debería (se escapó del if)

🔸 LET:
●​ QUÉ ES: Palabra clave moderna para variables que pueden cambiar
●​ PARA QUÉ: Declarar variables que van a ser modificadas después
●​ VENTAJA: Scope de bloque (se queda donde la pones)
●​ EJEMPLO:

let contador = 0; // Puedo declarar

contador = 5; // Puedo cambiar el valor
contador++; // Puedo modificar

🔸 CONST:
●​ QUÉ ES: Palabra clave para variables que NO deben cambiar de valor
●​ PARA QUÉ: Declarar valores que permanecen constantes
●​ IMPORTANTE: No se puede reasignar, pero el contenido de objetos SÍ se puede modificar
●​ EJEMPLO:

// ✅ Válido
❌ Error: no se puede cambiar
const PI = 3.1416;
// PI = 3.14; //

const persona = {edad: 25}; // ✅ Válido

// ✅ Válido: cambio el contenido
// ❌ Error: no puedo reasignar la variable
persona.edad = 26;
// persona = {};
🎯 RAZÓN DE SER:
●​ PROBLEMA: var tiene scope de función - la variable puede "escaparse" de donde la definiste
●​ SOLUCIÓN: let y const tienen scope de bloque - la variable se queda donde la pones
●​ PARA QUÉ: Evitar bugs causados por variables que aparecen donde no deberían

ANALOGÍA:

●​ var = Fantasma que puede aparecer en cualquier habitación de la casa

●​ let/const = Persona que se queda en su habitación asignada

❌
// PROBLEMA CON VAR
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // Imprime: 3, 3, 3
}

✅
// SOLUCIÓN CON LET
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // Imprime: 0, 1, 2
}

🚨 Error común: Confundir que const hace todo inmutable

✅
const persona = {nombre: "Ana"};

❌
persona.nombre = "Luis"; // VÁLIDO - modifica contenido
persona = {nombre: "Carlos"}; // ERROR - no se puede reasignar
Funciones Flecha: Sintaxis y Contexto

🎯 RAZÓN DE SER:
●​ PROBLEMA: Las funciones tradicionales cambian su identidad (this) según dónde se ejecuten
●​ SOLUCIÓN: Las funciones flecha mantienen la identidad (this) de donde nacieron
●​ PARA QUÉ: Escribir menos código y evitar confusión con el contexto

ANALOGÍA:

●​ Función tradicional = Actor que interpreta diferentes personajes según la obra

●​ Función flecha = Persona que mantiene su identidad sin importar dónde esté

POR QUÉ importa el contexto:

//✅ Función flecha para callbacks

const numeros = [1, 2, 3];
const dobles = numeros.map(n => n * 2);

//✅ Función tradicional para métodos de objetos

const objeto = {
nombre: "Vue",
saludar() { return this.nombre; } // Necesita su propio 'this'
};

🚨 Error común: Usar función flecha como método de objeto

// ❌ PROBLEMA
const obj = {
nombre: "Vue",
saludar: () => this.nombre // undefined - no tiene 'this' propio
};
Métodos de Array: map(), filter(), reduce()

🎯 RAZÓN DE SER:
●​ PROBLEMA: Manipular arrays con bucles tradicionales es verboso y propenso a errores
●​ SOLUCIÓN: Métodos especializados que expresan claramente la intención
●​ PARA QUÉ: Código más legible, menos bugs, y pensamiento funcional

ANALOGÍA: Como herramientas de cocina especializadas:

●​ map() = Cortador que transforma cada ingrediente (mantiene cantidad)

●​ filter() = Colador que solo deja pasar lo que necesitas
●​ reduce() = Licuadora que combina todo en una sola cosa

POR QUÉ son importantes:

●​ Inmutabilidad: No modifican el array original (como hacer fotocopias en lugar de escribir sobre
el original)
●​ Expresividad: El nombre del método dice exactamente qué hace
●​ Composición: Se pueden encadenar para operaciones complejas

const estudiantes = [
{nombre: "Ana", nota: 95},
{nombre: "Luis", nota: 70},
{nombre: "María", nota: 85}
];

// MAP: Extraer solo los nombres

const nombres = estudiantes.map(e => e.nombre);
// Resultado: ["Ana", "Luis", "María"]

// FILTER: Solo estudiantes aprobados

const aprobados = estudiantes.filter(e => e.nota >= 80);
// Resultado: [{nombre: "Ana", nota: 95}, {nombre: "María", nota: 85}]

// REDUCE: Calcular promedio

const promedio = estudiantes.reduce((suma, e) => suma + e.nota, 0) / estudiantes.length;
// Resultado: 83.33

🚨 Error común: Olvidar return en funciones con llaves

// ❌ PROBLEMA
const dobles = numeros.map(n => { n * 2 }); // [undefined, undefined, undefined]

✅
// SOLUCIÓN
const dobles = numeros.map(n => n * 2); // [2, 4, 6]
🎯 VUE.JS: FRAMEWORK REACTIVO
🤔 RAZÓN DE SER: ¿Por qué existe Vue.js?
PROBLEMA que resuelve: Manipular el DOM directamente (como jQuery) es tedioso, propenso a
errores, y difícil de mantener. Cada cambio en los datos requiere múltiples líneas de código para
actualizar la interfaz.

SOLUCIÓN que aporta: Vue.js hace que la interfaz se actualice automáticamente cuando cambian los
datos. Es declarativo: describes QUÉ quieres, no CÓMO lograrlo.

PARA QUÉ: Desarrollo más rápido, menos bugs, código más mantenible.

ANALOGÍA: Es como tener un asistente personal que actualiza toda tu casa automáticamente cuando
cambias de opinión, en lugar de que tengas que ir habitación por habitación haciendo cambios
manualmente.
Reactividad: El Superpoder de Vue

🎯 RAZÓN DE SER:
●​ PROBLEMA: En JavaScript vanilla, cuando cambias un dato tienes que manualmente actualizar
todos los lugares donde aparece en la interfaz
●​ SOLUCIÓN: Vue observa los datos y actualiza automáticamente todos los lugares donde se
usan
●​ PARA QUÉ: Eliminar la sincronización manual entre datos e interfaz

ANALOGÍA: Como un espejo mágico - cuando te mueves, automáticamente refleja todos tus
movimientos sin que tengas que decirle qué hacer.

POR QUÉ es revolucionario: Cambias el paradigma de "manipular DOM" a "cambiar datos"

<template>
<div>
<h1>{{ titulo }}</h1>
<button @click="contador++">
Clicks: {{ contador }}
</button>
</div>
</template>

<script>
export default {
data() {
return {
titulo: "Mi App Vue",
contador: 0
}
}
}
</script>

🚨 Error común: Intentar manipular el DOM directamente

// ❌ PROBLEMA (pensamiento jQuery)
mounted() {
this.$el.querySelector('p').textContent = "Nuevo texto";
}

//✅ SOLUCIÓN (pensamiento Vue)

mounted() {
this.mensaje = "Nuevo texto"; // Vue actualiza el DOM automáticamente
}
Directivas: Comandos Mágicos para HTML

📖 DEFINICIÓN DETALLADA:
🔸 DIRECTIVA:
●​ QUÉ ES: Atributos especiales que empiezan con v- que le dan "superpoderes" al HTML
●​ PARA QUÉ: Conectar HTML estático con JavaScript dinámico
●​ CÓMO FUNCIONA: Vue las reconoce y ejecuta código JavaScript cuando las encuentra
●​ EJEMPLO: <p v-if="mostrar">Texto</p> → Vue evalúa la variable mostrar y decide si
mostrar el párrafo

🔸 v-model (ENLACE BIDIRECCIONAL):

●​ QUÉ ES: Directiva que sincroniza automáticamente un input con una variable
●​ PARA QUÉ: No tener que escribir código para capturar lo que escribe el usuario
●​ CÓMO FUNCIONA:
○​ Cuando el usuario escribe → actualiza la variable
○​ Cuando cambias la variable → actualiza el input
●​ EJEMPLO:

<input v-model="mensaje"> <!-- El input está conectado a 'mensaje' -->

<p>{{ mensaje }}</p> <!-- Se actualiza automáticamente -->

●​ SIN v-model (la forma difícil):

// Tendrías que escribir esto manualmente:

input.addEventListener('input', (e) => {
this.mensaje = e.target.value;
});

🔸 v-if (RENDERIZADO CONDICIONAL - DOM):

●​ QUÉ ES: Directiva que añade o quita elementos del DOM completamente
●​ PARA QUÉ: Mostrar contenido solo cuando se cumple una condición
●​ IMPORTANTE: Destruye y recrea el elemento cada vez
●​ CUÁNDO USAR: Para contenido que se muestra raramente
●​ EJEMPLO:

<div v-if="usuario.esAdmin">
<p>Panel de administrador</p> <!-- Solo existe si es admin -->
</div>
🔸 v-show (RENDERIZADO CONDICIONAL - CSS):
●​ QUÉ ES: Directiva que oculta elementos con CSS (display: none)
●​ PARA QUÉ: Mostrar/ocultar contenido sin destruir el elemento
●​ IMPORTANTE: El elemento siempre existe en el DOM, solo se oculta
●​ CUÁNDO USAR: Para contenido que se muestra/oculta frecuentemente
●​ EJEMPLO:

<div v-show="menuAbierto">
<p>Contenido del menú</p> <!-- Siempre existe, solo se oculta -->
</div>

🔸 v-for (BUCLE DECLARATIVO):

●​ QUÉ ES: Directiva que repite un elemento por cada item en una lista
●​ PARA QUÉ: Crear listas dinámicas sin escribir bucles manuales
●​ IMPORTANTE: Necesita :key único para funcionar correctamente
●​ EJEMPLO:

<ul>
<li v-for="producto in productos" :key="producto.id">
{{ producto.nombre }} - ${{ producto.precio }}
</li>
</ul>

🔸 :key (IDENTIFICADOR ÚNICO):

●​ QUÉ ES: Atributo especial que identifica únicamente cada elemento en v-for
●​ PARA QUÉ: Ayudar a Vue a distinguir entre elementos cuando la lista cambia
●​ POR QUÉ es crítico: Sin key, Vue se confunde y puede mostrar datos incorrectos
●​ DEBE SER: Un valor único (como ID, no índice del array)

🔸 @click (MANEJO DE EVENTOS):

●​ QUÉ ES: Abreviación de v-on:click para manejar clicks
●​ PARA QUÉ: Ejecutar código JavaScript cuando el usuario hace click
●​ VENTAJA: Más limpio que addEventListener
●​ EJEMPLO:

<button @click="contador++">Incrementar</button>
<button @click="miFuncion">Ejecutar función</button>
🔸 :class y :style (ATRIBUTOS DINÁMICOS):
●​ QUÉ ES: Forma de hacer que las clases CSS y estilos cambien según los datos
●​ PARA QUÉ: Interfaces que reaccionan visualmente a los cambios de estado
●​ EJEMPLO:

<div :class="{ activo: estaActivo, error: hayError }">

<div :style="{ color: colorTexto, fontSize: tamanoTexto + 'px' }">

🎯 RAZÓN DE SER:
●​ PROBLEMA: HTML estático no puede reaccionar a cambios de datos o eventos del usuario
●​ SOLUCIÓN: Las directivas conectan HTML con JavaScript de forma declarativa
●​ PARA QUÉ: Hacer que el HTML "cobre vida" y reaccione a los datos

ANALOGÍA: Como comandos mágicos que transforman HTML aburrido en una interfaz interactiva

POR QUÉ cada directiva existe:

Directiva PROBLEMA que resuelve PARA QUÉ

v-model Sincronizar input con variable manualmente Enlace automático bidireccional

v-if Mostrar/ocultar con JavaScript verboso Renderizado condicional simple

v-show Cambiar visibilidad sin afectar rendimiento Ocultar sin destruir elemento

v-for Crear listas con bucles manuales Generar elementos automáticamente

@click addEventListener verboso Manejar eventos de forma declarativa

<template>
<!-- Enlace bidireccional -->
<input v-model="mensaje" placeholder="Escribe algo">

<!-- Renderizado condicional -->

<p v-if="mostrar">Aparece/desaparece del HTML</p>
<p v-show="visible">Se oculta con CSS</p>

<!-- Lista dinámica -->

<ul>
<li v-for="item in lista" :key="item.id">
{{ item.nombre }}
</li>
</ul>
</template>
🚨 Error crítico: Olvidar :key en v-for
<!-- ❌ PROBLEMA -->
<li v-for="item in lista">{{ item.nombre }}</li>

<!--✅ SOLUCIÓN -->

<li v-for="item in lista" :key="item.id">{{ item.nombre }}</li>

¿Por qué es importante :key? Sin key único, Vue no puede distinguir entre elementos cuando la lista
cambia. Es como intentar organizar personas idénticas en una fila.

Componentes y Props: Arquitectura Modular

📖 DEFINICIÓN DETALLADA:
🔸 COMPONENTE:
●​ QUÉ ES: Un bloque reutilizable de interfaz que incluye HTML, CSS y JavaScript juntos
●​ PARA QUÉ: Dividir aplicaciones grandes en piezas pequeñas y manejables
●​ CÓMO FUNCIONA: Como una "función" pero para interfaz de usuario
●​ EJEMPLO: Un componente <BotonPrimario> se puede usar en toda la aplicación
●​ VENTAJAS:
○​ Reutilización: Escribes una vez, usas en muchos lugares
○​ Mantenimiento: Cambias en un lugar, se actualiza en todos lados
○​ Organización: Cada pieza tiene su responsabilidad específica

🔸 PROPS (PROPIEDADES):
●​ QUÉ ES: Datos que un componente padre envía a un componente hijo
●​ PARA QUÉ: Comunicar información de arriba hacia abajo en la jerarquía
●​ CÓMO FUNCIONA: Como parámetros de una función, pero para componentes
●​ IMPORTANTE: Son de solo lectura (inmutables) para el componente hijo
●​ EJEMPLO:

<!-- Componente Padre -->

<BotonPrimario texto="Guardar" color="azul" :habilitado="true" />

<!-- Componente Hijo recibe los props -->

<script setup>
const props = defineProps(['texto', 'color', 'habilitado']);
</script>
🔸 EMIT (EMITIR EVENTOS):
●​ QUÉ ES: Forma en que un componente hijo envía información al componente padre
●​ PARA QUÉ: Comunicar de abajo hacia arriba cuando algo importante sucede
●​ CÓMO FUNCIONA: Como eventos del DOM, pero personalizados
●​ EJEMPLO:

<!-- Componente Hijo -->

<script setup>
const emit = defineEmits(['guardar', 'cancelar']);

const manejarClick = () => {

emit('guardar', { datos: 'información importante' });
};
</script>

<!-- Componente Padre escucha -->

<BotonPrimario @guardar="procesarGuardado" />

🔸 COMPONENTE PADRE:
●​ QUÉ ES: Componente que contiene y controla otros componentes
●​ RESPONSABILIDAD: Coordinar la comunicación entre componentes hijos
●​ ANALOGÍA: Como un director de orquesta que coordina a todos los músicos

🔸 COMPONENTE HIJO:
●​ QUÉ ES: Componente que está contenido dentro de otro componente
●​ RESPONSABILIDAD: Realizar una tarea específica con los datos que recibe
●​ ANALOGÍA: Como un músico especialista que toca su instrumento según las indicaciones

🔸 FLUJO UNIDIRECCIONAL DE DATOS:

●​ QUÉ ES: Principio donde los datos siempre fluyen de padre a hijo (nunca al revés)
●​ PARA QUÉ: Mantener la aplicación predecible y fácil de depurar
●​ CÓMO FUNCIONA:
○​ Padre → Hijo: Props (datos)
○​ Hijo → Padre: Events (notificaciones)
●​ POR QUÉ es importante: Evita que los componentes se modifiquen entre sí caóticamente
🔸 defineProps():
●​ QUÉ ES: Función de Vue 3 para declarar qué props acepta un componente
●​ PARA QUÉ: Documentar y validar los datos que espera recibir el componente
●​ EJEMPLO:

<script setup>
// Forma simple
const props = defineProps(['nombre', 'edad']);

// Forma con validación

const props = defineProps({
nombre: String,
edad: Number,
activo: { type: Boolean, default: false }
});
</script>
🔸 defineEmits():
●​ QUÉ ES: Función de Vue 3 para declarar qué eventos puede emitir un componente
●​ PARA QUÉ: Documentar las formas de comunicación del componente con su padre
●​ EJEMPLO:

<script setup>
const emit = defineEmits(['guardar', 'cancelar', 'actualizar']);

// Emitir un evento
emit('guardar', { id: 123, nombre: 'Juan' });
</script>

🎯 RAZÓN DE SER:
●​ PROBLEMA: Aplicaciones grandes se vuelven inmanejables si todo está en un solo archivo
●​ SOLUCIÓN: Dividir la interfaz en piezas pequeñas, reutilizables y especializadas
●​ PARA QUÉ: Código organizado, reutilizable y fácil de mantener en equipo

ANALOGÍA: Como una empresa bien organizada donde cada empleado tiene una especialidad

POR QUÉ la comunicación Props/Emits:

●​ Props (hacia abajo): El jefe da instrucciones claras a los empleados

●​ Emits (hacia arriba): Los empleados reportan resultados al jefe
●​ Unidireccional: Mantiene orden jerárquico (como organigrama empresarial)

PARA QUÉ esta arquitectura:

●​ Reutilización: Un componente botón se usa en toda la aplicación

●​ Mantenimiento: Cambiar el botón en un lugar lo cambia en todos lados
●​ Colaboración: Diferentes desarrolladores pueden trabajar en diferentes componentes

<!-- Componente Padre -->

<template>
<hijo-componente
:datos="informacion"
@respuesta="manejarRespuesta"
/>
</template>

<!-- Componente Hijo -->

<template>
<div>
<p>{{ props.datos.mensaje }}</p>
<button @click="enviarRespuesta">Responder</button>
</div>
</template>
<script setup>
// Props: instrucciones del jefe
const props = defineProps(['datos']);

// Emits: reportes al jefe

const emit = defineEmits(['respuesta']);

const enviarRespuesta = () => {

emit('respuesta', 'Mensaje del hijo');
};
</script>

🚨 Error común: Mutar props directamente

// ❌ PROBLEMA
const incrementar = () => {
props.contador++; // ¡Prohibido! Es reescribir órdenes del jefe
};

//✅ SOLUCIÓN
const incrementar = () => {
emit('incrementar'); // Reportar al jefe para que decida
};
🎯 TAILWIND CSS: DISEÑO UTILITARIO
🤔 RAZÓN DE SER: ¿Por qué existe Tailwind CSS?
PROBLEMA que resuelve:

●​ CSS tradicional genera archivos gigantes llenos de estilos que nunca se usan
●​ Crear nombres de clases CSS es difícil y causa inconsistencias
●​ Mantener estilos consistentes en equipos grandes es complicado

SOLUCIÓN que aporta:

●​ Sistema de clases predefinidas con nombres claros y consistentes

●​ Solo incluye los estilos que realmente usas (tree-shaking)
●​ Garantiza consistencia en toda la aplicación

PARA QUÉ: Desarrollo más rápido, archivos más pequeños, diseños consistentes

ANALOGÍA: Como tener un kit de LEGO profesional donde cada pieza tiene un propósito específico y se
puede combinar infinitamente

Filosofía Utility-First

📖 DEFINICIÓN DETALLADA:
🔸 UTILITY-FIRST (UTILITARIO PRIMERO):
●​ QUÉ ES: Filosofía de diseño donde usas muchas clases pequeñas y específicas en lugar de
escribir CSS personalizado
●​ PARA QUÉ: Acelerar el desarrollo y garantizar consistencia
●​ CÓMO FUNCIONA: Cada clase hace UNA cosa específica (como p-4 = padding de 16px)
●​ EJEMPLO:

<!-- Estilo tradicional -->

<div class="mi-tarjeta-personalizada"></div>
<style>
.mi-tarjeta-personalizada {
background-color: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>

<!-- Estilo Utility-First -->

<div class="bg-white p-6 rounded-lg shadow-md"></div>
🔸 CLASE UTILITARIA:
●​ QUÉ ES: Una clase CSS que hace exactamente una cosa específica
●​ PARA QUÉ: Combinar múltiples efectos simples para crear diseños complejos
●​ EJEMPLOS:
○​ p-4 → padding: 16px
○​ bg-blue-500 → background-color: #3b82f6
○​ text-xl → font-size: 1.25rem
○​ rounded → border-radius: 0.25rem

🔸 SISTEMA DE ESPACIADO:
●​ QUÉ ES: Escala predefinida de valores para márgenes y paddings
●​ PARA QUÉ: Garantizar espaciado consistente en toda la aplicación
●​ CÓMO FUNCIONA: Múltiplos de 4px (sistema de 8pt grid)
●​ EJEMPLOS:
○​ p-1 = 4px
○​ p-2 = 8px
○​ p-4 = 16px
○​ p-6 = 24px
○​ p-8 = 32px

🔸 PALETA DE COLORES:
●​ QUÉ ES: Sistema organizado de colores con nombres consistentes
●​ PARA QUÉ: Usar colores coherentes sin inventar nuevos
●​ ESTRUCTURA: {color}-{intensidad}
●​ EJEMPLOS:
○​ blue-100 → azul muy claro
○​ blue-500 → azul medio (por defecto)
○​ blue-900 → azul muy oscuro

🔸 BREAKPOINTS (PUNTOS DE QUIEBRE):

●​ QUÉ ES: Puntos donde el diseño cambia según el tamaño de pantalla
●​ PARA QUÉ: Crear diseños que se adapten a móvil, tablet y desktop
●​ VALORES:
○​ sm: → ≥640px (móvil grande)
○​ md: → ≥768px (tablet)
○​ lg: → ≥1024px (laptop)
○​ xl: → ≥1280px (desktop)

🔸 MOBILE-FIRST:
●​ QUÉ ES: Enfoque donde diseñas primero para móvil, luego añades estilos para pantallas más
grandes
●​ PARA QUÉ: Garantizar que la aplicación funcione bien en móviles
 ●​ CÓMO FUNCIONA:
○​ Clases sin prefijo → aplican a móvil y hacia arriba
○​ Clases con prefijo → aplican solo a pantallas más grandes
●​ EJEMPLO:

<!-- 1 columna en móvil, 2 en tablet, 3 en desktop -->

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

🔸 TREE-SHAKING:
●​ QUÉ ES: Proceso que elimina automáticamente el CSS que no usas
●​ PARA QUÉ: Archivos finales más pequeños y páginas más rápidas
●​ CÓMO FUNCIONA: Tailwind escanea tu código y solo incluye las clases que realmente usas

POR QUÉ funciona:

●​ Predicibilidad: p-4 siempre significa lo mismo en cualquier proyecto

●​ Reutilización: Las mismas clases sirven para diferentes componentes
●​ Consistencia: El sistema de diseño está garantizado

ANALOGÍA: Como usar piezas de LEGO estándar en lugar de tallar cada pieza desde cero

<!-- Diseño responsive -->

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Tarjeta con clases utilitarias -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Título</h3>
<p class="text-gray-600">Contenido</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
Acción
</button>
</div>
</div>

Sistema de Diseño Consistente

¿Por qué es importante la consistencia? Con Tailwind no tienes que recordar si usaste margin:
12px o margin: 16px en otro lugar. El sistema garantiza consistencia.

Concepto Propósito Ejemplo

Spacing Scale Espaciado consistente p-4, m-6, pt-8

Color Palette Colores organizados bg-blue-500,

text-gray-800
 Breakpoints Diseño responsive sm:, md:, lg:, xl:

🚨 Error común: No entender mobile-first

<!-- ❌ PROBLEMA -->
<div class="lg:text-lg text-base"> <!-- Aplica large primero -->

<!--✅ SOLUCIÓN -->

<div class="text-base lg:text-lg"> <!-- Base para móvil, large para desktop -->

Responsive Design

¿Cómo funciona mobile-first? Las clases sin prefijo aplican a móvil y hacia arriba. Los prefijos (md:,
lg:) aplican a pantallas más grandes.

<!-- 1 columna en móvil, 2 en tablet, 4 en desktop -->

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

🎯 AG GRID: TABLAS PROFESIONALES

🤔 RAZÓN DE SER: ¿Por qué existe AG Grid?
PROBLEMA que resuelve:

●​ HTML <table> básico no puede manejar grandes cantidades de datos

●​ Implementar funciones como ordenamiento, filtrado y paginación desde cero es complejo
●​ Tablas simples no ofrecen buena experiencia de usuario

SOLUCIÓN que aporta:

●​ Virtualización: Solo renderiza filas visibles (maneja millones de datos)

●​ Funcionalidades avanzadas listas para usar
●​ API consistente y configurable

PARA QUÉ: Crear interfaces de datos profesionales sin reinventar la rueda

ANALOGÍA: Como tener un bibliotecario súper eficiente que puede organizar, filtrar y presentar millones
de libros instantáneamente

Configuración Básica

📖 DEFINICIÓN DETALLADA:
🔸 columnDefs (DEFINICIONES DE COLUMNA):
 ●​ QUÉ ES: Array de objetos que define cómo se comporta cada columna de la tabla
●​ PARA QUÉ: Configurar qué datos mostrar y cómo mostrarlos
●​ ESTRUCTURA BÁSICA:

const columnDefs = [
{
headerName: 'País', // Título visible para el usuario
field: 'nombre', // Propiedad del objeto de datos
sortable: true, // Permite ordenar haciendo clic
filter: true, // Permite filtrar los datos
width: 200 // Ancho de la columna en pixels
}
];

🔸 field (CAMPO):
●​ QUÉ ES: Nombre de la propiedad del objeto que se mostrará en esa columna
●​ PARA QUÉ: Conectar los datos del array con las columnas de la tabla
●​ IMPORTANTE: Debe coincidir exactamente con el nombre de la propiedad
●​ EJEMPLO:

// Si tus datos son:

const datos = [
{ nombre: 'España', poblacion: 47000000 },
{ nombre: 'Francia', poblacion: 67000000 }
];

✅ Correcto
// El field debe ser:

❌ Incorrecto - no existe esa propiedad

{ field: 'nombre' } //
{ field: 'country' } //

🔸 headerName (NOMBRE DE CABECERA):

●​ QUÉ ES: El texto que aparece en la cabecera de la columna (lo que ve el usuario)
●​ PARA QUÉ: Etiquetar la columna de forma comprensible para el usuario
●​ DIFERENCIA con field: field es técnico (para código), headerName es para humanos

🔸 valueFormatter (FORMATEADOR DE VALORES):

●​ QUÉ ES: Función que transforma cómo se muestra un valor sin cambiar el dato original
●​ PARA QUÉ: Presentar datos de forma más legible (fechas, números, monedas)
●​ IMPORTANTE: Solo cambia la presentación, no los datos reales
●​ EJEMPLO:

{
field: 'poblacion',
valueFormatter: params => {
 return params.value.toLocaleString(); // 47000000 → "47,000,000"
}
}

🔸 cellRenderer (RENDERIZADOR DE CELDA):

●​ QUÉ ES: Función que define completamente el contenido HTML de cada celda
●​ PARA QUÉ: Crear contenido personalizado (imágenes, botones, enlaces)
●​ DIFERENCIA con valueFormatter: Puede devolver HTML complejo, no solo texto
●​ EJEMPLO:

{
field: 'bandera',
cellRenderer: params => {
return `<img src="${params.value}" width="30" height="20">`;
}
}

🔸 rowData (DATOS DE FILAS):

●​ QUÉ ES: Array de objetos que contiene todos los datos que se mostrarán en la tabla
●​ PARA QUÉ: Proporcionar la información que AG Grid va a mostrar
●​ ESTRUCTURA:

const rowData = [
{ id: 1, nombre: 'España', poblacion: 47000000, bandera: 'spain.png' },
{ id: 2, nombre: 'Francia', poblacion: 67000000, bandera: 'france.png' }
];

🔸 gridOptions (OPCIONES DE LA GRILLA):

●​ QUÉ ES: Objeto de configuración principal que combina todas las configuraciones
●​ PARA QUÉ: Centralizar toda la configuración de AG Grid en un solo lugar
●​ EJEMPLO:

const gridOptions = {
columnDefs: columnDefs, // Configuración de columnas
rowData: datos, // Los datos a mostrar
pagination: true, // Activar paginación
paginationPageSize: 20, // 20 filas por página
defaultColDef: { // Configuración por defecto para todas las columnas
sortable: true,
filter: true,
resizable: true
}
};
🔸 PAGINATION (PAGINACIÓN):
●​ QUÉ ES: Función que divide los datos en páginas más pequeñas
●​ PARA QUÉ: Manejar grandes cantidades de datos sin afectar el rendimiento
●​ VENTAJAS:
○​ Mejora velocidad de carga
○​ Mejor experiencia de usuario
○​ Reduce uso de memoria

🔸 VIRTUALIZACIÓN:
●​ QUÉ ES: Técnica que solo renderiza las filas visibles en pantalla
●​ PARA QUÉ: Manejar millones de filas sin problemas de rendimiento
●​ CÓMO FUNCIONA: AG Grid crea/destruye elementos DOM según necesidad
●​ ANALOGÍA: Como una biblioteca infinita que solo materializa los libros que puedes ver

🎯 RAZÓN DE SER de cada concepto:

Concepto PROBLEMA que resuelve PARA QUÉ

columnDefs Configurar cada columna manualmente Definir comportamiento de forma

declarativa

field Conectar datos con columnas Mapear propiedades del objeto a

columnas

valueFormatter Mostrar datos en formato crudo Presentar datos de forma legible al

usuario

cellRenderer Limitaciones de texto plano Crear contenido HTML personalizado

pagination Renderizar miles de filas causa lentitud Dividir datos para mejor rendimiento

virtualización DOM se vuelve lento con muchos Solo crear elementos visibles
elementos
POR QUÉ la configuración declarativa: En lugar de manipular la tabla con JavaScript imperativo,
describes CÓMO debe comportarse cada columnaName: 'País', // Lo que ve el usuario field: 'nombre', //
Propiedad del objeto sortable: true, // Se puede ordenar filter: true // Se puede filtrar }, { headerName:
'Población', field: 'poblacion', valueFormatter: params => params.value.toLocaleString() // Formato de
números } ];

const gridOptions = { columnDefs: columnDefs, rowData: paises, // Array de datos pagination: true, //
Dividir en páginas paginationPageSize: 20 // 20 filas por página };

### **Conceptos Clave**

🎯 RAZÓN DE SER de cada concepto:**

**

| Concepto | PROBLEMA que resuelve | PARA QUÉ |

|----------|----------------------|----------|
| **columnDefs** | Configurar cada columna manualmente | Definir comportamiento de forma declarativa |
| **field** | Conectar datos con columnas | Mapear propiedades del objeto a columnas |
| **valueFormatter** | Mostrar datos en formato crudo | Presentar datos de forma legible al usuario |
| **cellRenderer** | Limitaciones de texto plano | Crear contenido HTML personalizado |
| **pagination** | Renderizar miles de filas causa lentitud | Dividir datos para mejor rendimiento |
| **virtualización** | DOM se vuelve lento con muchos elementos | Solo crear elementos visibles |

**POR QUÉ la configuración declarativa:**

En lugar de manipular la tabla con JavaScript imperativo, describes CÓMO debe comportarse cada
columna

🚨
** Error común:** Field no coincide con propiedad

❌
```javascript
// PROBLEMA
const columnDefs = [
{ field: 'nombre', headerName: 'País' } // Busca 'nombre'
];
const data = [{name: 'España'}]; // Pero se llama 'name'

// ✅ SOLUCIÓN
const columnDefs = [
{ field: 'name', headerName: 'País' } // Coincide con propiedad real
];
🎯 MANEJO DE APIs: COMUNICACIÓN EXTERNA
🤔 RAZÓN DE SER: ¿Por qué es crítico el manejo profesional de APIs?
PROBLEMA que resuelve:

●​ Las conexiones de red pueden fallar en cualquier momento

●​ Los usuarios necesitan saber qué está pasando (loading, error, éxito)
●​ Las APIs pueden cambiar formato o devolver datos inesperados
●​ Operaciones asíncronas pueden crear memory leaks

SOLUCIÓN que aporta:

●​ Manejo defensivo de errores

●​ Estados de interfaz claros para el usuario
●​ Validación y transformación de datos
●​ Cancelación de operaciones cuando sea necesario

PARA QUÉ: Crear aplicaciones robustas que no se rompan en el mundo real

ANALOGÍA: Como ser un diplomático experto que gestiona comunicación internacional con protocolos
claros, manejo de malentendidos, y planes de contingencia

Estados Esenciales

📖 DEFINICIÓN DETALLADA:
🔸 API (APPLICATION PROGRAMMING INTERFACE):
●​ QUÉ ES: Interfaz que permite que dos aplicaciones se comuniquen entre sí
●​ PARA QUÉ: Obtener datos de servicios externos (como bases de datos en otros servidores)
●​ ANALOGÍA: Como un mesero en un restaurante que toma tu pedido y te trae la comida, pero tú
no entras a la cocina
●​ EJEMPLO: Tu app pide datos de países a https://restcountries.com/v3.1/all
🔸 HTTP REQUEST (PETICIÓN HTTP):
●​ QUÉ ES: Mensaje que tu aplicación envía a un servidor pidiendo algo
●​ PARA QUÉ: Solicitar datos, enviar información, actualizar o eliminar datos
●​ TIPOS PRINCIPALES:
○​ GET → Pedir datos (leer)
○​ POST → Enviar datos nuevos (crear)
○​ PUT → Actualizar datos existentes
○​ DELETE → Eliminar datos
●​ EJEMPLO:

fetch('https://api.ejemplo.com/usuarios', {
method: 'GET', // Tipo de petición
headers: { 'Content-Type': 'application/json' }
})

🔸 HTTP RESPONSE (RESPUESTA HTTP):

●​ QUÉ ES: Mensaje que el servidor envía de vuelta con la información solicitada
●​ PARA QUÉ: Recibir los datos pedidos o confirmación de una operación
●​ CONTIENE:
○​ Status code: Código que indica si fue exitoso (200, 404, 500, etc.)
○​ Headers: Información adicional sobre la respuesta
○​ Body: Los datos reales (JSON, HTML, etc.)

🔸 STATUS CODE (CÓDIGO DE ESTADO):

●​ QUÉ ES: Número de 3 dígitos que indica el resultado de la petición
●​ PARA QUÉ: Saber si la operación fue exitosa o qué tipo de error ocurrió
●​ CÓDIGOS IMPORTANTES:
○​ 200 → OK (éxito)
○​ 201 → Created (creado exitosamente)
○​ 400 → Bad Request (petición mal formada)
○​ 401 → Unauthorized (no autorizado)
○​ 404 → Not Found (no encontrado)
○​ 500 → Internal Server Error (error del servidor)

🔸 JSON (JAVASCRIPT OBJECT NOTATION):

●​ QUÉ ES: Formato de texto para intercambiar datos entre aplicaciones
●​ PARA QUÉ: Enviar y recibir información estructurada de forma estándar
●​ VENTAJAS: Fácil de leer para humanos, fácil de procesar para máquinas
●​ EJEMPLO:

{
"nombre": "España",
"poblacion": 47000000,
"capital": "Madrid",
"idiomas": ["español"]
}
🔸 ASYNC/AWAIT:
●​ QUÉ ES: Forma moderna de escribir código que espera respuestas sin bloquear la aplicación
●​ PARA QUÉ: Manejar operaciones que toman tiempo (como llamadas a APIs) de forma legible
●​ POR QUÉ es importante: Las peticiones de red toman tiempo impredecible
●​ EJEMPLO:

// Sin async/await (difícil de leer)

fetch('/api/datos')
.then(response => response.json())
.then(datos => console.log(datos))
.catch(error => console.error(error));

// Con async/await (más claro)

async function obtenerDatos() {
try {
const response = await fetch('/api/datos');
const datos = await response.json();
console.log(datos);
} catch (error) {
console.error(error);
}
}

🔸 PROMISE (PROMESA):
●​ QUÉ ES: Objeto que representa una operación asíncrona que eventualmente se completará
●​ PARA QUÉ: Manejar operaciones que no sabemos cuándo terminarán
●​ ESTADOS:
○​ Pending: En progreso
○​ Resolved/Fulfilled: Completada exitosamente
○​ Rejected: Falló con error
●​ ANALOGÍA: Como un ticket de reparación que te dan en el taller - es una "promesa" de que tu
auto estará listo en el futuro
🔸 TRY/CATCH/FINALLY:
●​ QUÉ ES: Estructura para manejar errores de forma controlada
●​ PARA QUÉ: Evitar que la aplicación se "rompa" cuando algo sale mal
●​ PARTES:
○​ try: Intenta ejecutar código que puede fallar
○​ catch: Maneja el error si ocurre
○​ finally: Se ejecuta SIEMPRE (haya error o no)
●​ EJEMPLO:

try {
const resultado = await operacionPeligrosa();
console.log('Éxito:', resultado);
} catch (error) {
console.error('Error:', error.message);
mostrarErrorAlUsuario('Algo salió mal');
} finally {
ocultarSpinner(); // Se ejecuta siempre
}

🔸 LOADING STATE (ESTADO DE CARGA):

●​ QUÉ ES: Variable que indica si una operación asíncrona está en progreso
●​ PARA QUÉ: Mostrar al usuario que algo está pasando (spinner, texto "Cargando...")
●​ POR QUÉ es crucial: Sin feedback, el usuario no sabe si la app funciona
●​ EJEMPLO:

const [loading, setLoading] = useState(false);

const cargarDatos = async () => {

setLoading(true); // Mostrar spinner
try {
const datos = await fetch('/api/datos');
// procesar datos...
} finally {
setLoading(false); // Ocultar spinner
}
};
🔸 ERROR HANDLING (MANEJO DE ERRORES):
●​ QUÉ ES: Conjunto de técnicas para anticipar, capturar y gestionar problemas
●​ PARA QUÉ: Crear aplicaciones robustas que no se rompan en situaciones imprevistas
●​ NIVELES:
○​ Prevención: Validar datos antes de enviarlos
○​ Captura: Usar try/catch para atrapar errores
○​ Recuperación: Ofrecer alternativas cuando algo falla
○​ Comunicación: Explicar al usuario qué pasó

🔸 TRANSFORMACIÓN DE DATOS:
●​ QUÉ ES: Proceso de convertir datos de la API al formato que necesita tu aplicación
●​ PARA QUÉ: Las APIs pueden cambiar, pero tu aplicación debe seguir funcionando
●​ EJEMPLO:

// Datos de la API (formato externo)

const datosAPI = {
name: { common: "España" },
population: 47000000,
flags: { png: "spain.png" }
};

// Transformación a formato interno

const datosInternos = {
nombre: datosAPI.name?.common || 'Sin nombre',
poblacion: datosAPI.population || 0,
bandera: datosAPI.flags?.png || ''
};

🎯 RAZÓN DE SER de cada estado:

POR QUÉ necesitas tres estados:

1.​ Loading - El usuario debe saber que algo está pasando (evita clics múltiples)
2.​ Success - Confirma que la operación funcionó (feedback positivo)
3.​ Error - Explica qué salió mal y qué puede hacer (experiencia de usuario digna)

PARA QUÉ manejar estos estados:

●​ Confianza: El usuario sabe que la aplicación está funcionando

●​ Usabilidad: Evita confusión y frustración
●​ Debugging: Facilita encontrar problemas

const apiService = {
async obtenerPaises() {
try {
this.loading = true; // Mostrar spinner
this.error = null; // Limpiar errores previos
 const respuesta = await fetch('https://api.com/paises');

if (!respuesta.ok) {
throw new Error(`Error HTTP: ${respuesta.status}`);
}

const datos = await respuesta.json();

return this.transformarDatos(datos);

} catch (error) {
this.error = 'Error al cargar países';
throw error;
} finally {
this.loading = false; // Ocultar spinner siempre
}
}
};

🚨 Error común: No verificar response.ok

// ❌ PROBLEMA
const response = await fetch('/api/data');
return response.json(); // ¡Puede fallar si es 404 o 500!

//✅ SOLUCIÓN
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`Error HTTP: ${response.status}`);
}
return response.json();
📚 GLOSARIO COMPLETO DE TÉRMINOS TÉCNICOS
📖 JAVASCRIPT MODERNO
🔸 ES6+ (ECMASCRIPT 6+):
●​ QUÉ ES: Versiones modernas del estándar JavaScript (desde 2015 en adelante)
●​ PARA QUÉ: Proporcionar herramientas más seguras y expresivas para programar

🔸 HOISTING:
●​ QUÉ ES: Comportamiento donde JavaScript "eleva" las declaraciones al inicio de su scope
●​ PARA QUÉ: Entender por qué algunas variables están disponibles antes de ser declaradas
●​ PROBLEMA: Con var puede causar comportamientos inesperados

🔸 LEXICAL SCOPE:
●​ QUÉ ES: El scope se determina por dónde está escrita la función en el código
●​ PARA QUÉ: Las funciones flecha heredan el this de donde fueron definidas

🔸 CLOSURE:
●​ QUÉ ES: Función que "recuerda" las variables de su scope exterior
●​ PARA QUÉ: Mantener acceso a variables incluso después de que la función exterior termine

🔸 INMUTABILIDAD:
●​ QUÉ ES: Principio de no modificar datos existentes, sino crear copias nuevas
●​ PARA QUÉ: Evitar efectos secundarios y hacer el código más predecible

📖 VUE.JS
🔸 FRAMEWORK:
●​ QUÉ ES: Conjunto de herramientas y reglas que facilitan crear aplicaciones
●​ PARA QUÉ: No tener que programar todo desde cero

🔸 PROGRESIVO:
●​ QUÉ ES: Se puede adoptar gradualmente en proyectos existentes
●​ PARA QUÉ: No necesitas reescribir todo tu proyecto para usar Vue

🔸 REACTIVO/REACTIVIDAD:
●​ QUÉ ES: Sistema que detecta cambios en datos y actualiza automáticamente la interfaz
●​ PARA QUÉ: Eliminar sincronización manual entre datos y vista

🔸 TEMPLATE:
●​ QUÉ ES: La parte visual del componente donde escribes HTML con superpoderes
 ●​ PARA QUÉ: Definir cómo se ve la interfaz de usuario

🔸 DECLARATIVO vs IMPERATIVO:
●​ DECLARATIVO: Describes QUÉ quieres (Vue style)
●​ IMPERATIVO: Describes CÓMO lograrlo paso a paso (jQuery style)

🔸 INTERPOLACIÓN:
●​ QUÉ ES: Sintaxis {{ }} para mostrar variables en el template
●​ PARA QUÉ: Insertar datos dinámicos en HTML

🔸 BINDING (ENLACE):
●​ QUÉ ES: Conectar datos de JavaScript con atributos HTML usando :
●​ PARA QUÉ: Hacer que atributos HTML sean dinámicos

🔸 EVENT LISTENER:
●​ QUÉ ES: Función que escucha eventos del usuario (clicks, teclas, etc.)
●​ PARA QUÉ: Reaccionar a acciones del usuario

📖 TAILWIND CSS
🔸 FRAMEWORK CSS:
●​ QUÉ ES: Conjunto de estilos CSS predefinidos y organizados
●​ PARA QUÉ: Acelerar el desarrollo de interfaces

🔸 ATOMIC CSS:
●​ QUÉ ES: Enfoque donde cada clase hace exactamente una cosa
●​ PARA QUÉ: Máxima reutilización y consistencia

🔸 DESIGN SYSTEM:
●​ QUÉ ES: Conjunto coherente de principios, componentes y patrones de diseño
●​ PARA QUÉ: Mantener consistencia visual en toda la aplicación

🔸 RESPONSIVE DESIGN:
●​ QUÉ ES: Diseño que se adapta a diferentes tamaños de pantalla
●​ PARA QUÉ: Una sola aplicación que funciona en móvil, tablet y desktop

🔸 CSS GRID:
●​ QUÉ ES: Sistema de layout bidimensional (filas y columnas)
●​ PARA QUÉ: Crear layouts complejos de forma sencilla

🔸 FLEXBOX:
 ●​ QUÉ ES: Sistema de layout unidimensional (horizontal o vertical)
●​ PARA QUÉ: Alinear y distribuir elementos en una dirección

📖 AG GRID
🔸 DATA GRID:
●​ QUÉ ES: Componente especializado para mostrar datos tabulares con funcionalidades
avanzadas
●​ PARA QUÉ: Crear interfaces de datos profesionales

🔸 SORTABLE:
●​ QUÉ ES: Capacidad de ordenar datos haciendo clic en cabeceras
●​ PARA QUÉ: Permitir al usuario organizar información como prefiera

🔸 FILTERABLE:
●​ QUÉ ES: Capacidad de filtrar datos según criterios específicos
●​ PARA QUÉ: Encontrar información específica en grandes conjuntos de datos

🔸 CELL:
●​ QUÉ ES: Cada celda individual de la tabla
●​ PARA QUÉ: Mostrar un dato específico de forma personalizada

🔸 ROW:
●​ QUÉ ES: Cada fila horizontal de la tabla (representa un registro)
●​ PARA QUÉ: Agrupar todos los datos relacionados de un elemento

🔸 COLUMN:
●​ QUÃ ES: Cada columna vertical de la tabla (representa un tipo de dato)
●​ PARA QUÉ: Agrupar datos del mismo tipo

📖 APIs Y COMUNICACIÓN
🔸 ENDPOINT:
●​ QUÉ ES: URL específica donde puedes hacer peticiones a una API
●​ PARA QUÉ: Punto de acceso para obtener o enviar datos específicos

🔸 PAYLOAD:
●​ QUÉ ES: Los datos que envías en una petición POST o PUT
●​ PARA QUÉ: Información que quieres crear o actualizar en el servidor

🔸 HEADERS:
 ●​ QUÉ ES: Información adicional que acompaña a peticiones y respuestas HTTP
●​ PARA QUÉ: Especificar tipo de contenido, autenticación, etc.

🔸 CORS (CROSS-ORIGIN RESOURCE SHARING):

●​ QUÉ ES: Mecanismo de seguridad del navegador para peticiones entre dominios diferentes
●​ PARA QUÉ: Controlar qué sitios web pueden acceder a una API

🔸 FETCH API:
●​ QUÉ ES: Función moderna de JavaScript para hacer peticiones HTTP
●​ PARA QUÉ: Comunicarse con APIs de forma estándar

🔸 AbortController:
●​ QUÉ ES: Objeto que permite cancelar peticiones HTTP en progreso
●​ PARA QUÉ: Evitar memory leaks cuando componentes se destruyen

📖 ARQUITECTURA Y ORGANIZACIÓN
🔸 SEPARATION OF CONCERNS:
●​ QUÉ ES: Principio donde cada parte del código tiene una responsabilidad específica
●​ PARA QUÉ: Código más organizado y fácil de mantener

🔸 SINGLE RESPONSIBILITY PRINCIPLE:

●​ QUÉ ES: Cada función/clase/módulo debe tener una sola razón para cambiar
●​ PARA QUÉ: Cambios en una funcionalidad no afectan otras partes

🔸 SERVICE:
●​ QUÉ ES: Módulo que encapsula lógica de negocio o comunicación externa
●​ PARA QUÉ: Separar lógica de componentes de interfaz

🔸 STORE:
●​ QUÉ ES: Almacén centralizado del estado de la aplicación
●​ PARA QUÉ: Compartir datos entre componentes sin prop drilling

🔸 COMPOSABLE:
●​ QUÉ ES: Función reutilizable que encapsula lógica con estado reactivo
●​ PARA QUÉ: Reutilizar lógica entre diferentes componentes

🔸 UTILITY:
●​ QUÉ ES: Función auxiliar que no depende del framework
●​ PARA QUÉ: Lógica pura reutilizable en cualquier contexto
Pregunta 1: Variables
// ¿Qué imprime este código y por qué?
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}

Respuesta: Imprime 3, 3, 3 porque var tiene scope de función y todas las iteraciones comparten la
misma variable.

Pregunta 2: Funciones Flecha

// ¿Cuál de estos códigos funciona correctamente?
const obj1 = {
name: "Vue",
greet: () => `Hello ${this.name}`
};

const obj2 = {
name: "Vue",
greet() { return `Hello ${this.name}`; }
};

Respuesta: obj2 funciona correctamente porque las funciones tradicionales tienen su propio this.

Pregunta 3: Vue Directivas

<!-- ¿Qué está mal en este código? -->
<li v-for="user in users">{{ user.name }}</li>

Respuesta: Falta :key="user.id" para que Vue pueda distinguir entre elementos.

Pregunta 4: Tailwind
<!-- ¿Cuál es el enfoque correcto para mobile-first? -->
<div class="lg:text-lg text-base">Texto</div>
<div class="text-base lg:text-lg">Texto</div>

Respuesta: El segundo es correcto porque aplica text-base a móvil y lg:text-lg a pantallas

grandes.
🎯 CHECKLIST DE CONCEPTOS CLAVE
JavaScript Moderno ✅

●​ [ ] Entiendo la diferencia entre var, let y const

●​ [ ] Sé cuándo usar funciones flecha vs tradicionales
●​ [ ] Puedo usar map(), filter() y reduce() correctamente
●​ [ ] Entiendo el concepto de scope

Vue.js ✅
●​ [ ] Comprendo qué es la reactividad
●​ [ ] Sé usar las directivas básicas (v-model, v-if, v-for)
●​ [ ] Entiendo la comunicación entre componentes (props y emits)
●​ [ ] Nunca manipulo el DOM directamente

Tailwind CSS ✅
●​ [ ] Entiendo la filosofía utility-first
●​ [ ] Sé aplicar diseño responsive mobile-first
●​ [ ] Uso el sistema de espaciado consistente
●​ [ ] Evito repetir clases creando componentes

AG Grid ✅
●​ [ ] Puedo configurar columnas básicas
●​ [ ] Entiendo la diferencia entre field y headerName
●​ [ ] Sé usar valueFormatter para formatear datos
●​ [ ] Valido que las propiedades coincidan con los datos

APIs ✅
●​ [ ] Siempre verifico response.ok
●​ [ ] Manejo los estados loading, success y error
●​ [ ] Uso try/catch/finally correctamente
●​ [ ] Transformo y valido datos antes de usarlos

🚨 ERRORES MÁS COMUNES A EVITAR

1.​ Usar var en lugar de let/const
2.​ Olvidar :key en v-for
3.​ Manipular DOM directamente en Vue
4.​ No verificar response.ok en fetch
5.​ Mutar props directamente
6.​ No manejar estados de loading
7.​ Usar funciones flecha como métodos de objeto
8.​ No entender mobile-first en Tailwind