No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componente de Imágenes Perezosas con React y TypeScript

4/16
Recursos

¿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.

Aportes 15

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En la función random, podríamos agregar que el tipo de dado que se regresa es un number:

const random = (): number => Math.floor(Math.random()*123)+1

Diferentes formas de definir un componente

La forma en la que se trabajan los componentes en TypeScript con React es con la extensión .tsx. (archivos de TypeScript que incluyen JSX).

Hay distintas formas de definir un componente en React con TypeScript, veamos las 4 formas más comunes de hacer esto:

**// Forma implícito (JSX:Element)**
const MyComponent = () => {
	return (
		<div>
			<h1>Hola!</h1>
		</div>
	)
}

**// Forma explícita "JSX.Element"**
const MyComponent = (): JSX.Element => {
	return (
		<div>
			<h1>Hola!</h1>
		</div>
	)
}

**// Usando tipos de React "FunctionComponent"**
import type { FunctionComponente } from "react"
****
const MyComponent: FunctionComponent = () => {
	return (
		<div>
			<h1>Hola!</h1>
		</div>
	)
}

**// Usando tipos de React "FC"**
import type { FC } from "react"
****
const MyComponent: FC = () => {
	return (
		<div>
			<h1>Hola!</h1>
		</div>
	)
}

Hoy en día, el estándar que se manera comúnmente es la segunda manera Forma explícita "JSX.Element", este es el formato de que debemos utilizar.

Si tienen algun problema con las imagenes agreguen el dominio a su configuracion de nextjs

Wow, me encantó el pull request que lo explica. Una de las desventajas es que provee una definición implícita de children, lo que significa que todos los componentes aceptan children, incluso si no deberían, lo que puede ser un error difícil de detectar. Además, React.FC no soporta genéricos, lo que puede limitar la capacidad de definir componentes reutilizables. No funciona correctamente con defaultProps.

Verifiquen que esten usando :
https://randomfox.ca/images/2.jpg
en vez de :
https://randomfox.ca/?i=2

Yo tuve un error al intentar tipar el componente de la forma mostrada en este curso, que era: const component = (): JSX.Element => {} // Cannot find namespace 'JSX' A esta manera: const component = (): React.JSX.Element => {} Y soluciono el error, dejo por si alguno le sirve
que horror ese font

Extensión para autocompletar clases con tailwind.css Tailwind CSS IntelliSense

Les dejo la url de los random fox

https://randomfox.ca/images/51.jpg

Si alguien tuvo problemas con la pagina de imagenes Random como yo, en este link puede obtener imagenes de la nasa, solo se registran y les entregan un api-key, este lo ponen en cada query que hagan:

https://api.nasa.gov/

Donde está la lectura sobre por qué no es la mejor idea utilizar Functional Components? no está en los recursos del nuevo frontend

Jonathan y los fox son demasiado tiernos ❤️

El tipado de `FunctionalComponent` (FC) ha caído en desuso porque, aunque es una forma válida de definir componentes, no proporciona beneficios adicionales significativos en comparación con el uso de `JSX.Element`. Usar `JSX.Element` es más explícito y claro, ayudando a evitar confusiones en el código, especialmente en componentes complejos. Además, el uso de `JSX.Element` permite a TypeScript realizar mejor las inferencias de tipos, lo que facilita la detección de errores en tiempo de compilación. Esto se alinea con las mejores prácticas actuales en la comunidad de desarrollo de React y TypeScript.
no se porque motivo me arroja este erorr ![](https://static.platzi.com/media/user_upload/image-30bc3440-ecfb-46c7-94ba-05cf299c3ab2.jpg) ![](https://static.platzi.com/media/user_upload/image-44f2af43-dffc-4b8b-bf6a-2b50ea5af29a.jpg)
eso es Js