Mostrar listas dinámicas es una de las tareas más frecuentes al construir interfaces. En Svelte, la estructura de control each permite recorrer un arreglo y renderizar cada elemento directamente en la vista, sin necesidad de métodos adicionales. A continuación se explica paso a paso cómo crear un componente de habilidades que itera sobre un arreglo de objetos y los presenta con estilos limpios.
¿Cómo crear el componente Skills con un arreglo de objetos?
El primer paso es crear un archivo llamado Skills.svelte dentro de la carpeta de componentes, siguiendo la convención de nombres con la primera letra en mayúscula [0:20]. Dentro del bloque <script> se define la lógica del componente, que en este caso consiste en declarar un arreglo de objetos con la información de cada habilidad:
svelte
<script>
let skills = [
{ id: 1, name: 'HTML' },
{ id: 2, name: 'CSS' },
{ id: 3, name: 'JavaScript' }
];
</script>
Cada objeto posee un id y un name, lo que permite identificar y mostrar cada habilidad de forma ordenada [0:42].
¿Cómo funciona la estructura de control each en Svelte?
Svelte ofrece una sintaxis propia para iterar sobre arreglos directamente en el markup. Se utiliza {#each} para abrir el bloque y {/each} para cerrarlo [1:08]. Dentro se puede acceder a cada elemento del arreglo y, opcionalmente, al índice:
svelte
{#each skills as { name }, index}
<li>{name}</li>
{/each}
En este ejemplo se aplica destructuración sobre cada objeto para extraer únicamente la propiedad name. Esta técnica es útil cuando solo se necesitan uno, dos o hasta tres campos del objeto [1:50].
¿Cuándo conviene no destructurar?
Si el objeto tiene más de tres propiedades que se van a utilizar, la recomendación es recibir el objeto completo como skill y acceder a cada valor con notación de punto: skill.name, skill.id, etc. [2:00]. Esto mantiene el código legible y evita una línea de destructuración demasiado extensa.
¿Cómo se integra el componente en la aplicación principal?
Desde el archivo principal se importa el componente y se coloca en el markup como cualquier etiqueta [2:30]:
svelte
<script>
import Skills from './Components/Skills.svelte';
</script>
<Skills />
Es importante verificar la ruta del import; herramientas de autocompletado pueden duplicar carpetas en la ruta, lo que genera errores [2:42]. Usar plugins de detección de errores en el editor ayuda a identificar typos antes de ver el resultado en pantalla [3:00].
¿Cómo aplicar estilos con scope al componente?
Svelte permite definir estilos con alcance local dentro de la etiqueta <style> de cada componente, de modo que no afectan al resto de la aplicación [3:22]. Para el componente Skills se aplican las siguientes reglas:
svelte
<style>
.skills {
display: flex;
align-items: center;
justify-content: center;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline;
margin: 0 10px;
}
</style>
- display: flex junto con
align-items y justify-content centran el contenido horizontal y verticalmente.
- Resetear
margin, padding y eliminar los bullets con list-style: none produce una lista limpia.
- Asignar
display: inline a los <li> coloca las habilidades en una sola línea, con un margen lateral que las separa visualmente [3:50].
Con estos pasos el componente muestra HTML, CSS y JavaScript alineados de forma horizontal, iterando automáticamente sobre el arreglo cada vez que se renderiza la vista [4:10].
Si estás experimentando con Svelte, prueba agregar más objetos al arreglo o nuevas propiedades como un icono o un nivel de dominio, y comparte cómo personalizaste tu componente.
