DEV Community

Cover image for ¿Qué es Astro y cómo empezar?
Franco Andrés
Franco Andrés

Posted on • Updated on

¿Qué es Astro y cómo empezar?

¡Hola!

La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! 🤯

Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub.

¿Pero qué es?

Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”

Puedes leer con más detalles en la introducción a Astro.

Básicamente lo que hace Astro es enviar menos JavaScript en el momento de la compilación convirtiendo todo en HTML estático.

Lo más interesante es que puedes usar cualquier framework o librería (React, Vue, Svelte, etc), para desarrollar tu aplicación.
Hasta usar varios frameworks en un mismo proyecto.

Por ejemplo:

  • Todo.jsx
  • Todo.vue
  • Todo.svelte

Esto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔

Iniciar un proyecto con Astro

⚠️ Importante

La versión mínima de Node.js que se requiere es la 14.15.1.

# Inicializamos Astro 
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start
Enter fullscreen mode Exit fullscreen mode

Bienvenido a Astro

Uso

Estructura básica recomendada:

├── src/
│   ├── components/
│   └── pages/
│       └── index.astro
├── public/
└── package.json
Enter fullscreen mode Exit fullscreen mode

Dentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en un archivo .astro.

Así es como se ve un archivo .astro

---
import Nav from '../components/Nav.astro';
import TodoReact from '../components/Todo.jsx';
import TodoSvelte from '../components/Todo.svelte';
---

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Astro</title>
 </head>
 <body>
   <header>
     <!-- Colocamo nuestro componente Astro -->
     <Nav />
   </header>
   <div class="contentTodo">
     <!-- Colocamo nuestro componente React -->
     <TodoReact:visible />
     <!-- Colocamo nuestro componente Svelte -->
     <TodoSvelte:visible />
   </div>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (---).

Routing

El enrutamiento ocurre dentro de src/pages/* los archivos .astro se convierten en .html estático.

Por ejemplo tienes lo siguiente:

  • index.astro
  • about.astro
  • 404.astro

Los archivos de esta carpeta se corresponde con una URL pública.

Ejemplo:

Archivo local URL publica
src/pages/index.astro /index.html

¡Astro tiene muchas características más!

Más info

Conclusión

Hay muchos temas más para cubrir, pero espero que este breve artículo pueda servir como para entender un poco Astro y como empezar.
Esta tecnología es muy nueva, es probable que haya algunos errores, pero el equipo de astro está trabajando duro todos los días.

¡Saludos!

Discussion (0)