Crea tu primer componente interactivo con Svelte

Tipo de lección: Video

Concepto clave

En Svelte, un componente es la unidad fundamental de construcción de interfaces. A diferencia de frameworks como React o Vue, Svelte compila tu código en JavaScript optimizado durante el build, eliminando la necesidad de una biblioteca runtime en producción. Imagina que estás construyendo con LEGO: cada pieza (componente) es independiente, reutilizable y sabe cómo actualizarse cuando cambian sus datos internos.

La reactividad en Svelte es declarativa y automática. Cuando declaras una variable y la usas en tu plantilla, Svelte automáticamente rastrea las dependencias y actualiza solo las partes afectadas del DOM. Es como tener un asistente que observa tus ingredientes en la cocina y ajusta automáticamente la receta cuando cambias uno, sin que tengas que decirle explícitamente qué hacer.

Cómo funciona en la práctica

Vamos a crear un componente de contador interactivo paso a paso. Primero, necesitas entender la estructura básica de un archivo .svelte:

1. Sección <script>: Contiene la lógica JavaScript (variables, funciones)
2. Sección HTML: La plantilla que define la interfaz
3. Sección <style>: Estilos scoped al componente (opcional)

La magia ocurre cuando vinculas variables del script con la plantilla usando llaves {}. Cuando estas variables cambian, Svelte actualiza automáticamente el DOM.

Código en acción

Aquí está tu primer componente interactivo completo:

<script>
  // Declaramos una variable reactiva
  let count = 0;
  
  // Función que incrementa el contador
  function increment() {
    count += 1;
  }
  
  // Función que reinicia el contador
  function reset() {
    count = 0;
  }
</script>

<div class="counter-container">
  <h3>Contador Interactivo</h3>
  
  <p>Valor actual: <strong>{count}</strong></p>
  
  <button on:click={increment}>
    Incrementar (+1)
  </button>
  
  <button on:click={reset}>
    Reiniciar
  </button>
  
  <p>El contador ha sido incrementado {count} {count === 1 ? 'vez' : 'veces'}</p>
</div>

<style>
  .counter-container {
    padding: 20px;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  
  button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }
</style>

Ahora veamos cómo refactorizar para hacerlo más reutilizable. ANTES: Todo en un solo componente. DESPUÉS: Separamos la lógica del display:

<!-- CounterDisplay.svelte -->
<script>
  export let count;
  export let label = "Contador";
</script>

<div class="counter-display">
  <h3>{label}</h3>
  <p>Valor: <strong>{count}</strong></p>
</div>

<style>
  .counter-display {
    margin-bottom: 15px;
  }
</style>

Errores comunes

• Mutación directa sin reactividad: Modificar arrays u objetos sin reasignación. En Svelte, necesitas reasignar para trigger la reactividad: array.push(item) no funciona, usa array = [...array, item].
• Confundir on:click con onclick: En Svelte siempre usas on:eventname, no el nativo onclick. El prefijo "on:" es específico de Svelte.
• No usar export para props: Si quieres pasar datos a un componente hijo, debes declarar variables con export let en el hijo.
• Olvidar el scope de estilos: Los estilos en Svelte son scoped por defecto. Si necesitas estilos globales, usa :global().
• Abusar de la reactividad con $:: El símbolo $: es para declaraciones reactivas derivadas. No lo uses para variables simples que no dependen de otras.

Checklist de dominio

• ✓ Puedo crear un componente .svelte con las tres secciones (script, template, style)
• ✓ Entiendo cómo declarar variables reactivas y funciones
• ✓ Sé vincular variables a la plantilla usando {}
• ✓ Puedo manejar eventos con on:click y otras directivas
• ✓ Comprendo la diferencia entre variables locales y props (export let)
• ✓ Sé aplicar estilos scoped a un componente
• ✓ Puedo refactorizar un componente para hacerlo reutilizable

Crea un componente de lista de tareas interactiva

Construye un componente Svelte que permita a los usuarios gestionar una lista de tareas. Este es un patrón común en aplicaciones reales que te prepara para componentes más complejos.

1. Crea un nuevo archivo TodoList.svelte en tu proyecto SvelteKit
2. Implementa las siguientes funcionalidades:
   • Un campo de entrada para agregar nuevas tareas
   • Una lista que muestre todas las tareas
   • Botón para marcar tareas como completadas
   • Botón para eliminar tareas de la lista
   • Contador que muestre cuántas tareas quedan pendientes
3. Asegúrate de que:
   • Las tareas sean objetos con propiedades: id, text, completed
   • Uses reactividad adecuada (reasignación de arrays)
   • Los estilos estén scoped al componente
   • Manejes correctamente los eventos de click
4. Prueba tu componente importándolo en +page.svelte

Pistas

• Recuerda que para trigger reactividad con arrays debes reasignar, no solo mutar
• Usa on:submit con preventDefault en el formulario para evitar recarga de página
• Genera IDs únicos para cada tarea usando Date.now() o una librería como nanoid

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.