---
title: "Hablemos sobre alpinejs"
excerpt: "Alpine.js: framework JavaScript ligero con reactividad de Vue/React. Ideal para comportamiento dinámico sin el peso de frameworks grandes. Guía completa."
date: "2021-01-04T22:14:05.000Z"
category: "JavaScript"
seo_title: "Alpine.js: reactividad ligera sin el peso de Vue o React"
seo_description: "Alpine.js ofrece reactividad en el DOM usando directivas como x-data, x-init y x-text. Tutorial práctico creando un widget del clima con la API de OpenWeatherMap."
author:
name: "angel cruz"
picture: "https://angelcruzdevcdn.nyc3.cdn.digitaloceanspaces.com/images/me/angel-cruz.png"
---
Alpine nos ofrece 14 directivas y 6 propiedades mágicas que puedes conocer leyendo su [documentación](https://github.com/alpinejs/alpine/blob/master/README.es.md).
### Hagamos un pequeño ejemplo para entender mejor qué es alpinejs
Bueno, pongamos manos a la obra y trabajamos en un widget para el clima que se verá más o menos como esto:
template original de [iaminos](https://tailwindcomponents.com/component/weather-ui-component).
Para hacer este proyecto necesitamos conocer sobre:
- template strings
- algunas directivas de alpine:
- x-data: Declara un nuevo scope del componente.
- x-init: Ejecuta una expresión cuando un componente se inicializa.
- x-text: Actualiza el innerText del elemento.
- tener una llave api de open weather map.
Asumiendo que bajaron el template vamos a irlo modificando poco a poco.
En el `` vamos a incluir esta estiqueta javascript:
```html
```
Ya con esto tendremos alpine inicializado.
Ahora vamos a crear una etiqueta `script` y vamos a incluir lo siguiente:
```js
function temp() {
return {
temp: {},
init() {
// todo
}
}
}
```
Ahora lo que debemos hacer es declarar el scope e inicializarlo de la siguiente forma:
```html
```
> NOTA: voy a remover todas las clases CSS y dejar las directivas de alpine
Aquí lo que indicamos es que el scope de este componente será la función `temp()` y que solo estará disponible para todo aquello que esté dentro de las etiquetas div donde fue declarado.
Teniendo en cuenta esto pasemos a terminar de armar nuestro widget.
```html
```
Y nuestra función javascript pasaría a quedar de esta forma:
```javascript
function temp() {
return {
temp: {},
init() {
fetch('http://api.openweathermap.org/data/2.5/weather?q=Montevideo,UY&appid=&units=metric')
.then(response => response.json())
.then(response => { this.temp = response })
}
}
}
```
Si no tienes ganas de codear y solo quieres mirar [pasa por aquí](https://codepen.io/abr4xas/pen/qBaRROM), solo vas a necesitar tu clave api y listo.
---
## Sitemap
Índice completo del sitio: [/sitemap.md](https://www.angelcruz.dev/sitemap.md)
Canónico HTML: [https://www.angelcruz.dev/post/hablemos-sobre-alpinejs](https://www.angelcruz.dev/post/hablemos-sobre-alpinejs)