Props de React

Introducción

En React, las props (abreviatura de "properties" o propiedades) son un concepto fundamental para pasar datos de un componente a otro. Permiten crear componentes dinámicos y reutilizables. Piensa en las props como argumentos que pasas a una función; permiten que un componente padre configure sus componentes hijos. Las props son de solo lectura, lo que significa que un componente hijo nunca debe modificar las props que recibe.

En este laboratorio, aprenderás a:

• Definir y pasar props de un componente padre a un componente hijo.
• Acceder y usar props dentro de un componente hijo.
• Usar la desestructuración (destructuring) para hacer tu código más limpio.
• Establecer valores predeterminados para las props.

¡Empecemos!

Definir el parámetro props en el componente funcional

En este paso, crearás un nuevo componente hijo y lo prepararás para recibir props. Los componentes funcionales en React pueden aceptar un único argumento, que es un objeto que contiene todas las props que se le pasan. Por convención, este objeto se llama props.

Primero, naveguemos al directorio de nuestro proyecto. El script de configuración ya ha creado un proyecto llamado my-app.

cd ~/project/my-app

A continuación, necesitamos instalar las dependencias del proyecto.

npm install

Ahora, creemos un nuevo archivo de componente. En el explorador de archivos de la izquierda, navega a la carpeta src. Crea un nuevo archivo dentro de src y nómbralo Greeting.jsx.

Añade el siguiente código a tu archivo recién creado src/Greeting.jsx. Esto define un componente funcional simple que acepta un parámetro props.

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

A continuación, necesitamos importar y usar este nuevo componente en nuestro componente principal App. Abre el archivo src/App.jsx y modifícalo para que se vea así:

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

Ahora, iniciemos el servidor de desarrollo para ver nuestra aplicación.

npm run dev -- --host 0.0.0.0 --port 8080

Después de ejecutar el comando, cambia a la pestaña Web 8080 en la esquina superior izquierda de la interfaz. Deberías ver tu aplicación en ejecución, mostrando "Welcome to My App" y "Hello, World!".

Pasar el valor de la prop como name="John"

En este paso, aprenderás a pasar datos desde el componente padre (App) al componente hijo (Greeting). Esto se hace utilizando una sintaxis similar a la de los atributos en JSX.

Queremos pasar el nombre de una persona a nuestro componente Greeting para que pueda mostrar un mensaje personalizado.

Abre el archivo src/App.jsx. Modifica la línea <Greeting /> para incluir una prop name con el valor "John".

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

Aquí, name="John" es la prop. name es la clave de la prop y "John" es su valor. Puedes pasar cualquier expresión de JavaScript como valor de prop envolviéndola entre llaves {}. Para cadenas de texto, las comillas son suficientes.

Después de guardar el archivo, el servidor de desarrollo se recargará automáticamente. Si revisas la pestaña Web 8080, la salida aún no habrá cambiado. Esto se debe a que hemos pasado la prop, pero el componente Greeting aún no la está utilizando. Solucionaremos esto en el siguiente paso.

Acceder a la prop en el hijo con props.name

Ahora que el componente Greeting está recibiendo la prop name, vamos a utilizarla. El objeto props en el componente hijo contiene todas las propiedades pasadas desde el padre. Puedes acceder a ellas utilizando la notación de punto, como props.nombreDeLaPropiedad.

Abre el archivo src/Greeting.jsx. Lo modificaremos para acceder a props.name y mostrar el saludo personalizado. Utiliza llaves {} para incrustar la expresión de JavaScript directamente en tu JSX.

Actualiza src/Greeting.jsx con el siguiente código:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Guarda el archivo. Ahora, cambia a la pestaña Web 8080. Deberías ver que el mensaje se ha actualizado a "Hello, John!".

Esto demuestra el flujo básico de datos en React: del padre al hijo a través de props.

Desestructurar props en el parámetro de la función

Escribir props.name, props.age, etc., puede volverse repetitivo, especialmente si un componente recibe muchas props. Un enfoque más limpio y común es usar la desestructuración de ES6 para desempaquetar las propiedades del objeto props directamente en la lista de parámetros de la función.

Refactoricemos el componente Greeting para usar la desestructuración.

Abre src/Greeting.jsx y modifica la firma de la función. En lugar de aceptar props, la desestructuraremos para obtener name directamente.

Actualiza el archivo para que se vea así:

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Al cambiar (props) por ({ name }), le estamos diciendo a JavaScript que extraiga la propiedad name del objeto que se pasa a la función. Esto hace que el cuerpo del componente sea más limpio, ya que ahora podemos usar name directamente en lugar de props.name.

Guarda el archivo y revisa la pestaña Web 8080. La salida debería ser exactamente la misma ("Hello, John!"), pero nuestro código ahora es más conciso y legible.

Establecer props por defecto con parámetros por defecto

¿Qué sucede si un componente padre no pasa una prop requerida? El valor será undefined, lo que puede generar errores o una interfaz de usuario inesperada. Para evitar esto, puedes especificar valores por defecto para las props.

Para componentes funcionales, puedes usar parámetros por defecto en la firma de la función.

Establezcamos un nombre por defecto para nuestro componente Greeting. Abre src/Greeting.jsx y modifica el parámetro de la función para incluir un valor por defecto. Estableceremos el nombre por defecto como "Guest".

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Ahora, probemos esto. Abre src/App.jsx y agrega otro componente <Greeting />, pero esta vez, no le pases una prop name.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

Guarda ambos archivos. Ve a la pestaña Web 8080. Ahora deberías ver dos saludos:

• "Hello, John!" (del componente que recibió la prop)
• "Hello, Guest!" (del componente que usó la prop por defecto)

Esta es una forma robusta de hacer que tus componentes sean más predecibles y evitar errores.

Resumen

¡Felicitaciones por completar el laboratorio! Has aprendido los fundamentos del uso de props en React para crear componentes reutilizables y dinámicos.

En este laboratorio, practicaste:

• Pasar datos de un componente padre a un componente hijo usando props.
• Acceder a props dentro de un componente hijo usando el objeto props.
• Usar la desestructuración para escribir código más limpio y legible.
• Establecer valores por defecto para las props con defaultProps para hacer tus componentes más robustos.

Las props son una piedra angular del desarrollo en React, y dominarlas es un paso clave para construir aplicaciones complejas. Sigue practicando estos conceptos mientras continúas tu viaje con React.