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

Reactividad

6/26
Recursos

Aportes 19

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Eso si es reactividad! Se vuelve tan fácil manipular variables en Svelte, en React tendría que hacer un hook para eso usando más líneas de código. Genial!

Le agregu’e un bot’on para resetear el contador. Tambi’en aparece solamente si el contador es mayor a 0.

<script>
    //Logica
    let someText = `Frontend Developer at Platzi`;
    let count = 0;

    function handleClick() {
        count += 1;
    }

    function resetClick() {
        count = 0;
    }
</script>

<style>
    p {
       color: var(--theme-color);
    }
</style>

<div class="about">
    <p>{someText}</p>
    <button on:click = {handleClick}>Click {count === 0 ? '' : count }</button>
    {#if count > 0}
    <button on:click = {resetClick}>Reset</button>
    {/if}
</div>```

Reactividad: Elementos que permiten la interacción con el usuario.

La simplicidad de Svelte es perfecta.

Que extension de vscode usas para detectar el color de on:click? instale varios y ninguno lo detecta 😕

El código analizado desde Svelte DevTools 😍

siento que svelte se parece muchísimo a vue

Le agrege una funcion que reste el contador gg

<script>
    let someText = ` Soy desarrollador`;
    let count = 0;

    function handleClick() {
        count+=1;
    }

    function removeCounter(){
        count-=1;
    }
</script>

<style>
    p {
        color: var(--theme-color)
    }
    .counter {
        display: inline-block
    }
    button {
        height: 50px;
        width: 50px;
    }
</style>

<div id="About">
    <p> {someText} </p>
    <button on:click={removeCounter}>-</button>
    <p class='counter'>{count < 0 ? 'No negative numbers' : count}</p>
    <button on:click={handleClick}>+
    </button>
</div>

Wow la reactividad con Svelte es genial, el uso de directivas como en vue(solo que en vue es v-on: en lugar de on:), y expresiones: como usar una ternary operator. Es genial!

Para evitarnos la ternaría que muestra el valor de count también es válido

{count || ' ' }

A través de una función flecha!

let count = 0;
const handleClick = () => count++;

Wow! impresionante! qué fácil fue esto!

Les comparto un link que tiene otros modificadores muy interesantes aquí

<script>
	function handleClick() {
		alert('clicked')
	}
</script>

<button on:click|once={handleClick}>
	Click me
</button>

Me deja asombrado la forma como trabajan la reactividad. Me gusta mucho.

Sencillo. Sin tanto código, se hizo la reactividad. Gracias, Svelte!

Que clase de Vue es esto jaja

La Reactividad en su maxima expresión 😍
Oscar que theme de vscode utilizas?

👌