Taller de Astro: colecciones, transciciones y AstroDB
Ponemos a prueba Astro sacando partido de 3 de sus funcionalidades más populares, potentes y sorprendentes.
Duración total: 01:32:29
Código descargable
Acceso 100% online
Taller práctico sobre Astro: colecciones y esquemas con Zod, rutas dinámicas y SSR, animaciones con View Transitions e integración de persistencia con AstroDB y Drizzle.
Qué vas a aprender
- 1Definir colecciones y esquemas en Astro usando Zod para content-first
- 2Integración y uso de AstroDB para persistencia local y remota
- 3Rutas dinámicas y uso de params/getStaticPaths para páginas por slug
- 4Renderizado SSR, adaptadores y output hybrid/prerender en Astro
- 5Crear APIs en pages/api para operaciones (votos) y comunicación cliente-servidor
- 6Definir tablas y seeds con Drizzle ORM para la base de datos de votos
- 7Implementar View Transitions API para transiciones entre rutas
- 8Estructura de componentes .astro: frontmatter (servidor) vs cliente
- 9Islands Architecture: integrar componentes React dentro de Astro
- 10Scripts en cliente, passing de variables del servidor y client:load
Explora los capítulos
1. Introducción al taller y participación [07:21]
Introducción al taller y participación
[00:46]
Exploración específica de Astro
[00:32]
Características clave: detalle de proyectos y botón de votar
[00:32]
Funcionalidades de Astro y compatibilidad con otros frameworks
[03:10]
Demo y desaparición de elementos previos
[00:28]
Formato de componentes en Astro y configuración en VS Code
[01:53]
2. Manejo de enrutado en la carpeta Pages [03:32]
Manejo de enrutado en la carpeta Pages
[01:32]
Uso de Markdown y JSON en Astro
[01:17]
Configuración de archivos en JavaScript
[00:14]
Construcción de proyectos con Astro
[00:29]
3. Esquemas de contenido y estructura de carpetas [20:09]
Esquemas de contenido y estructura de carpetas
[01:02]
Generación de esquemas detallados con Zod
[03:18]
Interrupciones y soluciones rápidas en el flujo de trabajo
[01:22]
Importancia de definir props y atributos
[01:08]
Campos añadidos automáticamente por Astro
[01:08]
Condicionamiento de elementos opcionales en JSX
[01:28]
Simplificación del proceso en Vue
[00:12]
Indicaciones de contenido YAML
[00:18]
JavaScript del servidor y scripts del cliente
[00:20]
Acostumbrándose al nuevo flujo de trabajo
[04:10]
Errores en modo desarrollo y build
[00:15]
Concordancia del front matter con el esquema de colección
[00:42]
XGPT y especificación de reglas
[01:58]
Parámetros props y contexto en Astro
[02:21]
Procesamiento y optimización de JavaScript en el cliente
[00:08]
Cargar JavaScript inline en la plantilla
[00:19]
4. API de 'View transitions' del navegador [13:57]
API de 'View transitions' del navegador
[03:01]
Efectos de zoom y documentación
[01:21]
Simplificación del uso de IDs en Astro
[01:58]
Transiciones avanzadas en WebReactiva
[01:10]
Potencia del navegador y desactivación de funciones
[01:07]
Precarga de páginas en Gatsby
[00:47]
Precarga de posts y gestión de errores
[00:13]
Errores en el renderizado de elementos precargados
[00:18]
Avisos en la versión de desarrollo
[04:02]
5. Objetivo de AstroDB: persistencia remota de datos [47:30]
Objetivo de AstroDB: persistencia remota de datos
[00:39]
Text fill y gestión de contenido
[00:30]
Claridad en la documentación y búsqueda de detalles
[00:26]
Funcionamiento remoto recomendado para producción
[00:36]
Funcionalidad de 'Me Gusta' en artículos
[03:35]
Definición de tabla de votos
[00:26]
Simplificación del proceso de votos en la base de datos
[00:18]
Uso de scripts para desarrollo local
[01:54]
Funcionalidad del botón de votar
[02:27]
Autocompletado y reducción de errores en el código
[00:12]
Identificación de post ID como slug
[00:20]
Captura de parámetros de URL con Params de Astro
[02:07]
Creación de rutas dinámicas y APIs en Astro
[02:26]
Definición de rutas API en Astro
[00:25]
Uso de React Server Components
[00:41]
Ejecución de botones en el cliente y servidor
[01:35]
Manejo de eventos y fetch en botones
[02:22]
Manejo de páginas y rutas dinámicas en Astro
[00:10]
Ajustes para rutas dinámicas que devuelven JSON
[01:13]
Integraciones específicas y características de Astro
[00:56]
Modos de salida: estático y bajo demanda
[02:50]
Ejecución de JavaScript en el cliente
[01:20]
Colocación de scripts en código HTML
[00:27]
Implementación de rutas API en el servidor
[02:13]
Desarrollo y alimentación de bases de datos
[01:07]
Acceso técnico a ficheros de seguridad
[00:34]
Creación de proyectos en Astro Studio
[01:43]
Vinculación con AstroStudio y futuras características
[00:48]
Gestión de cambios en bases de datos
[02:26]
Uso de tokens en archivos .env
[00:45]
Conexión remota con Astro Studio
[01:18]
Lanzamiento de previews y generación de builds
[01:07]
Confirmación de datos en base de datos remota
[01:52]
Conversión de código a React con TypeScript
[00:17]
Encapsulación de funcionalidad de votación en componente
[00:27]
Instalación de adaptadores para Islands Architecture
[03:15]
Directiva client load en componentes React
[01:12]
Grabación de la sesión y puntos fuertes de Astro
[00:14]
Agradecimientos y final de la sesión
[00:17]
Desde 15€/mes
Este contenido es para suscriptores
Accede a “Taller de Astro: colecciones, transciciones y AstroDB” y a todo el catálogo premium
Desde 15€/mes · Matrícula: 24€ (solo tu primera vez)
Suscríbete