JSX and Qwik

JSX es una extensión de la sintaxis de JavaScript que se utiliza en muchos frameworks en la actualidad. Es una herramienta que nos permite introducir código que parece (es) HTML dentro de un archivo JavaScript, o en este caso .tsx.

Lo hemos estado viendo en las lecciones anteriores, y aunque dominar JSX se escapa del alcance de este curso introductorio de Qwik, sí me gustaría explicar que más nos vale tenerle manejo al JSX si queremos usar Qwik. Entre los muchos temas, ya que estaremos utilizando con JSX, me gustaría dar algo más de información conditional rendering, map y conditional classes.

Conditional rendering

Utilizamos conditional rendering cuando se cumple una condición. Es muy común utilizarlo cuando por ejemplo hemos hecho fetch y hemos cambiado el valor de una variable por el del valor que hemos obtenido, o cuando pasamos un parámetro de forma opcional. Por ejemplo, podríamos tener un botón que renderice un icono si se le pasa, y si no, que solo renderice el texto. O incluso solo el icono. Como en los botones de esta lección:

  <CustomLink
    url="https://github.com/manuelsanchezweb/qwik-curso-principiantes/tree/lection/components"
    text="Enlace al repositorio"
    icon="github"
  />
  <CustomLink
    url="https://github.com/manuelsanchezweb/qwik-curso-principiantes/tree/lection/components"
    text="Enlace al repositorio"
  />
  <CustomLink
    url="https://github.com/manuelsanchezweb/qwik-curso-principiantes/tree/lection/components"
    icon="github"
  />
          

  import { component$ } from "@builder.io/qwik";
  import { Link } from "@builder.io/qwik-city";
  import IconSwitcher from "../icon-switcher";

  type CustomLinkProps = {
    url: string;
    icon?: string;
    text?: string;
    linkIntern?: boolean;
  };

  export default component$(
    ({
      url = "https://github.com/orgs/manuelsanchezweb/repositories",
      icon,
      text,
      linkIntern = false,
    }: CustomLinkProps) => {
      return linkIntern ? (
        <Link
          title={text || icon}
          style={{ lineHeight: 1 }}
          class="custom-link"
          href={url}
        >
          {icon && <IconSwitcher icon={icon} />}
          {text && <span>{text}</span>}
        </Link>
      ) : (
        <a
          target="_blank"
          rel="nofollow noopener"
          title={text || icon}
          style={{ lineHeight: 1 }}
          class="custom-link"
          href={url}
        >
          {icon && <IconSwitcher icon={icon} />}
          {text && <span>{text}</span>}
        </a>
      );
    }
  );
          

Empezar y acabar en JSX con {} suele ser sinónimo de conditional rendering. En este caso, vemos que si le pasamos un icono, se renderizará el componente IconSwitcher y si le pasamos un texto, se renderizará un span. Si no le pasamos nada, no se renderizará nada.

Conditional class

Se podría entender como una variante del conditional rendering. En este caso podemos cambiar los estilos de un elemento dependiendo de si se cumple una condición. Normalmente tenemos que hacer uso de backticks para que esto funcione. Un ejemplo puede ser cambiarle el estilo a un botón mientras está haciendo un submit para que el usuario sepa que se está produciendo una acción y que no puede volver a hacer el click en el botón.

Map

Sin lugar a dudas, map es de los métodos que más utilizarás con los frameworks de de JavaScript. En la jerga hablamos de mapear a cuando iteramos una array, ya sea de valores primitivos o de objetos. Esta una sintaxis típica de map.

  {characters.map((character: Character) => (
    <div key={character.id}>
      <h2>{character.firstName}</h2>
      <p>{character.email}</p>
      <img src={character.image} alt={character.firstName} />
    </div>
  ))}
          

Se suele utilizar en conjunción con el conditional rendering para mostrar los datos que hemos obtenido de una API, por ejemplo. Te enseño un buen ejemplo de esto en una de las últimas lecciones del curso, pero por ahora, te recomiendo que sigas el orden del curso y que vayas a las integraciones.