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

¿Cómo instalar y configurar un ambiente de desarrollo con Svelte?

Para comenzar a trabajar con Svelte, es esencial tener un entorno de desarrollo bien configurado. A medida que las tecnologías web evolucionan, Svelte se ha convertido en una poderosa herramienta para construir interfaces de usuario eficientes y reactivas. Te guiaré a través de los pasos iniciales para instalar y preparar tu proyecto con Svelte. ¡Comencemos a explorar este maravilloso framework!

¿Qué herramientas son necesarias?

Es fundamental contar con las herramientas adecuadas para facilitar tu trabajo. Aquí te menciono las que utilizaremos en este tutorial:

• Terminal: Usaremos iTerm para usuarios de Mac.
• Editor de código: Visual Studio Code es una opción popular por su flexibilidad y funcionalidades.
• Navegador web: Opta por Google Chrome para ver los resultados de tu trabajo en Svelte.

Con estas herramientas a tu disposición, ¡estás listo para comenzar!

¿Cómo instalar Svelte con NPX?

La instalación inicial de Svelte es sencilla gracias a NPX. Sigue estos pasos para crear una instancia de Svelte en tu máquina:

1. Abre tu terminal.

2. Ejecuta el comando siguiente para crear tu proyecto base de Svelte:

   npx degit sveltejs/template nombre-del-proyecto
   

   Donde nombre-del-proyecto es el nombre que deseas asignar al proyecto. Este comando generará un proyecto base en la carpeta indicada.

3. Accede a la carpeta del proyecto con:

   cd nombre-del-proyecto
   

4. Instala las dependencias necesarias usando npm:

   npm install
   

Estos pasos te permitirán tener un proyecto Svelte listo para ser explorado y personalizado.

¿Cómo organizar los archivos del proyecto Svelte?

El proyecto de Svelte viene con una estructura básica que facilita su inicio. Comprender estos elementos te ayudará a dar los primeros pasos:

• node_modules: Contiene las dependencias del proyecto.
• public: Aquí se almacenan los archivos que se expondrán al compilar el proyecto, incluyendo el index.html, favicon y archivos CSS globales.
• src: Contiene los archivos de la fuente principal del proyecto como App.svelte y main.js.

Además, te encontrarás con:

• .gitignore: Lista de archivos y carpetas a ignorar por Git.
• package.json: Define las dependencias y scripts básicos, como Rollup, Svelte y el servidor de desarrollo local.

¿Cómo inicializar y versionar el proyecto en Git?

Es una buena práctica inicializar Git en cada nuevo proyecto. Esto ayuda a mantener un historial de cambios y facilita colaboraciones futuras. Aquí te muestro cómo hacerlo:

1. Inicializa un repositorio en Git:

   git init
   

2. Luego, para levantar el proyecto en tu entorno local, ejecuta:

   npm run dev
   

Este comando habilitará el servidor de desarrollo, mostrando tu sitio en tiempo real.

¿Cómo explorar un archivo Svelte?

Los archivos .svelte reúnen lógica, componentes visuales y estilos en un mismo documento, lo que maximiza la agilidad durante el desarrollo. Exploraremos App.svelte:

• Lógica: Utiliza <script> para definir variables y funciones.
• Vista: La estructura HTML dentro del archivo representa el diseño de la UI.
• Estilos: Dentro de <style>, aplicas CSS directamente al componente.

Por ejemplo, supongamos que queremos mostrar un nombre de la siguiente manera:

<script>
  export let lastName = "Pérez";
</script>

<style>
  h1 { color: blue; }
</style>

<h1>Hola, {lastName}</h1>

En main.js, pasamos este prop:

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    lastName: 'Óscar'
  }
});

export default app;

Al guardar los cambios y revisar en el navegador, verás que la aplicación refleja esta personalización: "Hola, Óscar".

A partir de estos primeros pasos, ya tienes una base firme para adentrarte en el desarrollo con Svelte. ¡Continúa explorando y creando proyectos cada vez más complejos!