40
loading...
¿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.
Hasta usar varios frameworks en un mismo proyecto.
Por ejemplo:
Todo.jsxTodo.vueTodo.svelteEsto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔
⚠️ 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
Estructura básica recomendada:
├── src/
│ ├── components/
│ └── pages/
│ └── index.astro
├── public/
└── package.jsonDentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en 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>Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (
---).El enrutamiento ocurre dentro de
src/pages/* los archivos .astro se convierten en .html estático.Por ejemplo tienes lo siguiente:
index.astroabout.astro404.astroLos 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!
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.
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!
40