-
Lección¿Cómo crear un proyecto de Svelte?
Veamos cómo ejecutar el comando para descargar un repositorio plantilla de Svelte con el que podemos empezar a trabajar, y cómo entender las distintas carpetas de las que se compone un proyecto de Svelte. También vemos el comando para lanzar un servidor web. -
Lección¿Por qué existe la tecnología Web Components?
Cuando hagamos aplicaciones web, donde tengamos varios elementos que se van a estar compartiendo entre distintas páginas de la aplicación, como un botón de suscripción o un componente de imagen, usar componentes reusables nos ayudará a desacoplar el código y facilitar el mantenimiento y evolución de la página cuando haya... -
LecciónTu primer Web Component
En este vídeo usamos la API Custom Elements para fabricar un Custom Element (una de las tecnologías que integra Web Components), explicando cómo funciona la API de Custom Elements. -
LecciónAprende a usar reduce en JavaScript
En este taller te explico el funcionamiento del método Array.reduce. Se trata de una operación transformadora de reducción, lo que significa que convierte los elementos de un array (transformación), pero se diferencia de un map en que un reduce genera un único elemento, no otro array de elementos. ¿Estás aprendiendo... -
Lección 📈 En tendenciaCustom Elements usando HTML Templates
Ahora que hemos visto en qué consisten las templates de HTML5, podemos ver cómo integrar una template y extraer su contenido, para incorporarla en un Custom Element. -
LecciónCreando nuestro primer componente
Escribir componentes en Svelte resulta muy sencillo. En este capítulo veremos cómo crear un archivo .svelte, que es un archivo que contiene el código HTML, JavaScript y CSS de un componente. Luego estos componentes podrán ser organizados y jerarquizados, y les podremos meter comportamientos avanzados. -
LecciónDatos dinámicos y props
A los componentes les podemos asignar datos dinámicos, que son como variables que pueden ser luego interpoladas en la capa presentacional HTML. Además, las props son atributos especiales cuyos valores iniciales se pasan desde fuera del componente, creando una forma de distribuir información entre unos componentes y otros. -
LecciónLa etiqueta template de HTML5
La etiqueta template forma parte del estandar HTML5 y permite disponer de fragmentos DOM que no son visibles en la página web, pero que pueden ser manipulados mediante JavaScript. -
LecciónAnidando componentes
Centrémonos un momento en el propósito de anidar componentes y de meter unos componentes dentro de otros. Svelte está pensado como un framework orientado a componentes, por lo que la idea es fabricar componentes independientes que hagan una cosa, como un botón, una casilla de verificación, o un buscador, y... -
LecciónAtributos condicionales e IF
El lenguaje de marcado empleado en los archivos de Svelte incluye una serie de directivas extra que podemos utilizar en los componentes para distintos propósitos. Hoy evaluamos uno de ellos, que nos va a permitir renderizar condicionalmente parte del marcado de un componente en función de si una condición se...