Descubre qué es el framework Svelte JS, el framework con la mejor tendencia este 2021. ¿Viene a quitarle el trono a React? Bueno, trae cosas muy interesantes. Sobretodo que hace que tengas que escribir muy poco código, pero lo mejor es que lo descubres por ti mismo.
{{< img align="center" src="/images/youtube-suscribirme.png" >}}Introducción a SvelteJS
{{< youtube id=“Xsxm8_BI63s” >}} {{< subscribe-to-youtube >}}
En la primera clase descubrimos qué es Svelte JS, qué ofrece este framework JavaScript, en qué se diferencia de React, Angular y Vue además de ver su sintaxis. El framework con mejor tendencia este 2021. 🔥
Cómo crear un NUEVO PROYECTO con Svelte 3 desde cero 🚀
{{< youtube id=“VTkDuQ9RLVU” >}} {{< subscribe-to-youtube >}}
En esta clase vamos a descubrir cómo crear un proyecto en Svelte 3 desde cero y paso a paso. El proyecto que vamos a crear nos servirá en las próximas clases.
Creando COMPONENTES y usando el STATE 🧩
{{< youtube id=“B4obfRtW4ho” >}} {{< subscribe-to-youtube >}}
Aprendemos a crear componentes y gestionar su estado interno utilizando la última versión de Svelte. Además, veremos como Svelte ofrece realmente un estado reactivo de forma que, de una forma muy declarativa, podremos cambiar el valor del estado y estos cambios es reflejaran fácilmente en la UI.
Declaraciones reactivas y FETCHING de datos ⚡
En esta clase vamos a entender qué son las declaraciones y sentencias reactivas en Svelte para poder sacarle el máximo potencial al state de Svelte. Además, veremos cómo podemos recuperar datos de una API, actualizar el estado con ellos y pintarlos en la UI en Svelte.
{{< youtube id=“n3T_vbCJ1nY” >}} {{< subscribe-to-youtube >}}
RENDERIZADO CONDICIONAL o conditional rendering 🔀 en Svelte
{{< youtube id=“r2ZX_Awv3WU” >}} {{< subscribe-to-youtube >}}
Vamos a aprender a utilizar el renderizado condicional en Svelte. De esta forma, podremos mostrar al usuario diferente contenido dependiendo del estado y las props de nuestros componentes.
APRENDE a Renderizar LISTAS y ARRAYS
{{< youtube id=“93CL7O4hNWU” >}} {{< subscribe-to-youtube >}}
Con la sintaxis @each podemos renderizar objetos iterables, como arrays o strings, en SvelteJS. En este vídeo comprobamos la sintaxis y lo usamos en nuestro proyecto.
APRENDE a usar PROMESAS con AWAIT en Svelte
{{< youtube id=“c1kvN5jqQ18” >}} {{< subscribe-to-youtube >}}
Así que quieres aprender a manejar las promesas como un CRACK en Svelte. Pues tienes que aprender la sintaxis de plantillas {#await} para que dejes de utilizar el IF cuando NO es necesario. Y eso de código que te vas a quitar de encima.
{{< img align="center" src="/images/youtube-suscribirme.png" >}}