Primeros pasos con Svelte

1 min readJan 23, 2021

Primeros pasos 🚶🏻‍♂️

Svelte te va a permitir hacer más con menos (líneas de código). ¿No lo crees? Vamos a comparar un ejemplo básico entre React y Svelte.

Hola Mundo en React 🌎

import React from 'react';export default () => {
    let world = 'Mundo';
    return <h1>Hola {world}!</h1>;
};

Hola Mundo en Svelte 🌎

<script>
    let world = 'Mundo';
</script><h1>Hola {world}!</h1>

Diferencias entre React y Svelte 🧐

Como verás son parecidos, pero no iguales. Es un ejemplo básico, sí. Pero fíjate en Svelte, simplifica todo mucho. No necesitas importar la librería de svelte ni retornar un JSX, ni nada. Él se lo guisa y él se lo come 😄.

Primer componente con Svelte

Bien. Pues sin saberlo, ya tenías tu primer componente en Svelte. Por ejemplo, tengamos el archivo HelloWorld.js con el siguiente contenido (el del ejemplo anterior):

<script>
    let world = 'Mundo';
</script><h1>Hola {world}!</h1>

¡Perfecto! Ya podemos usar nuestro componente <HelloWorld /> allá donde lo necesitamos. Así de fácil 🙃

¿Te ha gustado y te ha ayudado? 👏🏻