¿Qué es Astro y cómo empezar?
Tags: javascript, astro, webdev, news
Published: 2021-06-30 15:32:20

¡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](https://astro.build/blog/introducing-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**.

```bash
# Inicializamos Astro 
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start
```
![Bienvenido a Astro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvfnqiiodg50d73w4uzs.png)

### Uso
Estructura básica recomendada:
```
├── src/
│   ├── components/
│   └── pages/
│       └── index.astro
├── public/
└── package.json
```
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`

```md
---
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 (`---`).

### 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!**

- [Hidratación parcial](https://github.com/snowpackjs/astro#-partial-hydration)
- [Markdown](https://github.com/snowpackjs/astro#%EF%B8%8F-markdown)
- [Administración de Estado](https://github.com/snowpackjs/astro#%EF%B8%8F-state-management)
- [Estilismo](https://github.com/snowpackjs/astro#-styling)
- Etc

## Más info 
- Puedes leer más sobre Astro en el [Readme](https://github.com/snowpackjs/astro) del proyecto.
- Mira la [documentación](https://github.com/snowpackjs/astro-docs).
- También en esta demo que hizo Cassidy con [Astro + React + Vue](https://github.com/cassidoo/astro-react-vue-demo).
- Aca dejo mi primera experiencia con [Astro + React + Svelte + Vue](https://github.com/Franqsanz/astro-app-react-svelte-vue-demo), también puedes verlo en [vivo](https://astro-app-demo.netlify.app/).
- Echa un vistazo a este [artículo](https://css-tricks.com/a-look-at-building-with-astro/) en CSS-Tricks.

## 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!