Props en React: qué son y cómo usarlos

En este artículo, tendrá la oportunidad de explorar una característica extremadamente valiosa de React: los props. Esta característica juega un papel fundamental al permitir pasar argumentos a nuestros componentes, dándoles flexibilidad y dinamismo. Como resultado, reutilizar componentes se convierte en una tarea más sencilla y eficiente durante el proceso de desarrollo.

A lo largo de este artículo nos adentraremos en el universo de los props en React, descubriendo su importancia y cómo utilizarlos eficazmente. Tendrás la oportunidad de comprender la esencia de esta funcionalidad y explorar sus innumerables posibilidades.

A través de ejemplos prácticos y esclarecedores, aprenderás paso a paso cómo pasar y recibir props en tus componentes de React. En consecuencia, podrá mejorar la modularidad y la reutilización de sus componentes, promoviendo un código más organizado y escalable. Estas habilidades serán fundamentales para el éxito de su proyecto React.

Requisitos deseables

• Conocimientos intermedios/avanzados de JavaScript.
• Conocimientos básicos de CSS o algún otro preprocesador de CSS (como SASS, por ejemplo).
• Conocimientos básicos de React.

Requisitos obligratorios

VS Code: Asegúrate de tener Visual Studio Code instalado en su máquina. Es una herramienta de desarrollo de código fuente popular y ampliamente utilizada.

Node.js: Se requiere Node.js para ejecutar comandos NPM (administrador de paquetes) y NPX (ejecución de scripts). Si aún no tienes Node.js en tu sistema, puedes descargarlo aquí. Al instalar, tanto Node.js como NPM se instalarán automáticamente.

Para verificar que se instalaron correctamente, siga estos pasos:

1. Abre Visual Studio Code.
2. Abre el terminal de Visual Studio Code.
3. Ejecuta el comando node -v. Esto mostrará la versión actualmente instalada de Node.js.
4. Repita el mismo procedimiento para verificar la versión de NPM. Ejecute el siguiente comando en la terminal npm -v.

Pasos iniciales

Comencemos a instalar Vite en nuestro entorno de producción en VS Code. Para hacer esto, crearemos una carpeta raíz y le pondremos de nombre Props, Aquí es donde se ubicaron todos nuestros archivos de desarrollo. Con nuestra carpeta creada, abramos la terminal VS Code y sigamos los siguientes pasos:

Ejecutar el comando: npm create vite@latest

Este comando creará un nuevo proyecto usando Vite en su última versión, una herramienta de compilación rápida y moderna para proyectos JavaScript. No dudes en aprender más sobre la herramienta en este link.

Luego se harán algunas preguntas como:

• Nombre del proyecto: conociendoProps
• Nombre del paquete: conociendoprops
• Seleccionar framework: React
• Seleccionar variación JavaScript
  

Después de instalar Vite, deberás acceder a la carpeta con el nombre del proyecto con el comando: cd conociendoProps (conhecendoProps en portugués).

Ahora que estamos dentro de la carpeta, será necesario instalar los archivos que serán necesarios para la producción en nuestro entorno de desarrollo (archivos React). Ejecuta el comando: npm install.

Borrando lo que no usaremos

En este caso específico, podemos eliminar algunos archivos que no serán necesarios para la ejecución y el aprendizaje props. Elimina los siguientes archivos:

• Dentro de la carpeta src, excluye los archivos: App.css index.css
• Allí mismo, excluye las líneas de código.
• Dentro de archivo main.jsx, elimina la línea 4 que contiene: import './index.css’. Dentro del archivo App.jsx, borra todo el contenido.

Manos a la obra

Ahora comencemos nuestro proyecto para que podamos usar el props. Para abordar este tema, vamos a desarrollar 3 pósteres sobre juegos.

1) Primero, trabajemos en el archivo App.jsx. ¡Dentro de él crearemos la estructura que se cargará en la interfaz, importando nuestros componentes a este archivo!

export default function App() {
  return (
    <>
    
    </>
  )
}

2) Ahora, creemos una nueva carpeta para nuestros componentes dentro de la carpeta src, que se llamará components. Dentro de esta carpeta de components crearemos nuestro componente Card que quedará dentro de una nueva carpeta llamada Card y dentro de ella habrá un archivo llamado index.jsx. Dentro de la carpeta components, crearemos un nuevo componente llamado Button que va a seguir la misma idea de la creación de Card. Así la estructura de carpetas:

Dentro de la carpeta Card, trabajemos en el archivo index.jsx creando la estructura principal y dentro de la carpeta Button vamos a trabajar en los botones de nuestros pósteres.

Archivo index.jsx de la carpeta Button:

export default function Button() {
  return <button>Comprar agora</button>;
}

Archivo index.jsx de la carpeta Card:

import Button from "../Button";

export default function Card() {
  return (
    <div>
      <img src="src/assets/zelda.png" alt="" />
      <div>
        <h3>Pôster The Legend of Zelda (The Wind Waker)</h3>
        <p>
          The Legend of Zelda: The Wind Waker" é um jogo icônico que cativou jogadores com seus visuais deslumbrantes e jogabilidade envolvente. Lançado para o console Nintendo GameCube em 2002,
          rapidamente se tornou um amado título na lendária série "Legend of Zelda
        </p>
        <Button></Button>
      </div>
    </div>
  );
}

Tomemos un descanso y veamos cómo se ve nuestro proyecto dentro de la interfaz. Para ello accederemos a la terminal de VS Code y ejecutaremos el comando npm run dev. Luego acceda al enlace y veremos que la página queda así:

Estilizando nuestro póster

En la carpeta src crea otra llamada styles y dentro de ella genera un archivo llamado globals.css.

Dentro del archivo main.jsx verás algo así:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./styles/globals.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Dentro del archivo globals.css verás algo así:

* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: bisque;
}

Ahora, dentro de la carpeta Card crea un nuevo archivo llamado style.module.css. Haz lo mismo dentro de la carpeta Button.

Vamos a estilizar el style.module.css de Card colocando lo siguiente:

.container {
  display: flex;
  align-items: center;
  margin: 0 30%;
  margin-top: 4rem;
  padding: 3rem;
  gap: 0 4rem;
  background-color: whitesmoke;
  border-radius: 1rem;
}

h3,
p {
  margin-bottom: 2rem;
}

Después de hacer esto, importaremos este estilo y agregaremos las clases a los elementos en el archivo index.jsx de Card. Luego, el archivo index.jsx de Card lucirá así:

import Button from "../Button";
import styles from "./style.module.css";

export default function Card() {
  return (
    <div className={styles.container}>
      <img src="src/assets/zelda.png" alt="" />
      <div>
        <h3>Pôster The Legend of Zelda (The Wind Waker)</h3>
        <p>
          The Legend of Zelda: The Wind Waker" é um jogo icônico que cativou jogadores com seus visuais deslumbrantes e jogabilidade envolvente. Lançado para o console Nintendo GameCube em 2002,
          rapidamente se tornou um amado título na lendária série "Legend of Zelda
        </p>
        <Button></Button>
      </div>
    </div>
  );
}

Vamos a estilizar el style.module.css de Button con:

.button {
  padding: 0.6rem 0.8rem;
  color: #ffffff;
  background-color: black;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.button:hover {
  scale: 1.1;
}

Después de hacer esto, importaremos este estilo y agregaremos las clases a los elementos en el archivo index.jsx de Button. Luego, el archivo index.jsx de Button lucirá así:

import styles from "./style.module.css";

export default function Button() {
  return <button className={styles.btn}>Comprar agora</button>;
}

Comprobando cómo quedó la interfaz del póster después del estilo:

Reutilizando el componente

Como mencionamos anteriormente, nuestro objetivo es crear tres carteles sobre 3 juegos diferentes pero solo tenemos uno. Por lo tanto, necesitamos crear dos carteles más y para ello no tendremos que volver a escribir todo el código (obviamente), por lo que usaremos una característica muy utilizada en el desarrollo de React: la reutilización de componentes.

Para realizar este trámite es muy sencillo, solo sigue los pasos a continuación:

1) Ingresar al archivo App.jxs que está en la carpeta src.

2) Reutilizar el componente Card, replicándolo dos veces más dentro de nuestro fragment.

Ve cómo lucirá el archivo App.jsx:

Echemos un vistazo a cómo se ve nuestro proyecto a través de la interfaz, ¡ahora tenemos 3 carteles o pósters!

Trabajando con los props

Ya casi hemos terminado y ahora hemos llegado a la etapa donde explicaré qué son y cómo usar los props en React.

¿Qué son los props?

• De manera simple, los props son mecanismos que le permiten transmitir datos desde un componente principal a un componente secundario. Por tanto, se puede decir que son una forma eficaz de conectar componentes entre sí.
• El uso de props Es una excelente manera de hacer que sus componentes sean más flexibles y reutilizables. Esto se debe a que cada instancia de componente puede recibir diferentes accesorios, lo que da como resultado diferentes comportamientos o vistas. Y lo mejor de todo es que los accesorios son inmutables, por lo que los componentes no pueden modificarlos. Esto garantiza un comportamiento más predecible y facilita mucho el seguimiento de errores.
• Al utilizar props de forma adecuada, los desarrolladores pueden crear componentes encapsulados e independientes, lo que hace que el código sea más fácil de mantener, probar y comprender. Los accesorios son uno de los pilares del modelo de programación declarativa de React, que enfatiza la composición y reutilización de componentes para construir interfaces de usuario flexibles y escalables.

¿Cómo usar props?

Este paso será 100% práctico, ¡así que prepara el código!

Comencemos siguiendo algunos pasos:

1) Lo primero que debemos hacer es acceder al archivo index.jsx del componente Card, y en la función debemos pasar el nombre como primer parámetro props (el nombre a pasar puede ser cualquier cosa, pero por convención se usa el nombre props, y siempre debe pasarse como primer parámetro de la función, que está destinada exclusivamente a esta funcionalidad).

2) Una vez hecho esto, cambiaremos el contenido de la etiqueta <h3></h3>. Dentro del mismo accederemos a una propiedad del objeto props. Como intencionamos esta etiqueta como título de los carteles, accederemos al valor de una propiedad llamada title (que crearemos en el siguiente paso). Por ahora, el archivo index.jsx del componente Card está así:

3) Ahora creemos y manipulemos el valor de esta propiedad title. Para ello, accederemos al archivo App.jsx de la carpeta src. En ese archivo, pasaremos la propiedad title como un “atributo HTML” y manipular su valor, luciendo así:

4) ¡De esta manera, cada cartel tendrá un título único! Por tanto, la interfaz quedará así:

5) ¡Ahora apliquemos esta misma lógica para cambiar las imágenes! En el archivo index.jsx del componente Card vamos a alterar el atributo src de la tag img ingresando el valor de la propiedad image. Quedarí así:

6) Volviendo al archivo App.jsx, será necesario Importe las imágenes para poder manipular las imágenes y pasarlas como valor de propiedad image, en la cual ingresamos el valor en el componente Card. Queda así:

7) ¡La interfaz del proyecto se ve así!

8) ¡Último paso! Cambia la descripción de cada cartel. En el archivo index.jsx del componente Card vamos a ingresar el valor de la propiedad que generaremos, el text dentro de la tag <p>. Queda así:

9) Ahora, en el archivo App.jsx en la carpeta src, será necesario crear variables para que el código sea más limpio. ¿Alguna vez te has imaginado pasar textos enormes como los valores de las propiedades que hay dentro de cada componente? De hecho, no está mal pero sería un código sucio y difícil de entender. Por eso creamos variables, cada una para cada cartel y las llamamos como resultado de la propiedad que creamos, texto. Quedando así:

10) ¡Interfaz terminada! Agregué personalización alrededor de las imágenes usando CSS, ¡es un desafío para ti!

Consejos

Simplificando los props

Además de la forma que nos enseñaron a acceder a los valores de los props, también existe otra forma de pasar los parámetros a las funciones que recibirán las propiedades, que es mediante la desestructuración de objetos. Para ello basta con utilizar la sintaxis desestructurante y pasar directamente el nombre de las propiedades a las que accederemos. Luego, el archivo index.jsx del componente Card quedará así:

Conociendo PropTypes

PropTypes son una forma de definir los tipos de propiedades (props) que se pasan a los componentes en React. Se utilizan para especificar qué tipos de datos se esperan para cada accesorio y ayudan a garantizar el uso correcto de los componentes, además de proporcionar mensajes de error claros si los tipos de datos no coinciden con lo esperado.

Los PropTypes son una característica del paquete prop-types, uno separado de React, pero a menudo se usa junto con él. Los prop-types proporcionan un conjunto de validadores predefinidos para verificar tipos de datos como cadenas, números, valores booleanos, objetos, matrices y otros.

1. Entonces, todavía dentro del archivo index.jsx del componente Card vamos a importar PropTypes de esta manera: import PropTypes from "prop-types";
2. Ahora necesitas llamar a la función que crea el componente Card, que en este caso es la función misma Card y al lado llamaremos al objeto estático .propTypes para que dentro de él podamos definir qué tipos de valores esperados habrá en cada prop. Queda así:
   

Conociendo defaultProps

DefaultProps sigue la misma idea que PropTypes pero, como su nombre indica, se utiliza para asignar valores predeterminados, es decir, si el componente Card se reutiliza y no tiene ningún valor en sus propiedades, sus valores pasan a ser los que se asignaron en defaultProps. Se obtiene el archivo index.jsx del componente Card de esta forma:

Para verlo funcionar en la práctica, es necesario reutilizar el componente Card en el archivo App.jsx, sin pasar las propiedades. El archivo App.jsx y la interfaz se verán así, respectivamente:

Conclusión

¡Felicidades! Ha completado con éxito la lectura de este artículo que cubre los conceptos fundamentales de props, PropTypes, defaultProps y algunos consejos adicionales para mejorar tu experiencia con React. Espero que esta guía haya proporcionado una comprensión clara y útil de estos importantes temas.

A lo largo de este artículo, exploramos el poderoso sistema de props de React, que permite pasar datos de un componente principal a sus componentes secundarios. Vimos cómo se pueden utilizar accesorios para hacer que nuestros componentes sean dinámicos y reutilizables, lo que permite una mayor flexibilidad en nuestras aplicaciones.

Además, discutimos la importancia de usar PropTypes. Con la ayuda del paquete prop-types, podemos definir los tipos de datos esperados para nuestros props, asegurando la integridad y evitando errores inesperados en tiempo de ejecución. Esta práctica ayuda a que nuestro código sea más robusto, legible y facilita la detección de posibles errores durante el desarrollo.

También mencionamos defaultProps, que nos permite establecer valores predeterminados para los props si no se proporcionan. Esto evita la necesidad de comprobar la capacidad de nulidad y hace que nuestro código sea más limpio y conciso.

Espero que te haya gustado este artículo. ¡Hasta la próxima!