Cuando nos adentramos en el mundo de Svelte, uno de los primeros pasos fundamentales es crear nuestro primer componente desde cero para entender su estructura básica y cómo funciona internamente. Para ello, comenzamos creando un archivo con extensión .svelte dentro del directorio src. Es importante que el archivo termine en .svelte porque el sistema de construcción, como Rollup, lo reconocerá automáticamente como un componente de Svelte y lo transformará en código JavaScript estándar para que pueda ser renderizado en el navegador.
En nuestro componente, lo principal que vamos a incluir es el código HTML que queremos que se muestre cuando el componente se renderice. Por ejemplo, si queremos que aparezca un título con el texto Hola Mundo, simplemente escribimos un elemento <h1> con ese contenido dentro del archivo .svelte. Al guardar y ejecutar el servidor de desarrollo con npm run dev, veremos cómo el navegador muestra automáticamente ese mensaje sin necesidad de recargar manualmente la página.
Una ventaja de Svelte frente a otros frameworks es que podemos incluir múltiples etiquetas HTML raíz dentro de un componente sin necesidad de envolverlas en un fragmento, como ocurre en React. Por ejemplo, podemos añadir un párrafo <p> debajo del título para mostrar un mensaje adicional, y cualquier cambio que hagamos se reflejará en tiempo real en el navegador gracias al sistema de recarga automática.
Para darle estilo a nuestro componente, utilizamos la etiqueta <style> dentro del mismo archivo .svelte. Esto nos permite escribir CSS que afectará únicamente a ese componente, ya que durante el proceso de compilación Svelte se encarga de transformar esos estilos para que sean únicos y no entren en conflicto con otros componentes que puedan tener estilos similares. Por ejemplo, si definimos que el <h1> tenga un tamaño de fuente de 3rem, esté centrado y sea de color rojo, y que el <p> tenga un tamaño más moderado, color azul y una tipografía diferente, esos estilos se aplicarán solo a nuestro componente.
Este aislamiento de estilos es una característica muy potente de Svelte, ya que evita la necesidad de añadir clases únicas manualmente para cada elemento. Sin embargo, si queremos, también podemos asignar clases personalizadas a los elementos y definir estilos para ellas dentro de la etiqueta <style>. Svelte seguirá asegurándose de que esos estilos sean únicos mediante la generación de identificadores internos.
Por último, dentro de un componente Svelte podemos incluir una etiqueta <script>, que es donde añadiremos la lógica y la interactividad. Normalmente colocamos esta etiqueta al principio del archivo para que sea fácil identificar las variables y funciones que maneja el componente. En esta sección declararemos las entradas (props) y cualquier dato que necesitemos para que el componente funcione dinámicamente. Aunque en este primer acercamiento no profundizamos en el contenido del <script>, es fundamental entender que es la puerta para hacer que nuestro componente sea interactivo y dinámico.
Así, un componente básico de Svelte está compuesto por tres partes principales: la etiqueta <script> para la lógica, el HTML para la estructura visual y la etiqueta <style> para los estilos exclusivos del componente. Esta organización sencilla y clara facilita la creación y mantenimiento de componentes reutilizables y bien encapsulados.