Introducción

1

Implementación de Aplicaciones Web con Svelte

2

Introducción a Svelte: Creación de Interfaces de Usuario Simples

Elementos básicos de Svelte

3

Primeros Pasos con Svelte: Instalación y Configuración Básica

4

Estilos CSS y Variables Globales en Componentes Svelte

5

Creación e Importación de Componentes en Svelt

6

Reactividad en Svelt: Creación de un Contador Interactivo

7

Componentes Svelte: Uso de Propiedades y Valores por Defecto

8

Condicionales y Dark Mode en Componentes Svelte

9

Estructuras de Control en Svelte: Iteración de Arreglos y Componentes

10

Eventos DOM y Binding de Datos en Svelte

11

Manejo del ciclo de vida de componentes en Svelte

12

Reactividad en Svelte: Uso de Stores para Componentes Compartidos

Configuración del proyecto

13

Creación de una Red Social con Svelte y Git

14

Configuración de Webpack para Proyectos Svelte

15

Creación de un Proyecto Web con HTML5 y Svelte paso a paso

Desarrollo de la aplicación

16

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

17

Estructuración de Headers y Sidebars en Aplicaciones Web

18

Estructura de Componente Timeline en Svelte para Pubstagram

19

Estilos CSS para Aplicaciones con Svelte

20

Conexión de Aplicaciones Svelte a APIs Públicas

21

Integración de API para Comentarios en Pubstragram

22

Creación de un Modal para Compartir en Facebook con Svelte

23

"Implementación de Likes y Stores en Svelte para Pubsstagram"

Deployment

24

Despliegue de Aplicaciones con Netlify y GitHub

25

Desarrollo de Aplicaciones Web con Svelte y PUXTgram

26

Programación en Python para Principiantes

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 en Svelt: Creación de un Contador Interactivo

6/26
Recursos

¿Cómo se implementa la reactividad en Svelt?

La reactividad en Svelt nos permite crear aplicaciones interactivas que respondan a las acciones del usuario. Este enfoque nos facilita construir aplicaciones dinámicas de manera eficiente y flexible. Un ejemplo clásico para entender esta funcionalidad es la creación de un contador interactivo.

¿Cómo se define una variable reactiva en Svelt?

Para iniciar, debes declarar una variable que servirá de base para la reactividad. En nuestro ejemplo, creamos una variable count con un valor inicial de cero. Esto se logra con la sintaxis let en JavaScript:

let count = 0;

¿Cómo se actualiza el contador?

Una funcionalidad clave en aplicaciones interactivas es la capacidad de modificar el estado. Para incrementar el valor del contador, se debe crear una función que gestione esta lógica:

function handleClick() {
  count += 1;
}

Esta función handleClick se encargará de incrementar count en uno cada vez que sea ejecutada.

¿Cómo se enlaza la función con un botón?

El siguiente paso consiste en capturar un evento del usuario, como un clic en un botón, para disparar la actualización del contador. En el HTML del componente, declaramos un botón y lo vinculamos a la función handleClick utilizando el atributo on:click:

<button on:click={handleClick}>Clic</button>

El código anterior asegura que cada vez que el usuario haga clic en el botón, el valor de count se incrementará en uno.

¿Cómo mostrar u ocultar el contador según su valor?

Un detalle adicional es controlar cuándo mostrar el valor del contador. Utilizamos una expresión ternaria para verificar si count es igual a cero y así decidir si mostrar el valor:

{#if count !== 0}
  <p>Contador: {count}</p>
{/if}

En este caso, el valor del contador solo se muestra si es diferente de cero. Si el contador está en cero, el párrafo con el valor no se imprimirá en la interfaz.

Esta combinación de declarativos y funcionalidades interactivas convierte a Svelt en una herramienta poderosa para el desarrollo de interfaces de usuario modernas. Con Svelt, puedes construir aplicaciones reactivas con menos código, pero manteniendo un alto nivel de eficiencia y claridad en el resultado final.

¡Anímate a experimentar con Svelt y sigue explorando sus posibilidades para enriquecer tus proyectos!

Aportes 20

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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 😍

Está genial. Ahora lo importante es saber cómo manejar diferentes tipos de eventos para hacer la reactividad en Svelte tan personalizable como queramos, y necesitemos!

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?

👌