No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Ciclo de vida

11/26
Recursos

Aportes 19

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Ciclo de vida

Nota. La raz贸n por la que beforeUpdate es el primero en ejecutar, inclusive antes de onMount, es para revisar la existencia del componente/elemento antes de presentar sus propiedades.
Dentro de la documentaci贸n, se hace hincapi茅 a un concepto especial de Svelte, el Server-side Component API. Esta interfaz, es un mecanismo que explota Svelte ya que la mayor铆a de los componentes, generados en el client-side, de 鈥manera 煤til鈥 solamente expresan su estructura (html), su estilo (css) y comportamiento (js) donde los Frameworks exponen un estado que se mantiene latente y, despu茅s, el Garbage Collection se vuelve loco.
馃帀Aqu铆, yo doy un super punto a Svelte porque nos permite utilizar la API para manejar:

Y llevar nuestro desarrollo a otro nivel.

para grid recomiendo auto fit el cual pueden leer en el siguiente enlace

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

脡ste { : else } si no lo habia visto en un ciclo:

{#each photos as photo}  
    <figure>
        <img src={photo.thumbnailUrl} alt={photo.title}>
        <figcaption>{photo.title}</figcaption>
    </figure>
  {:else}
    <p>Loading...</p>
  {/each}

Pueden utilizar el autofit y depaso se hace responsive.

mmm pense que iba ser mas teoria鈥 de como funciona svelte por dentro鈥
al final terminamos haciendo un llamado a un api鈥

<script>
    // Ejecuta un llamado despues de que el componente sea montado
    import { onMount } from 'svelte';

    let photos = [];

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

<div class="Photos">
    {#each photos as photo}
        <figure>
            <img src={photo.thumbnailUrl} alt={photo.title} />
            <caption>{ photo.title }</caption>
        </figure>
    {:else}
        <p>Loading....</p>
    {/each}
</div>

El enlace de La API usada es:
https://jsonplaceholder.typicode.com/photos?_limit=20

[0].url 馃憞

**Practicando la api de Rick and Morty **

Hubiera sido bueno explicar los otros ciclos de vidas.!

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

por ratos la p谩gina de las im谩genes se torna bastante lenta. Cuando reci茅n hice el ejercicio pintaba las im谩genes en m谩s de 1 min鈥

vengo de angular, y es algo enredado tener el script, html, y el css en el mismo archivo.

vengo de vue y estoy notando que svelte se parece mucho, ambos son muy sencillos con una linea de aprendizaje muy alta
Les recomiendo revisar Vue

Este es mi c贸digo si quieren usar la API de Rick y Morty

  import { onMount } from "svelte";

  let characters = [];


  onMount(async () => {
    console.log("onMount");
    const response = await fetch("https://rickandmortyapi.com/api/character?_limit=50");
    characters = await response.json();
    characters = characters.results;
  });
<div class="Photos">
  {#each characters as character} 
    <figure>
      <img src={character.image} alt={character.title}>
      <figcaption>{character.name}</figcaption>
    </figure>
    {:else}
      <p>Loading...</p>
  {/each}
</div>

En la estructura del each, tambien se puede incluir un catch!!

Como me encanto esta clase, seria buenisimo un curso practico.

Encontr茅 este tutorial de manejo de la API de Rick and Morty con Svelte.
https://medium.com/@edselserranomontiel/svelte-con-rick-and-morty-api-3ada4f222438

A mi, me sirvi贸 bastante.

si subo una imagen en webpack configuro igual un loader si la imagen viene desde nuestros assets