No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Diferentes formas de definir un componente

4/16
Recursos

Aportes 11

Preguntas 6

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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 ‚̧ԳŹ

Les dejo la url de los random fox

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

eso es Js