Diferentes formas de definir un componente

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

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

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.

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.

Les dejo la url de los random fox

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

Jonathan y los fox son demasiado tiernos ❤️

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

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/