Además de los distintos lenguajes y softwares de programación, en el mundo del desarrollo web existen librerías. Estas son un conjunto de archivos que nos permiten ejecutar acciones de una manera simple.
En este post, te enseñaremos qué es y cómo funciona la librería propTypes en React, ideal para revisar el uso apropiado de props en nuestros componentes.
Un poco de contexto sobre los propTypes en React
Comunicar padres a hijos en React es una acción que se da siempre a través de las props: un componente hijo define qué props puede recibir desde fuera y un componente padre pasa dichas props con determinados valores. Estas props se definen justo después de declarar el nombre del componente hijo. Por ejemplo:
function AuthButton ({className})
const RequireAuth = ({ isLogged, children })En este sentido, las props a manejar son definidas por el componente hijo. Es decir, cualquier cosa que un componente padre pase que un componente hijo no haya recibido, no se manejará.
Desde el punto de vista del desarrollo web, muchas veces nos encontramos con problemas al no conocer qué tipo de valores le puedes pasar a través de props a un componente.
Es decir, no sabemos si, por ejemplo, isLogged debe ser un boolean, un number o un string, no sabemos qué tipo tiene que tener esta prop. Este conocimiento no es tanto lo que necesitamos, sino que React nos diga si estamos usando bien o no nuestros componentes en el momento de ejecución. Aquí es donde entra propTypes en React.
¿Qué son propTypes en React?
propTypes en React es un paquete que podemos descargar en nuestro código. Este paquete viene a ser, básicamente, un tipo de chequeo en tiempo de ejecución de las props que estamos pasando a los distintos componentes.
Es decir, si definimos que para un componente las props son de determinada manera y le pasamos una prop con otro tipo, estaremos usando el componente de manera errónea. En estos casos, React nos emitirá advertencias desde la consola, conocidas como warnings. Para esto, React revisará las props que estamos pasando a un componente y nos dirá qué tipo de prop estamos pasando frente al tipo que deberíamos pasar.
Con propTypes en React, el código no va a fallar por las advertencias. El código fallará solamente porque le tenemos un componente erróneo que falla.
¿Cómo funcionan los propTypes en React?
propTypes en React es una librería como cualquier otra librería de programación. Es decir, es una serie de archivos que podemos instalar en nuestro código para ejecutar determinada acción. En este paquete existen distintos propTypes con los que se definirá qué tipo de prop debe recibir un componente. Para instalar esta librería, basta con insertar la siguiente línea de código en nuestra consola:
npm install --save prop-typesUna vez que tenemos instalada esta librería, podemos definir para cada componente las props que esperamos recibir y el tipo de dato que debe tener cada prop. Recuerda que, para esto, deberás importar la librería en cada archivo donde quieras usarla. Nosotros la hemos importado con el nombre T para facilitar su uso:
import T from 'prop-types';Para usar propTypes en React, usamos el comando componente.propTypes. Dentro de este comando definimos un objeto con datos en formato de clave:valor. La clave será el nombre de la prop que queremos pasar por el comando. En el valor podemos insertar la librería y el tipo de valor que queremos recibir en dicha prop.
Una vez pones el nombre de la librería en el valor, en nuestro caso T, verás un listado de distintos tipos de datos. De ahí seleccionas el que quieras. Para conocer los distintos tipos existentes, te invitamos a ir a la documentación oficial de React sobre proptypes.
Veamos un ejemplo con el componente RequireAuth que hemos mencionado anteriormente.:
RequireAuth.propTypes = {
isLogged: T.bool,
children: T.element,
};Además de los distintos tipos de valores como boolean, number, element (elemento de React), etc., existen categorías que se refieren a un conjunto de valores. Por ejemplo, el comando propTypes.node se refiere a cualquier cosa que sea interpretada, como lo sería un número, una cadena, un elemento o un array.
Al leer este post, no solo has aprendido qué son y cómo funcionan los propTypes en React, sino que también has dado un paso hacia dominar esta poderosa librería. Ahora, el siguiente paso para ser un desarrollador web es aprender más sobre esta y otras herramientas de programación web. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio en el que aprenderás a dominar herramientas y lenguajes como JavaScript, HTML, CSS, JSX y webPack. ¡Anímate a inscribirte y triunfa en el mundo tecnológico!
