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
Introducción
TypeScript y React: Proyecto con Next.js y Hooks
Tipado Explícito en TypeScript: Mejora tu Código
Componentes React con TypeScript en Next.js
Tipado en React
Componente de Imágenes Perezosas con React y TypeScript
Props en React: Gestión de Tipos en TypeScript
Tipado de useState con TypeScript en React: Arrays de Strings
Refactorización de Tipos en React con TypeScript
React y el DOM
Manejadores de Eventos en React con TypeScript
Carga Diferida de Imágenes en React con UseRef y TypeScript
Carga de imágenes perezosa con IntersectionObserver y React
Extender atributos HTML en componentes React con TypeScript
Funciones y tipos en JavaScript y TypeScript
Configuraciones avanzadas
Tipos Globales en TypeScript para Aplicaciones RIA
Tipos personalizados en TypeScript para librerías sin tipos
Extensión de objetos Window en TypeScript para scripts externos
Próximos pasos
Tipado avanzado en Redux con TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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" />;
};
Existen múltiples maneras de definir un componente en TypeScript, pero las más comunes son:
Forma Implícita: Se define una función que retorna JSX, sin especificar el tipo de retorno.
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" />;
};
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.
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.
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.
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.
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
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
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
Extensión para autocompletar clases con tailwind.css Tailwind CSS IntelliSense
Les dejo la url de los random fox
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:
Jonathan y los fox son demasiado tiernos ❤️
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?