Reactividad en Svelt: Creación de un Contador Interactivo

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>```

Aquí pueden ver como funcionan todos los eventos de svelte

La simplicidad de Svelte es perfecta.

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

Que clase de Vue es esto jaja

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!

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

👌