¿Sabes qué es un componente de clase en React? React es una librería de JavaScript que nos permite crear single page applications a partir de un código declarativo. Este código se basa en componentes y hooks. En este post, te enseñaremos cómo crear un componente de clase en React, uno de los dos tipos de componentes de esta herramienta.
¿Qué es un componente de clase en React?
En nuestro post sobre componentes en React te hemos explicado que existen dos tipos de componentes en esta librería JavaScript: aquellos componentes de tipo función y aquellos componentes de tipo clase. Como sus nombres indican, la diferencia entre estos tipos de componente es su forma de ser escritos. Mientras que los componentes de función usan las arrow functions de JavaScript para declararse, un componente de clase en React se declara de una forma similar a las clases.
Además de la forma en la que se escriben, existen diferentes acciones que podemos ejecutar con un componente de tipo función frente a un componente de clase en React. Para explicarte bien la diferencia, a continuación te mostraremos cómo ejecutar la misma acción a partir de estos dos tipos de componentes.
¿Cómo funciona el componente de clase en React?
Supongamos que tenemos un componente de tipo función que cumple el rol de ser un detalle de un contenido. En varios de nuestros posts sobre React, hemos tomado como ejemplo un proyecto en el que queremos simular la aplicación Twitter. Entonces, el siguiente componente TweetPage es el detalle de un tweet particular. Para ello, llama a los parámetros de la URL para reconocer el ID del tweet y luego lo pinta en pantalla.
import {useParams} from ‘react-router-dom’;
import Page from ‘../../layout/Page’;
const TweetPage = ( ) => {
const { tweetId } = useParams ( );
return (
<Page title=”Tweet detail”>
<div> TweetPage {tweetId}</div>
</Page>
);
};
export default TweetPage;
Ahora, el primer problema que nos encontramos cuando queremos convertir este componente a uno de tipo clase es que el hook useParams de React Router solo se puede usar con componentes de tipo función. Por ello, no podemos meter dentro del render de un componente clase una llamada a useParams. Pero no te preocupes; esto se puede solucionar.
Para definir un componente clase en React usamos la palabra reservada class. Esta clase debe extender o heredar de React.Component.
class TweetPage extends React.Component {
}
Ahora, todo componente de tipo clase debe ejecutar un método obligatorio: render. En este método, definimos cómo va a ser la vista de este componente. En este sentido, el render es similar al return.
class TweetPage extends React.Component {
render ( ) {
<Page title=”Tweet detail”>
<div> TweetPage {tweetId}</div>
</Page>
);
}
}
Ahora, nuestro componente nos está pidiendo un TweetId al que previamente accedíamos usando el hook useParams. ¿Cómo llegamos a él? Pues existe solo una manera de pasar datos en React: los props. Entonces, podemos asegurarnos de que el dato tweetId sea pasado por props con el comando this.props.tweetId.
Ya que un componente de clase no puede acceder a este dato directamente, podemos crear un componente función que acceda a los datos de useParams y se los pase a nuestro nuevo componente por props.
A continuación, te mostramos las líneas de código que nos permiten crear este componente función:
const TweetPageFunction = ( ) => {
const {tweetId} = useParams ( );
return <TweetPage tweetId={tweetId} />;
export default TweetPageFunction;
¿Qué sigue?
Ahora que sabes cómo crear un componente clase en React, ¡te invitamos a seguir explorando esta poderosa librería! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio en el que aprenderás a dominar esta y otras herramientas de programación para la web. ¿Quieres darle un giro a tu vida y entrar en un mercado laboral de gran demanda y altos sueldos? ¡No te pierdas este bootcamp y solicita ahora más información!
