Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Cómo usar Svelte

16/28
Recursos

Aportes 15

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Array con la informacion de las peliculas

[
            {
              name: "Avengers",
              available: 3,
              quantity: 0,
            },
            {
              name: "Terminator",
              available: 5,
              quantity: 0,
            },
          ]

Bueno después de este modulo, mi top fue:

  • React
  • Vue
  • Svelte

😃

En el ejemplo me parece que Svelte es muy parecido a Vue. Ustedes qué opinan?

Cuando escriban el nombre del componente al importarlo aseguresen de poner la primera letra en mayuscula ya que si usan el nombre

form

les saldra un error por usar el mismo nombre de la etiqueta form de html

Rollup


Es un paquete de módulos para JavaScript que compila pequeños fragmentos de código en algo más grande y complejo, como una biblioteca o aplicación. Utiliza el nuevo formato estandarizado para módulos de código incluidos en la revisión ES6 de JavaScript, en lugar de soluciones idiosincrásicas anteriores como CommonJS y AMD. Los módulos ES le permiten combinar libremente y sin problemas las funciones individuales más útiles de sus bibliotecas favoritas. Esto eventualmente será posible de forma nativa en todas partes, pero Rollup te permite hacerlo hoy.



Para mas información puedes ver acá

Saludos! Así es como hice un componente independiente para los botones:

<script>
  export let initialValue = 0;
  export let maxValue ;


 //Por defecto el contador comienza en 0
  let contador = initialValue;

  function aumentar() {
    contador++;
  }

  function disminuir() {
    contador--;
  }
</script>


<button type="button" on:click={disminuir} disabled={contador<=0}>-</button>
{contador}

/*Hacemos que el botón de aumentar se desactive cuando el contador alcance el valor máximo (que le pasaremos al llamar al componente)*/
<button type="button" on:click={aumentar} disabled={contador>=maxValue}>+</button>

Luego al llamar a los botones en el formulario sería de esta manera:

(Realmente no es necesario especificar el initialValue ya que por defecto es 0).

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<Buttons initialValue ={0} maxValue={movie.available}/>
</form>
{/each}

Pensé que Vue era el framework más fácil y rápido de aprender, pero Svelte me sorprendió más de lo que me esperaba

<script>
  const movies = [
    { name: "Avengers", available: 5, quantity: 0 },
    { name: "Wonder Woman", available: 15, quantity: 0 }
  ];
</script>

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<button type="button" on:click={() => movie.quantity--} disabled={movie.quantity <= 0}>-</button>
	{movie.quantity}
	<button type="button" on:click={() => movie.quantity++} disabled={!(movie.quantity < movie.available)}>+</button>
</form>
{/each}

Primera vez que veo Svelte y fue como amor a primera vista -

Ya que terminamos esta sección de entrar en contexto y conocer algunos Frameworks importantes de JS me gustaría compartirles estas notas. 😄

https://complex-swamp-51c.notion.site/REACT-ANGULAR-VUE-y-SVELT-dfe8f4787c124c74a8192c7210ab2a3d

Me quedo con ganas de aprender vue, pero en mi pais no hay mucha ofertas de trabajo asi que a react será

Sobre Svelte muy sencilla la sintaxis me gusto pero si toca elegir me quedo con Vue JS y React a ver en que logro encontrar la oportunidad laboral en mi pais

Yo me fui por DC, Snyder’s cut me gusto mucho.

<script>
  const movies = [
    {
      name: "Avatar",
      available: 5,
      quantity: 0
    },
    {
      name: "Superman man of Steel",
      available: 4,
      quantity: 0
    },
    {
      name: "Batman vs Superman",
      available: 5,
      quantity: 0
    },
    {
      name: "Wonder Woman",
      available: 1,
      quantity: 0
    },
    {
      name: "Acuaman",
      available: 6,
      quantity: 0
    },
    {
      name: "Snyder Cut: Justice Leage",
      available: 10,
      quantity: 0
    }
  ];
</script>

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<button type="button" on:click={() => movie.quantity += 1} disabled={movie.quantity >= movie.available}>+</button>
	{movie.quantity}
	<button type="button" on:click={() => movie.quantity -= 1} disabled={movie.quantity <= 0}>-</button>
</form>
{/each}

Nunca había visto Svelte 😮 me gusto 😃

En español no se dice “SALVAR” eso es una traducción literal del inglés; la manera correcta es “GUARDAR”.

Sí se podría decir “Lo voy a guardar para salvarlo de cualquier accidente y que se pierda todo lo que he hecho”.