Definir un componente en React con TypeScript puede hacerse de varias formas, pero solo unas pocas son las que realmente vas a usar en proyectos reales. Aquí aprenderás a construir tu primer componente RandomFox con TypeScript, entender qué retorna y elegir la sintaxis recomendada hoy.

¿Qué vas a construir con el componente RandomFox?

La idea es crear un componente lazy image que renderice imágenes de zorros aleatorios y que solo cargue cada imagen cuando entre en el viewport del navegador. Si una imagen queda fuera de la vista, se muestra como un cuadro gris hasta que el usuario haga scroll y la haga visible.

Antes de la carga perezosa, necesitas la pieza más básica: el componente que renderiza una sola imagen. Empezar de adentro hacia afuera te da una base sólida para añadir lógica más adelante [01:00].

¿Cómo defines un componente de React en TypeScript?

Un componente de React, cuando lo escribes como función, es simplemente una función que devuelve JSX. La extensión que vas a usar es .tsx, abreviación de TypeScript con JSX, y es la que se utiliza siempre que combines React con TypeScript [02:30].

Dentro de una carpeta components, creas el archivo RandomFox.tsx y exportas una constante con la función. Existen al menos seis formas de tipar este componente, pero en la vida real te vas a encontrar cuatro principales.

¿Qué es un archivo .tsx? Es un archivo de TypeScript que permite escribir JSX, la sintaxis tipo HTML que React usa dentro de JavaScript. Lo usas para todos tus componentes React con TypeScript.

¿Forma implícita o explícita para tipar el retorno?

La forma más simple es no tipar nada y dejar que TypeScript infiera. Si haces hover sobre la función, verás que TypeScript ya la reconoce como una función que devuelve JSX.Element. Aunque parezca JavaScript, sigue siendo TypeScript trabajando por debajo gracias a la inferencia, ya que TypeScript es un superset de JavaScript [03:45].

La segunda forma, y la recomendada, es tipar de forma explícita el retorno como JSX.Element. ¿Por qué explícito? Porque deja claro en tu codebase que esto debe ser un componente de React. Si por error retornas un número en un componente complejo, TypeScript te avisa: antes dijiste que esto devolvía un elemento JSX y ahora estás devolviendo otra cosa.

¿Debes usar FC o FunctionComponent de React?

La tercera y cuarta forma vienen desde la propia librería de React: los tipos FunctionComponent y su alias FC. Se importan así:

tsx import type { FunctionComponent, FC } from 'react'

Siempre que importes solo tipos, usa import type para que el compilador los elimine al hacer build. Con esto puedes escribir:

tsx export const RandomFox: FunctionComponent = () => { return <img /> }

La diferencia técnica es sutil. Tipar el retorno aplica el tipo a lo que la función devuelve, mientras que usar FC o FunctionComponent tipa la constante completa. El resultado final es muy similar, porque ambos terminan en un JSX.Element.

¿Qué forma debo usar hoy para tipar componentes en React? Usa la segunda forma: tipar explícitamente el retorno como JSX.Element. Evita los ayudantes FC y FunctionComponent, y no dejes el tipo implícito.

¿Cómo renderizar una imagen aleatoria con la API de randomfox.ca?

La página randomfox.ca ofrece una API con 123 imágenes disponibles, numeradas del 1 al 123. La URL sigue el patrón de un número seguido de .jpg. Si pides la imagen 124, devuelve error porque no existe [09:30].

Dentro del componente declaras una constante image usando template literals y necesitas un número aleatorio entre 1 y 123. Para eso creas una función:

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

export const RandomFox = (): JSX.Element => { const image = https://randomfox.ca/images/${random()}.jpg return <img src={image} /> }

TypeScript infiere automáticamente que image es un string, así que no necesitas tiparlo manualmente. Para mejorar la estética, fija el width en 320, deja el alto en automático y aplica una clase de Tailwind como rounded para redondear los bordes.

¿Cómo importas y usas el componente en index?

En tu archivo index importas RandomFox desde la carpeta components. Como es un export nombrado y no default, lo importas con llaves:

tsx import { RandomFox } from './components/RandomFox'

Luego lo renderizas como <RandomFox />. Cada vez que recargues la página, la API te devolverá un zorro distinto.

¿Por qué importa entender props y state después de esto?

Un componente con valores estáticos dentro de sí mismo es solo el punto de partida. Lo que hace poderoso a React son los props y el state, que permiten que cada instancia del componente reciba datos distintos y reaccione a cambios.

El siguiente paso natural es pasar la URL de la imagen como prop, en lugar de generarla dentro del componente, para que RandomFox sea reutilizable y predecible.

¿Cuál de las cuatro formas de tipar componentes habías usado antes? Cuéntame en los comentarios cómo lo manejas en tus proyectos.