Estructuras de Control en Svelte: Iteración de Arreglos y Componentes

¿Cómo iterar sobre un arreglo en Svelte?

En el desarrollo de aplicaciones web, iterar sobre un arreglo de datos y mostrar su información en la interfaz de usuario es una práctica común y esencial. Svelte proporciona herramientas prácticas para manejar estructuras de control al iterar sobre arreglos. Veamos cómo hacerlo mediante el uso de un componente en Svelte.

¿Cómo crear un componente en Svelte?

Para mostrar habilidades técnicas en la interfaz de usuario, primero necesitamos crear un componente específico. Este componente se denominará Skills y presentará las habilidades almacenadas en un arreglo de objetos.

1. Crea un nuevo archivo llamado Skills.svelte en la carpeta de componentes.
2. Define el script y crea un arreglo de objetos con información sobre las habilidades.

<script>
  let skills = [
    { id: 1, name: 'HTML' },
    { id: 2, name: 'CSS' },
    { id: 3, name: 'JavaScript' }
  ];
</script>

¿Cómo se utilizan las estructuras de control para iterar?

Para iterar sobre el arreglo y mostrar cada habilidad en la vista, utilizamos la estructura de control #each que Svelte provee:

<div>
  <h2>Habilidades</h2>
  <ul>
    {#each skills as {name}, index}
      <li>{name}</li>
    {/each}
  </ul>
</div>

• El bloque #each permite iterar sobre cada elemento del arreglo skills.
• Se desestructura el objeto para extraer el atributo name, que es el que se necesita mostrar.
• {name} representa la habilidad en cada iteración.

¿Qué estilos aplicar para mejorar la apariencia?

Una vez estructurada la lógica, es fundamental darle un buen estilo a la lista de habilidades para mejorar la experiencia visual.

<style>
  div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline;
    margin: 0 10px;
  }
</style>

• Utiliza display: flex en el contenedor para centrar los elementos.
• Restablece márgenes y relleno de la lista con margin: 0 y padding: 0.
• Elimina los puntos de lista (list-style: none) para una apariencia más limpia.
• Los elementos li se muestran en línea con un margen entre ellos.

¿Cómo integrar el componente en la aplicación?

Para ver los resultados, es necesario importar y utilizar el componente Skills dentro de nuestra aplicación principal.

1. Realiza el import del componente:

import Skills from './components/Skills.svelte';

2. Incorpora el componente <Skills /> dentro del HTML de la aplicación donde se desea mostrar la lista de habilidades.

Tras seguir estos pasos, al ejecutar la aplicación, debería visualizarse la lista de habilidades (HTML, CSS, JavaScript) estilizada tal como se planeó. Svelte facilita mucho el manejo y la presentación de datos dinámicos, haciendo más intuitivo el proceso de desarrollo. ¡Continúa profundizando y experimentando con Svelte para mejorar tus habilidades!