Para instalar automáticamente React en Astro:
npx astro add react
Astro instalará y configurará automáticamente React y todas sus dependencias, también se encargará de modificar los archivos de configuración automáticamente.
¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 4
Para instalar automáticamente React en Astro:
npx astro add react
Astro instalará y configurará automáticamente React y todas sus dependencias, también se encargará de modificar los archivos de configuración automáticamente.
El término Island se refiere a un componente de interfaz de usuario interactivo en una página estática. En la cual, pueden existir varias islas que puede ser desarrollada en diferentes Frameworks o librerías populares de JavaScript (React, Svelte, Vue, etc.), mezcladas en la misma página.
.
✨Concepto clave
El patrón de arquitectura de la se construyen las Islands se conoce como hidratación parcial o selectiva.
.
Si bien, Astro compila código para generar las páginas de nuestro sitio web, Astro no dispone de dicho código del lado del cliente, delegando dicha responsabilidad a un módulo de servidor para renderizar el contenido automáticamente, anticipando y eliminando JavaScript del build final.
.
✨Concepto clave
Con este mecanismo, Astro mantiene todos los sitios web rápidos de forma predeterminada para mejorar el rendimiento y SEO.
.
Sin embargo, Astro entiende que algunas veces, por interacción y anatomía de la Isla que renderiza, es necesario emplear y dejar un mínimo de JavaScript para convertir la página en un SPA o Single-Page-Application. De ello, Astro nos delega la elección mediante su declaración client
.
.
El beneficio principal de construir Astro con Islas es el rendimiento, minimizando el producto final para que sea rápido en la carga sin JavaScript que lo sature.
.
Por su parte, las Islas nos permiten desarrollar Frameworks o librerías populares que nos permitan heredar o integrar para no recrear la rueda un Sistema de Diseño.
.
Por último, con la directiva client
, le indicamos a Astro exactamente cómo y cuándo renderizar cada componente.
📌 Enlaces importante
@astrojs/react
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?