Introducción a Alpine.js - Primer Componente - x-data, evento Click, x-show 1
Vamos a comenzar esta introducción a lo que sería alpine js antes que nada esta introducción te lo puedes tomar valga la redundancia como una introducción propia al framework Aunque Recuerda que esto inicialmente forma parte del curso de Laravel Livewire va a ser independiente y por lo tanto es otra vez una introducción a lo que sería Alpine js ya que vamos a crear unos proyectos desde cero trabajando con Alpine directamente y luego más adelante en otra sección lo vamos a ligarlo con lo que sería el Livewire ya que es el por qué estoy haciendo esto yo estoy haciendo una introducción alpine ya que Recuerda que forma parte de lo que sería el Livewire pero nuevamente te lo puedes tomar como si fuera una introducción propia al framework y no tiene absolutamente nada que ver a lo que sería LIvewire entonces aclarado eso puedes ver esto independientemente de si te interesa aprender Laravel Livewire o no.
Alpine muy similar a Vue en varias cosas
Bueno aclarado eso quería hablar un poco sobre lo que sería el frame warm que si ya hemos trabajado con Livewire ya no debería ser mucha sorpresa pero aún así considero hacerle una introducción un poquito más formal entonces Alpine js es otro framework y eso es una palabra clave ya que al día de hoy existen muchísimos frameworks para lo que serían javascript de distintos ámbitos o distintos propósitos y este viene siendo otro más a la final lo puedes ver como si fuera una especie de Vue sobre todo menciono Vue porque lo que es angular y React siempre los considero un poquito más complejos de lo que sería Vue pero también puedes partir de esos tres pero más ligero más sencillo de entender y el propósito del mismo es cuando nos quedaría grande emplear Vue simplemente quieres hacer pequeñas adaptaciones entonces puedes emplear este tipo de frameworks es así de simple por lo demás tiene una estructura diferente aparte un poco más modular al ser otra vez.
El propósito del mismo es hacer operaciones sencillas puedes ver que no hace falta no tienes que crear componentes punto Vue y nada por el estilo sino directamente desde el mismo html puedes crear tus pseudos componentes Por decirlo de alguna manera ya con un componente en Vue luce de la ya que un componente en Alpine de la siguiente forma siempre son acompañados con lo que es el X seguido de otra cosa.
<div x-data="{ header:false }">
// Hacer Algo
</div>
Pero en este caso para asociar lo que es un componente en sí tenemos que colocar lo que es x- seguido de data entonces aquí al igual que ocurre con telwin aunque sea una teía diferente en la cual usualmente se coloca el montón de clases a nivel de los atributos aunque también podemos hacerlo en un archivo aparte aquí también establecemos lo que es el javascript directamente en el html.
Podemos crear un bloque de escrita ap parte en caso de que quieras hacer algo un poco más complejo ya que también lo permite pero la final en pocas palabras y comparándolo otra vez con frameworks como Vue los que nos permite hacer alpine viene siendo agregar esa capa de reactividad a nuestra página html tan deseada para cuando nosotros cambiemos por ejemplo algo en esta propiedad automáticamente en base a algunas directivas que vamos a conocer más adelante como como el before bif etcétera se cambia aquí automáticamente es así de simple por lo demás también tenemos eventos para poder interactuar o que que el usuario interactúe con nuestra página un buen ejemplo de esto viene siendo un model es decir un diálogo o un diálogo de confirmación de confirmación como lo quieras ver aquí:
<html>
<body>
<div x-data="{ header:false }">
Abrir un modal
</div>
***
<div x-data="{ fieldText:" Pon tu nombre" }">
Manejar un formulario
</div>
***
<div x-data="{ open:false }">
Abrir un modal
</div>
</body>
</html>
Realmente aunque tenga este texto no lo tengo bien especificado es decir no tengo el desarrollo implementado pero suponte que aquí tenemos otra vez la data donde vamos a colocar todas las variables o como lo quieras llamar que vamos a emplear a nivel de este componente que viene aquí encapsulado aquí tuviéramos algunos condicionales o un condicional para verificar si esto es true Bueno aquí tengo uno que se asemeja más si esto es true entonces abre el moda y si no simplemente lo mantiene cerrado lo mantiene oculta mediante ese condicional es simplemente ese tipo de operaciones más adelante que presentemos.
Eventos y directivas, el secreto de la reactividad
Aquí las directivas y demás ya le podemos sacar un poquito el chiste todo esto y por supuesto aquí también tenemos lo que es los eventos y todo lo demás evento click keyup y todo lo demás en cuanto a también los atributos tenemos varios como te indicaba el de X datata viene siendo el clave en todo esto que es el que indica que es un componente en sí y ahí definimos nuestras variables Y al igual que en Vue tenemos el de x-show para mostrar ocultar un elemento en base a alguna condición buana pero solamente ocultar el Dif y no desaparecerlo al igual que ocurre con Vue y el y el x-if en este caso.
Entonces eso es básicamente aquí Esta es la página oficial simplemente escribe aquí el pin js Bueno pero bien escrito al Pin js y entras aquí en el primer enlace Bueno no en el patrocinado sino aquí en el primer enlace y aquí tendrías la página aquí tenemos lo que es el componente que es la presentación que tenemos aquí esto es un componente en este caso tenemos el X datata como te indicaba un open definido en falso si le pegamos un click es decir un evento de usuario para que interactúe el usuario Entonces lo coloco en true:
<div x-data="{ open:false }">
<button x-on:click="open=!open">Dame un click</button>
<div x-show="open">
Oculto por defecto
</div>
</div>
Este es el nombre del botón no tiene nada de raro y aquí sería el X asociado que es para mostrar este contenido puede ser un x-if un X en este caso un x show pero a la final cuando le peges un click se mostraría esto Lamentablemente creo que no permite ejecutarlo Pero eso sería la carta de presentación por lo demás aquí mismo puedes ver aquí un poco lo hablado al inicio que es un forw extremadamente sencillo simple y por lo tanto inclusive aquí en la misma página oficial en la página directa en el index ya te define sus atributos propiedades y métodos porque es básicamente eso ya conociendo esto ya conoceríamos la parte más importante de al pin que es lo que nosotros vamos a cubrir en este curso tal cual puedes ver ya el resto echale un ojo si quieres pero ya lo iremos viendo poco a poco a lo largo del curso Entonces no voy a seguir indagando un poco por aquí Entonces ya aclarado esto el siguiente punto sería como demonios lo utilizamos tenemos al igual que ocurre con Vue la opción de cdn que sería la que vamos a emplear porque estamos haciendo aquí un la mundo o mediante Noe que sería la que tenemos en en algún lugar de la vida ver npm Bueno voy a venir aquí a install Aquí está installation como te indicaba lo podemos hacer mediante la opción de la cdn que es bueno para hacer pruebas que es lo que queremos hacer pero ya para un proyecto real puedes instalarlo mediante Note por ejemplo y aquí lo inicializa así que pues nada esa era la introducción que te quería dar simplemente hablarte un poquito sobre la tecnología que nos ofrece para que la podemos emplear cómo está formada y por supuesto cómo la podemos instalar así que sin más que decir vamos a la siguiente clase.
- Andrés Cruz
Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro primeros pasos con Laravel 11 Livewire 3 + Alpine.js y Tailwind.css - 2025.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter