Sintaxis JSX en Astro

⤎ Anterior Inicio ⤒Siguiente ⤏

Astro entiende la sintaxis JSX popularizada sobre todo por React.js. En la parte del HTML del componente podremos usar esta forma de escribir código para poder hacer condicionales, loops o jugar con las variables.

🤖 Esto es lo que sabe de JSX el ChatGPT

⚡️Eso no quiere decir que haga falta crear componentes de React (aunque Astro permita esas integraciones), solo es que entiende esa sintaxis.

🎧 Podcast: WR 241: Preguntas y respuestas sobre React

Ejemplo de JSX como condicional ¶

Vamos a retomar el Hero.astro para comprender la sintaxis más útil.

💦 A mi me costó un poco entenderlo, así que tómatelo con paciencia.

En ese componente teníamos un botón con un texto y un enlace que eran opcionales, pero aún así, se pintaban.

Vamos a controlar con un condicional ese comportamiento:

Justo debajo de <slot /> cambia el código por este:

/src/components/Hero.astro

---
interface Props {
  title: string;
  imageUrl: string;
  buttonText?: string;
  buttonLink?: string;
}
const { title, imageUrl, buttonText, buttonLink } = Astro.props;
---
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
  <div class="col-10 col-sm-8 col-lg-6">
    <img
      src={imageUrl}
      class="d-block mx-lg-auto img-fluid"
      alt="Flamante página de Astro"
      width="700"
      height="500"
      loading="lazy"
    />
  </div>
  <div class="col-lg-6">
    <h1 class="display-5 fw-bold lh-1 mb-3">{title}</h1>
    <slot>
      <p class="lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
      </p>
    </slot>
    {
      buttonText && (
          <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <a href={buttonLink} class="btn btn-primary btn-lg px-4 me-md-2">
              {buttonText}
            </a>
          </div>
        )
    }
  </div>
</div>

👀 Si buttonText está asignada, entonces si mostramos el enlace. Incluso podríamos añadir la condición buttonText && buttonLink para hacerlo más poderoso.

Ejemplo de loop con JSX ¶

En el componente Projects.astro nos quedábamos solo con un proyecto, pero queremos mostrar por lo menos los 5 últimos.

En vez de crear nuestro propio array de proyectos vamos a usar un par de trucos con JavaScript y JSX: slice y map Ahora vamos a modificar todo el componente:

/src/components/Projects.astro

---
import GithubIcon from "./icons/GithubIcon.astro";
const response = await fetch(
  "https://api.github.com/users/webreactiva-devs/repos"
);
const projects = await response.json();
---
<div class="border p-4 my-3">
  <h2>Mis proyectos en Github</h2>
  <div class="list-group">
    {
      projects.slice(0,5).map((project) => {
        return (
          <a
            href={project.html_url}
            class="js-open-new-window list-group-item list-group-item-action d-flex gap-3 py-3"
          >
            <GithubIcon class="rounded-circle flex-shrink-0" />
            <div class="d-flex gap-2 w-100 justify-content-between">
              <div>
                <h6 class="mb-0">{project.name}</h6>
                <p class="mb-0 opacity-75">{project.description}</p>
              </div>
            </div>
          </a>
        );
      })
    }
  </div>
</div>

⚡️ Recuerda cambiar webreactiva-devs por tu usuario.

👀 Explicamos el código con detalle aquí:

Define una lista HTML usando la clase list-group.
Dentro de esta lista, el código utiliza una expresión JavaScript entre llaves {}. En Astro y otros marcos similares, las expresiones entre llaves permiten incorporar JavaScript directamente en el HTML.
projects.slice(0,5).map((project) => { ... }) es una expresión de JavaScript que recorre los primeros 5 elementos del array projects. Para cada proyecto, el método .map() genera un nuevo elemento de la lista.
Dentro de la función .map(), se devuelve un elemento de la lista HTML usando la sintaxis de JSX. El atributo href de este enlace es la URL del repositorio del proyecto en Github.
Dentro del enlace, se incluye el componente GithubIcon y un div que contiene el nombre del proyecto y su descripción.

💣 Si tienes problemas con map((project) => puede ser debido a tu configuración local de TypeScript. En el paso de componentes vimos como cambiar la configuración, aunque también puedes cambiarlo por map((roject: any) => p

💪 Ya tienes la web prácticamente al completo, ¡hurra por ti!

⚡️ Pon a prueba lo que has aprendido

1. ¿Qué es JSX en desarrollo web?

2. ¿Cómo se puede usar JSX para crear un condicional en un componente de Astro?

3. ¿Cómo se puede usar JSX para crear un bucle en un componente de Astro?