Te enseñamos cómo usar los Props en ReactJS

En React, "props" es la abreviatura de propiedades. Los props son una forma de pasar datos de un componente principal a un componente secundario en una aplicación React. Son esencialmente un mecanismo para la comunicación de componentes. 

Los props se pasan como atributos a los componentes de React y pueden contener varios tipos de datos, como cadenas, números, booleanos, objetos o incluso funciones. Una vez que un componente recibe un prop, puede acceder y usar los datos dentro de ellos.

Los props son de solo lectura, lo que significa que el componente secundario no puede modificar los props que recibe directamente. Están destinados a ser utilizados para el flujo de datos unidireccional de padre a hijo. Si el componente secundario necesita modificar los datos, debe hacerlo el componente principal, que luego puede pasar los datos actualizados a través de props nuevamente.

Los props permiten componentes reutilizables y modulares en React, ya que proporcionan una forma de personalizar y configurar componentes en función de los datos que se les pasan.

Cómo usar los Props de React para hacer un encabezado

Primero, debes pasar todos los props como un parametro de tipo objeto, luego de esto podrás tener acceso al Prop y a los datos dentro del componente.

Usar un Prop en el componente de encabezado

function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
export default Header;

El componente de encabezado anterior toma un parámetro prop y lo usa para acceder a los datos sobre el título de la aplicación. Para que este componente se vea en la interfaz del usuario, debes importarlo en el archivo App.js de React.

El archivo App.js

import Header from './components/Header';
function App() {
return (
<div>
<Header title='Task Tracker' />
</div>
);
}
export default App;

Este código muestra el archivo App.js en React, el cual se procesa en la interfaz de usuario. El componente de la aplicación muestra el Header o Encabezado en la interfaz usando el tag "Header" y este tag contiene un Prop y un valor de Prop, por lo que ahora tiene acceso a una propiedad de título que se puede usar en esta sección.

¿Necesita expertos React en su proyecto? Tenemos los desarrolladores que necesita, hablemos!

Usar Props predeterminados

El archivo App.js actualizado debe verse así:

import Header from './components/Header';
function App() {
return (
<div>
<Header/>
</div>
);
}
export default App;

Al hacer esto, la interfaz de usuario mostrará un encabezado en blanco pero hay una simple manera de solucionar este problema. Añadiendo un Prop predeterminado al componente que utiliza el Prop, puedes efectivamente resolver el problema. Incluso así el componente no reciba un Prop, siempre tendrá uno con el que pueda trabajar.

Ejemplo de uso de un Prop predeterminado

function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
Header.defaultProps ={
title: 'The App Name'
}
export default Header;

Con este código, el encabezado ahora podrá utilizar un Prop predeterminado para mostrar el encabezado en la interfaz de usuario, sin necesidad de insertar un Prop solo para esta función en el archivo App.js.

En Rootstack, nuestros developers han logrado crear varias aplicaciones con el uso de React, solucionando los problemas de nuestros clientes regionales e internacionales. Si quieres formar parte de un equipo multicultural, haz click aquí y ponte en contacto con nosotros, cuéntanos sobre tu talento y comienza a crecer profesionalmente en el apasionante mundo del desarrollo web.

Te recomendamos en video