Props en React: Pasando datos a componentes

Introducción

En React, las props (abreviatura de "properties" o propiedades) son un concepto fundamental para pasar datos de un componente a otro. Te permiten crear componentes dinámicos y reutilizables. Piensa en las props como los argumentos que pasas a una función; permiten que un componente padre configure a 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 desde un componente padre a un componente hijo.
Acceder y utilizar las props dentro de un componente hijo.
Usar la desestructuración para hacer que tu código sea más limpio.
Establecer valores predeterminados para las props.

¡Comencemos!

Definir el parámetro de props en un 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, debemos instalar las dependencias del proyecto.

npm install

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

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

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

export default Greeting;

Luego, 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 ejecutándose, mostrando "Welcome to My App" y "Hello, World!".

Pasar el valor de una prop desde el padre como name="John"

En este paso, aprenderás cómo pasar datos desde el componente padre (App) al componente hijo (Greeting). Esto se hace usando una sintaxis similar a 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 una prop envolviéndola en llaves {}. Para las 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. Lo solucionaremos 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 usarla. El objeto props en el componente hijo contiene todas las propiedades pasadas desde el padre. Puedes acceder a ellas usando la notación de punto, como props.propertyName.

Abre el archivo src/Greeting.jsx. Lo modificaremos para acceder a props.name y mostrar el saludo personalizado. Usa 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: de padre a 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 extraer 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 pasado 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 es ahora más conciso y legible.

Establecer props predeterminadas con parámetros por defecto

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

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

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

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

export default Greeting;

Ahora, probemos esto. Abre src/App.jsx y añade 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 predeterminada)

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

Resumen

¡Felicidades 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 las 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 predeterminados para las props 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 a medida que continúas tu viaje con React.