Manejo del ciclo de vida de componentes en Svelte

¿Cómo gestionar el ciclo de vida de un componente en Svelte?

La gestión del ciclo de vida de un componente en Svelte resulta ser una pieza fundamental a la hora de crear aplicaciones dinámicas y efectivas. Este ciclo comienza cuando se crea el componente y finaliza al destruirse. Exploraremos cómo trabajar con el ciclo de vida para realizar peticiones a una API, presentando la información de manera estructurada en un componente que renderea fotografías.

¿Cómo crear un componente de rendereo de fotos?

Comenzamos creando un nuevo componente para mostrar fotos en nuestra interfaz. Lo nombraremos Foros. Este componente será responsable de manejar las peticiones a una API que nos provee imágenes aleatorias. Para ello, seguimos estos pasos:

1. Crear el archivo del componente: Creamos un archivo llamado foros.svelte.

2. Importar el método onMount de Svelte:

   <script>
     import { onMount } from 'svelte';
   </script>
   

3. Establecer la lógica del componente para las peticiones a la API:

   • Inicializamos un arreglo vacío let foros = [].
   • Utilizamos una función asíncrona dentro de onMount para realizar la petición:

   onMount(async () => {
     const response = await fetch('https://jsonplaceholder.typicode.com/photos?_limit=20');
     foros = await response.json();
   });
   

¿Cómo mostrar los datos en la interfaz?

Una vez hechos los pasos previos, nuestro objetivo es desplegar las imágenes en la interfaz. Utilizamos la estructura de control each de Svelte para listar las fotos en un formato adecuado.

<div class="foros">
  {#each foros as foto}
    <figure>
      <img src={foto.thumbnailUrl} alt={foto.title} />
      <figcaption>{foto.title}</figcaption>
    </figure>
  {/each}
</div>

¿Es posible añadir un indicador de carga?

A menudo, resulta útil mostrar un indicador de carga mientras esperamos la respuesta de la API. Esto mejora la experiencia del usuario, especialmente cuando se trata de grandes volúmenes de datos o conexiones lentas.

• Podemos colocar un simple mensaje Loading... o una animación mientras el contenido se carga.

{#if foros.length === 0}
  <p>Loading...</p>
{/if}

¿Cómo embellecer el diseño del componente?

Finalmente, es crucial estilizar nuestro componente para lograr una presentación visual agradable. Utilizamos CSS Grid para esta tarea:

<style>
  .foros {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
  }
</style>

El uso de CSS Grid permite organizar las imágenes en una rejilla, mejorando así la apariencia visual y la experiencia del usuario.

Siguiendo estos pasos, se ha construido un componente que muestra fotos obtenidas de una API, gestionando su ciclo de vida adecuadamente en Svelte. ¡Mantén tu curiosidad activa y sigue aprendiendo nuevas herramientas que enriquecerán tus aplicaciones!