Guía práctica: Cómo crear un proyecto de Svelte desde cero

Configuración inicial del entorno

En este vídeo, aprenderás a iniciar un proyecto de Svelte desde cero utilizando las herramientas oficiales de scaffolding. El proceso se centra en el uso de npx y la herramienta de Rich Harris para clonar rápidamente una plantilla de proyecto base.

Pasos fundamentales seguidos:

• Ejecución de plantillas: Utilización de npx degit para descargar el repositorio base sin historial de git.
• Instalación: Ejecución de npm install para configurar todas las dependencias necesarias.
• Entorno de desarrollo: Uso del entorno de desarrollo local con npm run dev para visualizar cambios en tiempo real.

Estructura del proyecto y componentes

El vídeo explora cómo está organizado internamente un componente de Svelte, dividiéndolo en tres pilares fundamentales:

"Tenemos una parte de script donde podemos decirle la funcionalidad, el de style para los estilos y el marcado."

• Componente App.svelte: Analizamos la estructura del componente principal, destacando cómo el uso de la directiva export permite definir props.
• Punto de entrada (main.js): Entendemos cómo se instancia la aplicación (new App) y se define el target (normalmente document.body) donde se renderizará el HTML.
• Productividad: Se recomienda instalar la extensión oficial de Svelte para Visual Studio Code para habilitar el syntax highlighting y el IntelliSense.