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!
Introducción
Implementación de Aplicaciones Web con Svelte
Introducción a Svelte: Creación de Interfaces de Usuario Simples
Elementos básicos de Svelte
Primeros Pasos con Svelte: Instalación y Configuración Básica
Estilos CSS y Variables Globales en Componentes Svelte
Creación e Importación de Componentes en Svelt
Reactividad en Svelt: Creación de un Contador Interactivo
Componentes Svelte: Uso de Propiedades y Valores por Defecto
Condicionales y Dark Mode en Componentes Svelte
Estructuras de Control en Svelte: Iteración de Arreglos y Componentes
Eventos DOM y Binding de Datos en Svelte
Manejo del ciclo de vida de componentes en Svelte
Reactividad en Svelte: Uso de Stores para Componentes Compartidos
Configuración del proyecto
Creación de una Red Social con Svelte y Git
Configuración de Webpack para Proyectos Svelte
Creación de un Proyecto Web con HTML5 y Svelte paso a paso
Desarrollo de la aplicación
Estructuración de Proyectos Svelte: Componentes y Configuración Básica
Estructuración de Headers y Sidebars en Aplicaciones Web
Estructura de Componente Timeline en Svelte para Pubstagram
Estilos CSS para Aplicaciones con Svelte
Conexión de Aplicaciones Svelte a APIs Públicas
Integración de API para Comentarios en Pubstragram
Creación de un Modal para Compartir en Facebook con Svelte
"Implementación de Likes y Stores en Svelte para Pubsstagram"
Deployment
Despliegue de Aplicaciones con Netlify y GitHub
Desarrollo de Aplicaciones Web con Svelte y PUXTgram
Programación en Python para Principiantes
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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;
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.
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.
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
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 😍
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?
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?