Crea tu web con Astro y Svelte

🚀 ¡Aprende a combinar el poder de Astro y la simplicidad de Svelte en este tutorial completo para principiantes! Te guiaré paso a paso para crear un proyecto web moderno, rápido y optimizado desde cero.

En este video cubriremos:

• ✅ Qué es Astro y por qué es ideal para sitios de contenido.
• ✅ Cómo instalar y configurar la integración oficial de Svelte.
• ✅ Crear tu primer componente interactivo de Svelte dentro de Astro.
• ✅ Entender la “hidratación” con las directivas client
• ✅ Pasar datos (props) desde Astro a tus componentes Svelte.
• ✅ Buenas prácticas para un rendimiento óptimo.

Astro es un framework web que te permite construir sitios más rápidos con menos JavaScript del lado del cliente. Su arquitectura de “islas” lo hace perfecto para combinarlo con frameworks de UI como Svelte, React o Vue, usando cada uno solo donde es necesario.

📖 Requisitos previos

• Conocimientos básicos de HTML, CSS y JavaScript
• Node.js instalado en tu sistema

💻 Repositorio en GitHub

Encuentra el código completo del proyecto en nuestro repositorio de GitHub:

https://github.com/rubenterre/Crea_web_astro_svelte

🔹 Timestamps

00:00 - Presentación

01:12 - Introducción

02:23 - Comenzar proyecto con Astro

07:59 - Estructura de proyecto con Astro

11:31 - Estructura de archivos .astro

12:57 - Layouts de Astro

17:19 - Integración de Svelte

19:51 - Creando componente de Svelte

26:04 - Directivas Client de Astro

29:54 - Pasando props de Astro a Svelte

32:24 - Conclusión

📚 Documentación Oficial de Astro + Svelte: https://docs.astro.build/es/guides/integrations-guide/svelte/ 📘 Documentación de Svelte 5: https://svelte.dev/docs