Svelte es un framework de frontend que compila tus componentes a Javascript. A diferencia de otros frameworks, gran parte del trabajo ocurre en tiempo de compilación, de modo que el navegador recibe código optimizado.
En este curso puedes cargar ejemplos en el editor, modificarlos y pulsar para ver el resultado en el visor. Cada ejemplo muestra el componente Svelte y una demo interactiva equivalente para practicar el concepto sin depender de herramientas externas.
Recomendado Antes de Svelte conviene tener nociones de HTML, CSS y Javascript.
Un componente Svelte vive normalmente en un fichero .svelte. Dentro puedes escribir <script>, HTML y <style> en el mismo bloque. Las variables declaradas en el script se pueden usar directamente en la plantilla.
La reactividad de Svelte es directa: cuando una variable cambia mediante una asignación, la vista se actualiza. Para valores derivados se usa la etiqueta reactiva $:.
Las props son datos que recibe un componente desde fuera. En Svelte se declaran con export let nombre. Si no se informa un valor, puedes dejar un valor por defecto.
Los eventos se escuchan con la sintaxis on:evento. Por ejemplo, on:click permite ejecutar una función cuando el usuario pulsa un botón.
Svelte añade bloques de plantilla para decidir qué se muestra. Los más usados son {#if} para condicionales y {#each} para recorrer listas.
Con bind:value puedes conectar un input con una variable. Cuando el usuario escribe, la variable cambia; cuando la variable cambia, el input se actualiza.
Los stores permiten compartir estado entre componentes. En un proyecto real se suelen crear con writable, readable o derived desde svelte/store. En la plantilla, el prefijo $ permite leer el valor del store de forma reactiva.
import { writable } from 'svelte/store';
export const usuario = writable({ nombre: 'Ada' });El ciclo de vida sirve para ejecutar código cuando un componente se monta, se actualiza o se destruye. En proyectos reales se usan funciones como onMount, beforeUpdate, afterUpdate y onDestroy.
import { onMount } from 'svelte';
onMount(() => {
console.log('El componente ya está en la pantalla');
});Como resumen práctico: Svelte te pide pensar en componentes pequeños, estado claro, plantillas declarativas y reactividad basada en asignaciones.