Desarrollo Frontend con Svelte

Instalando nuestro editor de código favorito: Visual Studio Code.

Instalar Node.js y NPM para la gestión de librerías JS

Repasamos la estructura de archivos iniciales en un proyecto de Svelte.

Agregamos contenido dinámico a nuestra vista con el uso de variables de JS.

Utilizamos valores dinámicos como propiedades de las etiquetas.

Asignación de datos a una variable por medio de un evento de forma reactiva.

Svelte de igual forma calcula de forma reactiva el valor de una variable aun cuando dependa de otra.

Las sentencias reactivas son bloques de código que se ejecutan cada vez que una variable implicada sufre una actualización de su valor.

Aunque el método push no desencadenan actualizaciones automáticas, con Svelte podemos aprovechar de las ventajas de ES2015 y versiones posteriores, en este caso usamos el Spread Operator.

Con el uso de archivos .svelte podemos reutilizar porciones funcionales de códigos compuestos por HTML, CSS y JavaScript.

Compartimos datos entre nuestros componentes con el uso de PROPS

Las Spread PROPS permiten enviar un objeto como argumento a distintas propiedades en un componente, sin necesidad de hacer la asignación 1 por 1.

Renderizamos nuestro contenido con el uso del condicional IF.

Renderizamos una estructura condicional más compleja.

Renderizamos contenido HTML directamente en un componente.

Renderizamos una lista de elementos a partir de un Array con el uso de EACH.

Controlamos algunos eventos del DOM.