Diferentes formas de definir un componente

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

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/

Jonathan y los fox son demasiado tiernos ❤️