Componente de Imágenes Perezosas con React y TypeScript

¿Cómo se define un componente en React?

Iniciemos nuestra aventura por el fascinante mundo de React comenzando con lo más básico: la definición de un componente. Un componente es esencialmente una función que devuelve un resultado, comúnmente un elemento visual representado por JSX. En este caso, aprenderemos a definir un componente llamado RandomFox utilizando TypeScript, que es un superconjunto de JavaScript, proporcionando un sistema de tipos estático.

¿Qué extensión usamos para archivos TypeScript con JSX?

La extensión que utilizamos para combinar TypeScript y JSX es .tsx. Este formato nos permite escribir archivos de React con la sintaxis de JSX, manteniendo el tipado estático y las características de TypeScript. Esta extensión se convierte en nuestra herramienta principal al trabajar con componentes de React.

// Ejemplo básico de un componente en TypeScript con JSX

import React from 'react';

export const RandomFox: React.FC = () => {
  return <img src="imagen.jpg" alt="Imagen de un zorro aleatorio" />;
};

¿Cuáles son las formas de definir un componente en TypeScript y cuál es la recomendada?

Existen múltiples maneras de definir un componente en TypeScript, pero las más comunes son:

1. Forma Implícita: Se define una función que retorna JSX, sin especificar el tipo de retorno.

2. Forma Explícita (Recomendada): Se indica explícitamente que la función retorna un JSX.Element.

   export const RandomFox = (): JSX.Element => {
     return <img src="imagen.jpg" alt="Imagen de un zorro aleatorio" />;
   };
   

3. Con React.FC (Functional Component): Se emplea el tipo proporcionado por React.

Estas diferencias residen en cómo tipamos los retornos y las constantes. La forma recomendada actualmente es la segunda debido a que nos permite ser explícitos en nuestro código sin depender de funcionales adicionales que React empleaba anteriormente.

¿Cómo generar una imagen aleatoria?

Veamos cómo integrar una API para generar imágenes aleatorias. La idea es obtener imágenes de zorros aleatorios desde una API externa utilizando números aleatorios.

¿Cómo implementamos una función random en TypeScript?

Para lograr este comportamiento, se crea una función que genera un número aleatorio entre 1 y 123, ya que este es el rango disponible de imágenes en la API.

const generateRandomNumber = (): number => {
  return Math.floor(Math.random() * 123) + 1;
};

Utilizamos este número para completar la URL de la imagen.

¿Cómo asignamos la imagen aleatoria al componente?

Con nuestra función random lista, la integramos en el componente.

export const RandomFox = (): JSX.Element => {
  // Generamos el número aleatorio
  const imageNumber = generateRandomNumber();
  // Construimos la URL de la imagen
  const imageUrl = `https://randomfox.ca/images/${imageNumber}.jpg`;

  return (
    <img 
      src={imageUrl} 
      alt="Imagen de un zorro aleatorio"
      width="320" 
      className="rounded"
    />
  );
};

Al recargar el componente, la imagen cambiará debido al número aleatorio generado cada vez.

¿Cómo se integra el componente en un proyecto?

Finalmente, integramos este componente en un archivo principal del proyecto.

import React from 'react';
import { RandomFox } from './components/RandomFox';

const App = () => (
  <div>
    <h1>Mira un zorro aleatorio cada vez que recargues</h1>
    <RandomFox />
  </div>
);

export default App;

Inicie el desarrollo de sus componentes con TypeScript y React, disfrutando de la tipificación estática y descubra con alegría cómo las imágenes de zorros le dan un toque único a su aplicación. La innovación comienza con aprender, así que continúe explorando y potenciando sus habilidades.