Props en React
En React los componentes son representados por funciones encapsulan lógica y descripción de la UI usando JSX. También sabemos que un componente React es en cierta forma una unidad aislada del mundo, pero al mismo tiempo sabemos que debe existir una forma de que el componente se comunique con el mundo exterior. Para esto se usa el concepto de props.
Al igual que las funciones aceptan argumentos, un componente React acepta “valores” que son pasados por medio de un objeto llamado props.
Recordemos la API cruda de React.createElement
Lo que esta definición indica es que un componente creado con React.createElement acepta un objeto opcional llamado props y un número indefinido de hijos.
Para escribir lo mismo en JSX y pasar estos valores llamados props, simplemente agregamos “atributos” a la declaración.
En este ejemplo color=“red” define una prop llamada color con el valor string red ¿Cómo se reciben las props en un componente?
Cuando definimos un componente, en realidad estamos creando una función que retorna JSX, para que esta función sea considerada un componente React valido debe aceptar solo un argumento, este único argumento es el que llamamos props.
El componente título es una función que acepta un argumento, este argumento llamado props es un objeto cuyos atributos son los nombres que has dado a las props, por lo que puedes usar destructuring para acceder a ellos (puedes hacerlo también directamente en los argumentos).
Existe una prop por defecto que no fue definida por ti. children. Esta prop (opcional) hace referencia a el tercer argumento de React.createElement. children es una estructura de datos opaca, es decir, no hay que lidiar con ella directamente, si no, utilizando las utilidades que la propia API ofrece.
children puede ser: Un string, boolean, número, null, un elemento, un componente, o un array de los anteriores.
Además en este ejemplo pudiste ver otra característica de JSX. Interpolación. Esta es la forma en que puedes definir declaraciones javascript dentro de tu JSX, es muy similar a usar template literals, es una forma de “poner valores” desde un mundo en otro.
En el ejemplo, abrimos el uso de JSX y usamos las llaves {}para determinar que estaremos interpolando javascript dentro de JSX.
Puedes interpolar lo que sea dentro de las llaves {} mientras sea javascript válido, solo recuerda que lo que estás haciendo al interpolar dentro de JSX es en realidad creando un nuevo children que es el tercer arugmento de React.createElement
🐾 Primeros Pasos
En esta lección trabajaremos pasando props a nuestros componentes y renderizando interpolaciones de esos valores.
Para esto crearemos componentes que se comunicaran entre ellos mediante el uso de props.
🎯 Objetivos
- Conocer como comunicar componentes mediante el uso de props.
- Utilizar interpolación y conocer que es y no posible de interpolar en React.
🏋️♂️ Ejercicios
1 Crea un componente que mostrará la información de un usuario. El componente debe recibir como props los datos del usuario (nombre, email y telefono). 2. Crea un componente padre que pase los datos del usuario como props al componente anterior.
🍬 Crédito Extra
- Considera que tienes un objeto con varios atributos, ¿cómo puedes pasar ese objeto directamente como props a tu componente?
Transcripción
Comenzaremos ahora a conocer las props en esta lección cinco. En React, los componentes son representados básicamente por una función que engloba, encapsula, o aísla lógica y describe la interfaz utilizando JSX. Esta unidad aislada del mundo necesita comunicarse con el mundo exterior, y para eso se utilizan las props.
Como en las funciones que aceptan argumentos, un componente que básicamente se escribe como una función, acepta valores que son pasados por medio de este objeto llamado props, que puedes ver acá en este createElement().
Prop es un objeto opcional, que se basa como segundo argumento en JSX. Este objeto, llamado prop, se puede ver como atributos de una etiqueta html. En este caso, color es el atributo y red es el valor.
Cuando definimos un componente lo que estamos creando es en realidad una función, que retorna JSX, y esta función es considerada válida si acepta solo un argumento. Ese único argumento es el llamado props.
Existe una prop por defecto que no es directamente definida por ti, llamada children, y que puede ser un string, boolean, número, cualquier cosa que sea renderizable por React.
Además, otra de las cosas que hemos podido ver, en las lecciones anteriores, es un poco la interpolación, algo que vamos a revisar acá. Funciona mucho como los template literals. Básicamente cuando abres estas llaves te permite salir de JSX y entrar en el mundo de JavaScript, e interpolar cualquier valor de una declaración retorna por JavaScript.
En esta ocasión, el objetivo de esta lección es conocer cómo comunicar componentes mediante el uso de props. Para eso comenzaremos con dos ejercicios -- crear un componente que muestre la información de usuario y crear un componente padre que le pase los datos a este componente usuario, para mostrarlo en pantalla.
Y un crédito extra, que te pregunta, si tienes varios atributos, ¿cómo puedes pasar todos esos atributos o props de una sola forma?