Descripción:
Si desea crear interfaces de usuario reactivas que se carguen rápidamente y se ejecuten rápido, ¡Svelte.js es una herramienta que no debe pasar por alto! Svelte.js (o simplemente “Svelte”) es un compilador de JavaScript moderno que le permite escribir y compilar código JavaScript eficiente y fácil de entender que se ejecuta en el navegador. En este curso, aprenderá cómo escribir una aplicación frontend usando JavaScript, siguiendo las reglas establecidas por Svelte. El compilador Svelte producirá un paquete de JavaScript pequeño y altamente optimizado que se puede implementar fácilmente. Este curso cubre todo sobre Svelte, ayudándote a entender cómo funciona, cuáles son sus características principales y cómo ejecutar tu aplicación final en un servidor real. Svelte.js es una gran alternativa a los frameworks y bibliotecas de JavaScript como React.js, Angular o Vue para construir interfaces de usuario modernas y altamente reactivas para la web. Además, le permite construir sus proyectos web con menos código y ayuda a construir aplicaciones más rápidas
Objetivo:
Al término del curso el alumno será capaz de: Comprender Svelte y por qué usarlo. Conocer las características principales y la sintaxis básica de Svelte. Renderizar contenido condicional y de lista. Escribir aplicaciones web reactivas y rápidas. Familiarizarse con el uso de componentes: datos y crear bloques de construcción reutilizables. Administrar eficientemente los datos en su aplicación con las tiendas Svelte. Usar un servidor de fondo y enviar y buscar datos. Pre-renderizar su aplicación en un servidor y mejorar el SEO.
Temario:
Parte 1. Comenzando
Introduccion | ¿Por qué esbelta? El | ¿Qué es Svelte? | Configuración de una primera aplicación y el proyecto del curso | Escribir un código esbelto
Parte 2. Sintaxis básica y características principales
Uso de llaves y comprensión de la sintaxis central | Variables reactivas | Enlace a las propiedades del elemento | Atajo de enlace bidireccional | Usando múltiples componentes | Componentes y comunicación a través de accesorios | Sumergirse más profundamente en las ataduras | Uso de propiedades autoextendibles | Salida de contenido HTML | Establecer clases dinámicas de CSS
Parte 3. Trabajar con condicionales y bucles
Uso de declaraciones “if” en HTML | if, else y else-if | Salida de listas con “cada” | “each”, “else” y extracción del índice | Listas y claves | Una mirada más cercana a las claves de la lista
Parte 4. Una mirada más cercana a la reactividad
Actualización de matrices y objetos de forma inmutable | Comprensión de modificadores de eventos | Usar funciones en línea
Parte 5. Proyecto de curso
Configuración del proyecto y un primer componente | Diferentes formas de montaje de componentes | Agregar datos | Agregar un nuevo componente | Trabajando con diferentes tipos de componentes | Transferencia de datos a componentes | Crear un componente “TextInput” | Agregar un componente de “botón” personalizado
Parte 6. Inmersión más profunda en componentes
Comprensión de los diferentes tipos de componentes | Descripción general de la comunicación de componentes | Reenvío de eventos | Emitir eventos personalizados | Cómo extraer datos | Abrir y cerrar un modal | El ciclo de vida del componente | Creación y actualización de Lifecycle Hooks en acción | Usando “tick ()”
Parte 7. Trabajar con enlaces y formularios
Actualización de enlace bidireccional | Comprensión de enlaces de componentes personalizados | Confiando en la conversión automática de números | Casillas de verificación vinculantes y botones de radio | Enlace a referencias de elementos | Enlace a referencias de componentes | Validación de formularios y entradas
Parte 8. Movimiento, transiciones y animaciones
Animar valores con Tweened | Usando una tienda Spring en su lugar | Preparación de un ejemplo de transición | Transiciones de elementos | Más sobre transiciones | Uso de diferentes transiciones “in” y “out” | Animar elementos pasivos (afectados)
Parte 9. Http
Almacenar en un servidor | Obteniendo y transformando datos | Agregar un hilador de carga | Actualización a través de PATCH | Fijación del orden de los artículos | Agregar manejo de errores
