Curso de Alpine JS para tu equipo — Calidad y despliegues

Atributo `x-data`: inicializar estado

Declarar propiedades reactivas

Acceder a datos con `x-text`, `x-html`

Manipulación básica del DOM

Reactividad automática de Alpine

Condiciones de renderizado con `x-if`

Práctica: contenedor con datos reusables

Práctica adicional: cambiar texto con botón

Sintaxis `x-on:evento` y alias `@evento`

Eventos comunes (`click`, `input`, `keyup`)

Llamar funciones directamente

Acceder al `$event` y propiedades del DOM

Práctica: botón de contador

Práctica adicional: cambiar color con botón toggle

`x-show` como alternativa a `display: none`

Integración con `x-transition`

Mostrar/ocultar en base al estado

Usar `x-cloak` para evitar parpadeo

Práctica: menú desplegable simple

Práctica adicional: modal con fade animado

Diferencias con `x-show`

Re-renderizado del DOM

Estructura HTML en condiciones

Casos donde conviene usar `x-if`

Práctica: mensaje condicional según checkbox

Práctica adicional: alerta temporal con autoocultado

Vínculo bidireccional entre input y estado

Inputs: texto, checkbox, radio, select

Manejo de formularios sin JS adicional

Validaciones básicas

Práctica: formulario de login en tiempo real

Práctica adicional: contador de caracteres

Iterar sobre arrays

Acceso al índice con `(item, index)`

Uso conjunto con `x-key`

Mostrar elementos dinámicos

Práctica: lista de tareas

Práctica adicional: botón para añadir/eliminar ítems

Definir funciones dentro de `x-data`

Usar `x-ref` para acceder al DOM

Interacción entre datos y referencias

Casos prácticos: scroll, foco, manipulación directa

Práctica: botón que da foco a un input

Práctica adicional: autocompletado básico con `x-ref`

`x-transition`: cómo funciona

Controlar entrada y salida

Personalizar duración y estilo

Integración con `x-show` y `x-if`

Práctica: acordeón animado

Práctica adicional: popup con entrada suave

`x-init` para lógica inicial

Usar `$watch` para detectar cambios

Reacciones encadenadas

Casos de uso: validación, dependencias

Práctica: validar email en tiempo real

Práctica adicional: activar botón tras validación

Composición de `x-data`

Propagación de eventos

Comunicación entre componentes

Práctica: múltiples widgets independientes

Práctica adicional: gestor de pestañas con componentes

Qué es `x-effect` y cómo se diferencia de `$watch`

Side effects con dependencias reactivas

Evitar errores por ciclos infinitos

Práctica: registrar cambios en consola

Práctica adicional: activar clase CSS al detectar valor

Integración natural sin conflictos

Menús, toggles y componentes interactivos

Mostrar/ocultar elementos

Práctica: dropdown con Tailwind y Alpine

Práctica adicional: toast animado y cerrado automático

Uso de `localStorage` en `x-init`

Guardar y recuperar estado

Sincronización con `x-model`

Práctica: mantener tema claro/oscuro

Práctica adicional: guardar preferencias de usuario

Validación en tiempo real

Estados de error y feedback visual

Mostrar mensajes por campo

Práctica: formulario de contacto validado

Práctica adicional: resumen dinámico del formulario

HTMX como motor AJAX + Alpine como frontend

Cargar HTML y aplicar lógica con `x-data`

Usar `htmx:afterSwap` para inicializar componentes

Práctica: combo HTMX + Alpine para listado editable

Práctica adicional: edición inline en tabla

Fetch en `x-init` o eventos

Usar `await` en funciones dentro de `x-data`

Mostrar spinners y mensajes de carga

Práctica: obtener datos de una API pública

Práctica adicional: listado con paginación y filtros

`$el`, `$refs`, `$nextTick`, `$dispatch`

Crear plugins propios

Incluir lógica externa con `Alpine.plugin()`

Práctica: plugin que limita caracteres

Práctica adicional: `$dispatch` para comunicación entre bloques

Evitar fugas de memoria

Control de datos expuestos

Buenas prácticas de estructuración

Debugging con Alpine Devtools

Práctica: revisar y optimizar un componente grande

Práctica adicional: uso correcto de `x-init` y `x-effect`

Definir caso: panel de control interactivo

Múltiples widgets: tareas, filtros, alertas

Interacción entre componentes

Validaciones, formularios y estado persistente

Diseño con Tailwind

Eventos personalizados y reactividad

Carga dinámica de contenido

Transiciones y modales

Práctica adicional: exportar como plantilla reusada

Checklist final de buenas prácticas