En el último artículo, hablando sobre algunos conceptos básicos de React, comentábamos sobre el hecho de desarrollar aplicaciones con React sin tener en cuenta las características “gratuitas” del framework y lo caro que te puede salir no utilizarlas.

Comentamos sobre los componentes de React, la utilidad y la importancia de los eventos del ciclo de vida de los mismos componentes. ¡Espero que los estés utilizando de forma correcta! Yo lo intento. ;)

Hoy me gustaría compartir contigo sobre otro de los conceptos básicos que, como los componentes, de forma obligatoria te habrás encontrado por el camino: las props.

¿Qué son las props?

Si los componentes eran la esencia de React. Las props, o propiedades son la “piedra angular” de la herramienta.

Las props son  “inputs arbitrarios” en que sus valores no cambian en sus componentes  - son inmutables - y permiten, por ejemplo, que un elemento tenga diferentes variaciones.

¿Un ejemplo?

Podrías utilizar una prop para controlar lo que se ve por pantalla.

render(){
 if(this.props.titulo) {
    return <h1>Hola</h1>
 }  else{
     return <p>Hola</p>
 }
}

Al mismo tiempo, una forma para poder recordar, sería pensar en las propiedades como los atributos de HTML, pero en este caso serían algo como un “atributo de HTML personalizado”. También puedes renderizar propiedades  que ya conoces, como por ejemplo style, title, etc…

¿Cuál es el objetivo?

Uno de los objetivos es reutilizar los componentes. Puedes usar el mismo componente pero con diferentes propiedades y dependerá de tu estrategia para que puedas utilizar un mismo componente en diferentes partes de tu aplicación.

Lo que debes tener en cuenta es que si la propiedad es igual a algún atributo de HTML se renderiza como atributo del elemento y no como tu prop personalizada.

¿Otro ejemplo?

function Bienvenida(props) {
 return <h1>Hola, {props.nombre}</h1>;
}
const element = <Bienvenida nombre="Anna" />;
ReactDOM.render(
 element,
 document.getElementById('root')
);

En este ejemplo puedes ver un componente sencillo (Bienvenida), que es una función de Javascript y a la vez es un componente válido de React pues solamente acepta un objeto “props” y lo que verías en pantalla sería “Hola, Anna”.

Regla estricta y de oro en React

“Todos los componentes de React deben actuar como funciones puras con respeto a sus props”.

Esto significa que la función no debe intentar cambiar sus inputs y debe retornar siempre el mismo valor para los mismos inputs.

¿Hay algo más que deba saber?

Usando cualquier componente de React le puedes pasar cualquier dato de entrada con el que quieres trabajar. Las props son valores sólo de lectura, y pueden definir el punto de partida de un componente. Esto significa que sirven para pasar datos como parámetros de un componente de React a otro componente.

Las props pueden ser matrices, números, objetos, o,¡ incluso componentes de React! Y es más, React incorpora una forma de validación para props llamada propTypes. Puedes leer más sobre ello aquí.

No puedes pasar las props de componentes hijos a componentes padres. Solamente puedes “fluir hacia abajo". Un componente padre pasa propiedades a sus hijos en el momento de su creación. :) :)

¿Qué pasa si tengo pasar muchos props?

Más allá de que tendrás algún problema de rendimiento, el código de tu componente carecerá de limpieza y para ello seguro que tendrás varias estrategias, pero puede ser buena idea poner las props en diferentes líneas del componente, por ejemplo, o utilizar la Sintaxis extendida de Javascript. Entre otras soluciones.

Conclusión

Una de las características que hacen de React interesante son las muchas prácticas disponibles y compatibles con Javascript Vanilla. Creo que de esta forma es un poco más fácil escalar e integrar tu aplicación React con otras aplicaciones.

Por otro lado, y para terminar, como ya hemos comentado varias veces, la documentación oficial de React es bastante completa y siempre puedes consultarla si tienes dudas.  Esto te ayudará a evitar muchos errores.

¿Crees que es fácil entender las props y utilizarlas de forma óptima?

 

Fuentes: