En este artículo vamos a explicar una parte fundamental de Svelte y en general de cualquier framework moderno para el Frontend, los componentes.

Un componente no es más que una pieza de una página web, aislada, y que puede ser reutilizada en cualquier sitio.

Ejemplo rápido. Imagina que tienes una web y quieres crear un sistema de tabs en distintas partes de la misma. En estos casos lo que se suele hacer es crear un componente de tabs que puedes reaprovechar donde necesites.

Los componentes, al igual que las clases en los lenguajes de programación, también permiten ser configurados con parámetros. En el ejemplo anterior un parámetro (en los componentes se suelen llamar props) podría ser los textos de las tabs que se necesitan.

Hoy en día los componentes son tan importantes que incluso existen arquitecturas orientadas a componentes. Con un buen sistema de componentes ya creados puedes ser capaz de crear un montón de vistas de la web en muy poco tiempo.

Antes de empezar es importante que ya sepas Crear proyectos Svelte y la Estructura de ficheros de proyectos Svelte

Componente Hello World

Toca fabricar nuestro primer componente. Para ello simplemente crea un fichero con el nombre del componente y la extensión .svelte. Yo voy a crear uno llamado Counter.svelte dentro de una carpeta que he llamado components dentro de src.

<p>Hello world!</p>

Listo, eso ya es un componente válido para Svelte. A diferencia de otros frameworks, como Svelte es compilado, no necesitas crear clases, ni importar cosas raras para crear un componente.

Bien, ¿pero cómo se usa un componente?. Pues muy sencillo, simplemente tienes que ir al fichero .svelte de la ruta de la web en la que quieras usarlo (recuerda que en SvelteKit, existe una carpeta llamada routes donde cada fichero es una ruta de la web).

Yo voy a usarlo dentro de src/routes/+page.svelte ya que este fichero se encarga de renderizar la ruta raíz de la web. Es posible que si no has cambiado este fichero tengas algo similar a esto, puedes borrarlo:

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

Para usar un componente que has creado tan solo tienes que crear una etiqueta <script> encima del HTML y dentro hacer un import de Javascript al fichero con el componente que acabas de crear:

<script>
  import Counter from "../components/Counter.svelte"
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

Yo he importado el componente Counter que he creado antes (sustituye el nombre y la ruta por el componente que hayas creado tú).

Por último ahora tan solo tienes que crear una etiqueta HTML con el nombre del componente que has importado, es decir:

<script>
  import Counter from "../components/Counter.svelte"
</script>

<Counter />

Svelte tiene autocierre de etiquetas, no hace falta que crees la etiqueta HTML de cierre.

Y listo! Acabas de crear tu primer componente en Svelte. Puedes crear tantos componentes como quieras, y lo bueno es que puedes instanciarlos varias veces por ejemplo:

<script>
  import Counter from "../components/Counter.svelte"
</script>

<Counter />
<Counter />
<Counter />

Partes que componen un componente

Sin darte cuenta ya hemos visto dos piezas clave de los componentes, el HTML y el Javascript.

El Javascript en Svelte se escribe dentro de las etiquetas <script></script>. Solo puede haber una de estas etiquetas y dentro se escribe código Javascript vanilla.

Debajo de la etiqueta <script> se escribe el HTML, directamente, sin tener que crear etiqueta <template como en otros lenguajes. Además Svelte soporta poder añadir varias etiquetas HTML de primer nivel.

Por último los estilos, que no los hemos visto. Se escriben dentro de la etiqueta <style></style>

Cómo crear un componente contador

Ahora que sabes crearlos, vamos a fabricar un componente contador, que simplemente tenga un botón y un texto con el número de veces que se ha pulsado al botón.

Lo primero que suelo hacer es maquetar el componente, en este caso con esitlos muy básicos:

<p>Current value is: </p>
<button>Increment</button>

<style>
  button {
	background: #aec8f2;
	padding: 8px 16px;
    cursor: pointer;
  }
  button:hover {
    background: #96ade3
  }
</style>

Como ves, si no te digo que esto es un componente Svelte, pasaría totalmente por código HTML vanilla.

Ahora vamos a hacer la lógica de pulsar el botón y pintar el numerito, así de paso explico cómo crear variables en los componentes:

<script>
  let counter = 0;
</script>

<p>Current value is: {counter}</p>
<button>Increment</button>

<style>
  button {
	background: #aec8f2;
	padding: 8px 16px;
    cursor: pointer;
  }
  button:hover {
    background: #96ade3
  }
</style>

Las variables se crean igual que en Javascript (Variables), con let o const (recuerda hacerlo en la etiqueta script). Para pintar una variable en el HTML tan solo tienes que ponerla entre llaves, eso es todo. En Svelte nunca se crean variables var*, Variables var y su diferencia con let y const

Tan solo queda incrementar la variable al pulsar el botón (y actualizar el HTML con el nuevo número):

<script>
  let counter = 0;
</script>

<p>Current value is: {counter}</p>
<button on:click={() => counter++}>Increment</button>

<style>
  button {
	background: #aec8f2;
	padding: 8px 16px;
    cursor: pointer;
  }
  button:hover {
    background: #96ade3
  }
</style>

Listo, eso es todo el código. Lo que mola mucho de Svelte es que las variables son reactivas out of the box, es decir, siempre que crees una variable y la pintes en el HTML, si la cambias, el HTML se actualizará automáticamente con el nuevo valor.

Esto en otros lenguajes es mucho más complejo de hacer, y normalmente requiere de declarar la variable de forma especial para que sea reactiva. El compilador de Svelte sabe el uso que le das a las variables y por lo tanto te crea esa reactividad sin que tengas que hacer nada.

De paso también has aprendido que, dentro del HTML, puedes crear un atributo on:click para ejecutar algo cuando el usuario clicke sobre el botón. Lo que tienes que tener cuidado es con las llaves, ya que en el HTML son necesarias cuando llamas a variables o funciones del script>, por eso el on:click no lleva comillas.

Link al REPL de Svelte con el código del contador

Próximos pasos

Ahora que sabes crear componentes te recomiendo que sigas tu aprendizaje con el Sistema de templating de Svelte (lo que puedes hacer en el HTML) o Dentro del script en componentes Svelte 🚧.