Estudio de Svelte.js

• Código eficiente que actualiza el DOM directo
• Componentes reactivos
• Sin necesidad de un virtual DOM

• Interfaces de usuario interactivas
• Aplicaciones de una sola página (SPA)
• Apps web de alto rendimiento

Instalación: npm create vite@latest (plantilla svelte)

<script>
  let nombre = 'Svelte';
</script>
<h1>Hola {nombre}!</h1>

1. Contador reactivo

Botón con `let` reactivo.

<script>
  let contador = 0;
  $: doble = contador * 2;
</script>

<button on:click={() => contador++}>+1 ({contador})</button>
<p>El doble es {doble}</p>

2. Lista con each y bind

Renderiza tareas y enlaza un checkbox con `bind`.

<script>
  let tareas = [{ t: 'Leer', ok: false }, { t: 'Código', ok: true }];
</script>

{#each tareas as tarea}
  <label>
    <input type="checkbox" bind:checked={tarea.ok} />
    {tarea.t} {tarea.ok ? '✅' : ''}
  </label>
{/each}