Qué son las props en React

Vista previa del material en texto

¿Qué son las props en React? 
 
En React, las props (abreviatura de "properties" o propiedades en español) son el mecanismo 
principal para pasar datos desde un componente padre a un componente hijo. Las props son un 
conjunto de valores que se utilizan para configurar y personalizar un componente, permitiendo que 
los datos fluyan de manera unidireccional, desde el componente superior (padre) hacia el 
componente inferior (hijo). 
 
Las props son inmutables, lo que significa que una vez que se pasan a un componente, no se pueden 
modificar directamente por ese componente. Solo el componente que recibe las props puede leer y 
utilizar esos valores para renderizar su contenido. Para cambiar el valor de una prop en un 
componente, el componente padre debe re-renderizar al componente hijo con una nueva prop. 
 
Las props se definen en el componente padre y se pasan al componente hijo de la siguiente manera: 
 
****************************************************** 
// ComponentePadre.js 
import React from 'react'; 
import ComponenteHijo from './ComponenteHijo'; 
 
const ComponentePadre = () => { 
 const nombre = 'Juan'; 
 const edad = 30; 
 
 return <ComponenteHijo nombre={nombre} edad={edad} />; 
}; 
 
export default ComponentePadre; 
************************************************** 
 
************************************************ 
// ComponenteHijo.js 
import React from 'react'; 
 
const ComponenteHijo = (props) => { 
 return ( 
 <div> 
 <p>Nombre: {props.nombre}</p> 
 <p>Edad: {props.edad}</p> 
 </div> 
 ); 
}; 
 
export default ComponenteHijo; 
***************************************************** 
 
El componente `ComponentePadre` tiene dos variables (`nombre` y `edad`) que se pasan como 
props al componente `ComponenteHijo`. El componente `ComponenteHijo` recibe estas props como 
argumento en su función y las utiliza para renderizar el contenido. Así, los valores de `nombre` y 
`edad` en el componente padre se transmiten como datos al componente hijo, lo que permite su 
reutilización y personalización. 
 
Las props son una parte fundamental en el desarrollo de aplicaciones React, ya que facilitan la 
comunicación entre los distintos componentes y permiten crear jerarquías de componentes flexibles 
y dinámicas. Además, la utilización de props promueve el principio de "separación de intereses" y 
mejora la mantenibilidad del código.