How to build Astro apps using React.js

Updated: a day ago

Astro implementa JS sólo cuando es necesario. ¿Lo crees? 🚀

Aunque, Astro sigue en versión beta y puede tener algunos detalles regulares, ya podemos construir apps usando uno o más frameworks. Así que ¡probémoslo!

Cuando hablamos de páginas web y de su respuesta, la cual debe ser instantánea, no pensamos en un proyecto robusto, si no una página web estática. Por lo que los gestores de esta generación prometen ser más rápidos que el tradicional, y Astro específicamente promete la construcción de websites usando cualquier framework o ninguno, pero sin implementar JavaScript. Al revisar la documentación, encontramos esta leyenda que emociona mucho: “[...] las guerras de frameworks no tendrán un ganador; Astro te permite usar cualquiera que desees (o ninguno) [...] Y sin interactividad, ¿no deberíamos optimizar nuestras herramientas para eso? No somos los primeros en hacer la pregunta, pero podríamos ser los primeros con una respuesta”.


Lo que tiene Astro de especial, es que otros gestores están vinculados a una librería en especial, pero Astro permitirá el uso de cualquiera.



ASTRO

TALK DE LA SEMANA



Sin embargo, actualmente sólo están Svelte, Vue y React. Así que, hoy junto con Andrés, veremos la creación de lo que se conoce hasta ahora como un proyecto en Astro.



¿Cómo es utilizar Astro?


Tan sencillo como correr:

npm init astro


- La primera pregunta: Directory not empty. Continue [force overwrite]? › Yes - Which app template would you like to use? › Starter Kit (Generic) Hagamos el kit de inicio ya que este sirve para guiarnos, sin embargo, todos son buenos. Además tienen otros sitios de ejemplo - Which frameworks would you like to use? › React Escoge una o combina varias de estas opciones: Preact, React, Solid, Svelte y Vue.


Luego, correr:


 npm install


Y esperar...



Astro, tan poco JavaScript como sea posible por defecto.

La estructura es muy similar, al igual que algunos proyectos "src" será nuestra carpeta o directorio principal y "componentes" contendrá dos tipos de archivos: los de extensión .jsx, típico React.js. Y el otro es un componente estático, de extensión .astro


Los componentes Astro manejan perfectamente el HTML como un componente que se puede importar en las páginas.


ℹ️ Tip: No olvides instalar la extensión de IDE para soportar el lenguaje .astro:

______________________________________________



Importando y usando JavaScript.

Para construir componentes dinámicos, usamos un script en Markdown dentro de una valla de código de (3 guiones) donde podemos agregar configs, metadatos y código JavaScript.


Por ejemplo, el import, se escribe en la parte superior en la etiqueta script (---), la cual denota una sección de código Server-Side de forma alineada con la filosofía de Astro.


---
import { component } from 'astro/components';
---

Astro usa Snowpack que proporciona soporte integrado sin configuración. Estas son las importaciones admitidas:

  • JavaScript ( .js, .mjs)

  • TypeScript ( .ts, .tsx)

  • JSON ( .json)

  • JSX ( .jsx, .tsx)

  • CSS ( .css)

  • Módulos CSS ( .module.css)

  • Imágenes & Activos ( .svg, .jpg, .png, etc.)

  • Componentes Astro ( .astro)

  • Markdown ( .md)

  • WASM ( .wasm)


Vamos a reusar la plantilla que nos ofrece Astro e importamos el componente <AstroMessage/> dentro de nuestro archivo index.astro


---
import AstroMessage from '../components/AstroMessage.astro';

Editamos una línea punteada, para ilustrar dónde se coloca el componente


Usa:

npm run dev 

Para iniciar el servidor local.


Inspeccionando la página en el navegador, no podemos localizar la etiqueta del script porque Astro es un lenguaje de plantillas donde el script sólo corre durante la compilación, y sólo representa el HTML en el navegador.


En la línea punteada, vemos donde se mostró el componente



En el CLI Output, nos muestra con [access] la ruta en la que estamos trabajando: /. Y podemos observar además, que los nombres de las clases de cada uno de los contenedores inician con astro/<id>.


Estructura html regular de <AstroMessage/> usando Markdown


Este componente se encargará de recibir en un formulario la información del usuario y enviar por medio de una petición POST a una API de ejemplo.


Luego de enviar el POST, seremos redireccionados a una vista de agradecimiento, un href hacia nuestro index y un un agradecimiento en console.log, porque queremos saber dónde podremos revisar si el código JS se envía o ejecuta en el navegador.


El código JS/TS escrito entre (---), se ejecuta en el Servidor, mira en la Terminal


Con esto, además de emocionarnos con la idea de posibles evoluciones futuras en la web estática, identificamos la participación del CSS y HTML como suficientes sin necesidad de JS. Y cambiar poco a poco el concepto radical de: todo un sitio web será estático o una aplicación completa de JavaScript.


Esperemos que el proyecto logre finalizar de manera exitosa, como ellos dicen en su página de lanzamiento:

¡Estamos trabajando duro en Astro! Mantengan sus ojos en el cielo, astronautas.



_________________________________________________________________________________________


¡Gracias por leer!

MeltStudio.co/blog

22 views0 comments