Frameworks de UI en Astro

Para instalar un framework de UI concreto, simplemente tenemos que escribir el nombre del framework después del comando npx astro add, por ejemplo:

# Instalación de Vue
$ npx astro add vue

# Instalación de React
$ npx astro add react

Estos comandos activarán un asistente que te guiará paso a paso para supervisar la instalación de integraciones para utilizar el framework de UI elegido en Astro.

Además de Vue y React, también tenemos otras opciones interesantes como svelte, preact, solid, etc. Si alguno de ellos es de tu interés, puedes integrarlos. Recuerda que si tienes problemas para realizar la instalación automática, puedes echar un vistazo a la pestaña de la instalación manual.

La instalación manual de Vue se basa en realizar dos pasos:

• 1️⃣ Instalación de la integración de Astro con Vue.
• 2️⃣ Configuración de astro.config.mjs para añadir la integración.

El primer paso, simplemente ejecutamos este comando:

$ npm install @astrojs/vue vue

Con eso instalaremos la integración y el propio núcleo de vue. Luego, editamos el archivo astro.config.mjs y añadimos las dos líneas de la importación e integración de vue:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});

Con estos pasos, ya estaríamos listos para usar Vue.

En el caso de React, tenemos que ejecutar el siguiente comando para instalar la integración de Astro y React, así como el núcleo de react, la parte del DOM y los paquetes de tipos:

$ npm install @astrojs/react react react-dom @types/react @types/react-dom

Luego, editamos el archivo astro.config.mjs y añadimos la integración de react:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
});

En el caso de React, también tendríamos que editar el archivo tsconfig.json y nos aseguramos de tener las siguientes líneas:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

Con esto, ya estaríamos preparados para trabajar con componentes de React.

A continuación tienes el contenido del fichero src/components/VueComponent.vue. Se trata de un componente de Vue donde indicas la parte de Javascript en un <script>, la parte del HTML en un <template>, y la parte de CSS en un <style>.

Esta es la estructura de un componente del framework Javascript Vue:

<script>
export default {
  name: "HelloWorld",
  props: {
    title: String
  },
  data() {
    return {
      author: "ManzDev"
    }
  }
}
</script>

<template>
  <div class="container">
    <h1>{{title}}</h1>
    <p>Por {{author}}</p>
  </div>
</template>

<style>
.container {
  background: #80af23;
  padding: 1rem;
  color: #222;
}
</style>

Si te interesa aprender un poco más sobre Vue, echa un vistazo al curso de Vue que tenemos.

A continuación tienes el contenido del fichero src/components/ReactComponent.jsx. En este caso se trata de un componente de React donde creas una función Javascript que devuelve un fragmento de código JSX que se transpila a HTML.

Esta es la estructura de un componente de la librería de UI React:

const styles = {
  background: "#24abf2",
  padding: "1rem"
};

export default function HelloWorld(props) {
  const author = "ManzDev";

  return (<div style={styles}>
    <h1>{props.title}</h1>
    <p>{author}</p>
  </div>);
}

Ten en cuenta que en este componente de ejemplo estamos añadiendo el CSS en estilos en línea por simplicidad. En React se usan otras aproximaciones para manejar el CSS.

Si quieres aprender más sobre React, echa un vistazo a este curso de React.