Cómo personalizar componentes de React con props

El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for DOnations.

Introducción

A través de este tutorial, creará componentes personalizados pasando props a su componente. Los props son argumentos que se proporcionan a un elemento JSX. Se parecen a los props HTML estándares, pero no están predefinidos y pueden tener varios tipos de datos de JavaScript, incluidos números, cadenas, funciones, matrices e incluso otros componentes de React. Sus componentes personalizados pueden utilizar props para mostrar datos o utilizar los datos para hacer que los componentes sean interactivos. Los props son un elemento clave en la creación de componentes que se adaptan a situaciones diferentes, y aprender sobre ellos le proporcionará las herramientas necesarias para desarrollar componentes personalizados que puedan manejar situaciones únicas.

Después de añadir props a su componente, usará PropTypes para definir el tipo de datos que espera que reciba un componente. Los PropTypes son un sistema de tipo sencillo que comprueba que los datos coincidan con los tipos previstos durante el tiempo de ejecución. Sirven como documentación y como un verificador de errores que le ayudará a hacer que su aplicación sea predecible durante su escalamiento.

Al final del tutorial, usará diferentes props para crear una aplicación pequeña que tome una matriz de datos de animales y muestre la información, incluidos el nombre común, el nombre científico, el tamaño, la dieta y datos adicionales.

Requisitos previos

• Necesitará un entorno de desarrollo que se ejecute con Node.js. Este tutorial se probó con la versión 10.20.1 de Node.js y la versión 6.14.4 de npm. Para instalarlo en macOS o Ubuntu 18.04, siga los pasos de Cómo instalar Node.js y crear un entorno de desarrollo local en macOS o las indicaciones de la sección Instalación con un PPA de Cómo instalar Node.js en Ubuntu 18.04.

• En el siguiente tutorial, usará Create React App. Puede encontrar instrucciones para instalar una aplicación con Create React App en Cómo configurar un proyecto de React con Create React App. Para este tutorial también se supone que tendrá conocimiento de los componentes de React, que podrá incorporar en nuestro tutorial Cómo crear componentes personalizados en React.

• También deberá tener conocimientos básicos de JavaScript, que podrá encontrar en Cómo desarrollar código en JavaScript, junto con conocimientos básicos de HTML y CSS. Un recurso adecuado para HTML y CSS es Mozilla Developer Network.

Paso 1: Crear un proyecto vacío

En este paso, creará un nuevo proyecto usando Create React App. Luego, eliminará el proyecto de ejemplo y los archivos relacionados que se instalan al iniciar el proyecto. Por último, creará una estructura de archivos simple para organizar sus componentes.

Para comenzar, cree un nuevo proyecto. En su línea de comandos, ejecute la siguiente secuencia de comandos para instalar un proyecto nuevo usando create-react-app​​​1​​:

npx create-react-app prop-tutorial

Al finalizar el proyecto, posiciónese en el directorio:

cd prop-tutorial

En una nueva pestaña o ventana de terminal, inicie el proyecto usando la secuencia de comandos de inicio de Create React App. El navegador actualizará los cambios automáticamente; deje que esta secuencia de comandos se ejecute mientras trabaja:

npm start

Obtendrá un servidor local activo. Si el proyecto no se abrió en una ventana de navegador, puede encontrarlo en http://localhost:3000/. Si lo ejecuta desde un servidor remoto, la dirección será http://your_domain:3000.

Su navegador se cargará con una aplicación de React sencilla incluida como parte de la aplicación de Create React App:

Creará un conjunto completamente nuevo de componentes personalizados. Comenzará limpiando código de texto estándar para poder tener un proyecto vacío.

Empiece abriendo src/App.js en un editor de texto. Es el componente root que se inserta en la página. Todos los componentes empezarán desde aquí. Puede obtener más información sobre App.js en Cómo configurar un proyecto de React con Create React App.

Abra src/App.js con el siguiente comando:

nano src/App.js

Verá un archivo como este:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Elimine la línea import logo from './logo.svg';​​​. Luego, sustituya todo en instrucción return para mostrar un conjunto de etiquetas vacías: <</>. Esto le proporcionará una página de validación que no muestra nada. El código final tendrá el siguiente aspecto:

import React from 'react';
import './App.css';

function App() {
  return <></>;
}

export default App;

Guárdelo y salga del editor de texto.

Por último, elimine el logo. No lo usará en su aplicación y debería eliminar los archivos que no se usen a medida que el trabajo avance. Le evitará confusiones en el futuro.

En la ventana de la terminal, escriba el siguiente comando:

rm src/logo.svg

Si observa su navegador, verá una pantalla en blanco.

Ahora que limpió el proyecto Create React App, cree una estructura de archivos sencilla. Esto le permitirá mantener sus componentes aislados y preservar su independencia.

Cree un directorio llamado components en el directorio src. Este contendrá todos sus componentes personalizados.

mkdir src/components

Cada componente tendrá su propio directorio para almacenar el archivo de componentes junto con los estilos, las imágenes, si hay alguna, y las pruebas.

Cree un directorio para App:

mkdir src/components/App

Mueva todos los archivos de la App a ese directorio. Utilice el comodín, *, para seleccionar cualquier archivo que empiece con App. sin importar la extensión. Luego, utilice el comando mv para disponerlos en el directorio nuevo.

mv src/App.* src/components/App

Por último, actualice la ruta de importación relativa en index.js, el componente root que inicia todo el proceso.

nano src/index.js

La instrucción import debe apuntar al archivo App.js en el directorio App; realice el siguiente cambio resaltado:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Guarde el archivo y ciérrelo.

Ahora que el proyecto está configurado, puede crear su primer componente.

Paso 2: Crear componentes dinámicos con props

En este paso, creará un componente llamado props, que se modificará sobre la base de la información de entrada. Los props son los argumentos que se pasan a una función o clase; sin embargo, dado que sus componentes se transforman en objetos HTML con JSX, pasará los props como si fueran atributos HTML. A diferencia de lo que sucede con los elementos HTML, puede pasar diferentes tipos de datos; desde cadenas, hasta matrices y objetos e incluso funciones.

Aquí creará un componente que mostrará información sobre animales. Este componente tomará el nombre común y el nombre científico del animal como cadenas, el tamaño como entero, la dieta como una matriz de cadenas y la información adicional como un objeto. Pasará la información al nuevo componente como props y consumirá esa información en su componente.

Al final de este paso, dispondrá de un componente personalizado que consumirá props diferentes. También usted reutilizará el componente para mostrar una matriz de datos utilizando un componente común.

Agregar datos

Primero, necesita algunos datos de ejemplo. Cree un archivo llamado “data” en el directorio src/App.

touch src/components/App/data.js

Abra el nuevo archivo en su editor de texto:

nano src/components/App/data.js

A continuación, agregue una matriz de objetos que usará como datos de ejemplo:

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
  {
    name: 'Gorilla',
    scientificName: 'Gorilla beringei',
    size: 205,
    diet: ['plants', 'insects'],
    additional: {
      notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
    }
  },
  {
    name: 'Zebra',
    scientificName: 'Equus quagga',
    size: 322,
    diet: ['plants'],
    additional: {
      notes: 'There are three different species of zebra.',
      link: 'https://en.wikipedia.org/wiki/Zebra'
    }
  }
]

La matriz de objetos contiene diferentes datos y le brindará la oportunidad de probar varios props. Cada objeto es un animal diferente con nombre de animal, nombre científico, tamaño, dieta y un campo opcional llamado additional, que contendrá enlaces o notas. En este código, también exportó la matriz como default.

Guarde el archivo y ciérrelo.

Crear componentes

A continuación, cree un componente marcador de posición llamado AnimalCard. Llegado el momento, este componente tomará props y mostrará los datos.

Primero, cree un directorio en src/components llamado AnimalCard y luego aplique touch a un archivo llamado src/components/AnimalCard/AnimalCard.js​ ​​y a un archivo CSS llamado src/components/AnimalCard/AnimalCard.css.

mkdir src/components/AnimalCard
touch src/components/AnimalCard/AnimalCard.js
touch src/components/AnimalCard/AnimalCard.css

Abra AnimalCard.js en su editor de texto:

nano src/components/AnimalCard/AnimalCard.js

Añada un componente básico que importe la CSS y muestre una etiqueta <h2>.

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard() {
  return <h2>Animal</h2>
}

Guarde el archivo y ciérrelo. Ahora, debe importar los datos y el componente en su componente base App.

Abra src/components/App/App/App.js:

nano src/components/App/App.js

Importe los datos y el componente y, luego, realice un bucle con los datos que muestran el componente para cada elemento en la matriz:

import React from 'react';
import data from './data';
import AnimalCard from '../AnimalCard/AnimalCard';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard key={animal.name}/>
      ))}
    </div>
  )
}

export default App;

Guarde el archivo y ciérrelo. Aquí, usted utiliza el método de matriz .map() para iterar los datos. Además de añadir este bucle, también tiene un div de ajuste con una clase que usará para aplicar estilo y una etiqueta <h1> para asignar a su proyecto.

Cuando realice el guardado, el navegador se volverá a cargar y verá una etiqueta para cada carta.

A continuación, añada estilo para alinear los elementos. Abra App.css:

nano src/components/App/App.css

Sustituya el contenido por lo siguiente para organizar los elementos:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.wrapper h1 {
    text-align: center;
    width: 100%;
}

Esto utilizará flexbox para reorganizar los datos, de modo que los alinee. El padding da algo de espacio en la ventana del navegador. justify-content distribuirá el espacio adicional entre elementos y .wrapper h1 dará a la etiqueta Animal el ancho completo.

Guarde el archivo y ciérrelo. Cuando lo haga, el navegador se actualizará y verá algunos datos espaciados.

Agregar props

Ahora que configuró sus componentes, puede añadir su primer prop. Al hacer un bucle con sus datos, tuvo acceso a cada objeto en la matriz data y los elementos que contiene. Añadirá cada parte de los datos a un prop separado que luego usará en su componente de AnimalCard.

Abra App.js:

nano src/components/App/App.js

Añada un prop name a AnimalCard.

import React from 'react';
...
function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          key={animal.name}
          name={animal.name}
        />
      ))}
    </div>
  )
}

export default App;

Guarde el archivo y ciérrelo. El prop name tiene el aspecto de un atributo HTML estándar; sin embargo, en lugar de una cadena usted pasará la propiedad name del objeto animal entre llaves.

Ahora que pasó un prop para el nuevo componente, necesita usarlo. Abra AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Todos los props que pasa al componente se recopilan en un objeto que será el primer argumento de su función. Desestructure el objeto para extraer props individuales:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard(props) {
  const { name } = props;
  return (
    <h2>{name}</h2>
  );
}

Tenga en cuenta que no necesita desestructurar un prop para usarlo, pero que este es un método útil para gestionar los datos de ejemplo de este tutorial.

Después de desestructurar el objeto, puede utilizar los componentes individuales de datos. En este caso, usará el título en una etiqueta <h2>, rodeando el valor con llaves para que React sepa que debe evaluarlo como JavaScript.

También puede utilizar una propiedad en el objeto prop con notación de puntos. Como ejemplo, puede crear un elemento <h2> como este:<h2>{props.title}</h2>. La ventaja de la desestructuración es que puede recopilar props no utilizados y emplear el operador rest de objetos.

Guarde el archivo y ciérrelo. Cuando lo haga, el navegador se volverá a cargar y verá el nombre específico de cada animal en lugar de un marcador de posición.

La propiedad name es una cadena, pero un prop puede ser cualquier tipo de datos que pueda pasar a una función JavaScript. Para ver esto en funcionamiento, añada el resto de los datos.

Abra el archivo App.js:

nano src/components/App/App.js

Añada un prop para cada uno de los siguientes: scientificName, size, diet y additional. Se incluyen cadenas, enteros, matrices y objetos.

import React from 'react';
...

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {albums.map(album => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

Debido a que creará un objeto, puede añadirlo en cualquier orden que desee. La alfabetización hace que sea más fácil examinar una lista de props, en especial en una lista más grande. También puede añadirlos en la misma línea, pero al separarlos uno en cada línea se preserva la legibilidad.

Guarde y cierre el archivo. Abra AnimalCard.js.

nano src/components/AnimalCard/AnimalCard.js

Esta vez, desestructure las props de la lista del parámetro de función y utilice los datos del componente:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
    </div>
  );
}

Después de extraer los datos, puede añadir scientificName y size en las etiquetas de encabezado, pero deberá convertir la matriz en una cadena para que React pueda mostrarla en la página. Puede hacerlo con join(', '), lo cual creará una lista separada con comas.

Guarde y cierre el archivo. Cuando lo haga, el navegador se actualizará y verá los datos estructurados.

Puede crear una lista similar con el objeto additional y, en su lugar, añadir una función para alertar al usuario con los datos. Esto le dará la oportunidad de pasar funciones como props y, luego, utilizar datos dentro de un componente cuando invoque una función.

Abra App.js:

nano src/components/App/App.js

Cree una función llamada showAdditionalData que convertirá el objeto en una cadena y la mostrará como una alerta.

import React from 'react';
...

function showAdditional(additional) {
  const alertInformation = Object.entries(additional)
    .map(information => `${information[0]}: ${information[1]}`)
    .join('\n');
  alert(alertInformation)
};

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          showAdditional={showAdditional}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

La función showAdditional convierte el objeto en una matriz de pares en la cual el primer elemento es la clave y el segundo el valor. Luego asigna los datos convirtiendo el par de claves en una cadena. Luego los une con un salto de línea \n antes de pasar la cadena completa a la función de alerta.

Debido a que JavaScript puede aceptar funciones como argumentos, React también puede aceptar funciones como props. Por lo tanto, puede pasar showAdditional a AnimalCard como un prop llamado showAdditional.

Guarde y cierre el archivo. Abra AnimalCard:

nano src/components/AnimalCard/AnimalCard.js

Retire la función showAdditional del objeto props y cree un <button> con un evento onClick que invoque la función con el objeto additional:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  showAdditional,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
      <button onClick={() => showAdditional(additional)}>More Info</button>
    </div>
  );
}

Guarde el archivo. Cuando lo haga, el navegador se actualizará y verá un botón después de cada tarjeta. Cuando haga clic en el botón, obtendrá una alerta con los datos adicionales.

Si intenta hacer clic en More Info para Lion, verá un error. Esto se debe a que no hay datos adicionales para el león. Verá cómo solucionarlo en el paso 3.

Por último, añada estilo a la tarjeta de música. Añada un className de animal-wrapper al div en AnimalCard:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
...
  return (
    <div className="animal-wrapper">
...
    </div>
  )
}

Guarde y cierre el archivo. Abra AnimalCard.css:

nano src/components/AnimalCard/AnimalCard.css

Añada CSS para aplicar a las tarjetas y al botón un pequeño borde y un relleno:

.animal-wrapper {
    border: solid black 1px;
    margin: 10px;
    padding: 10px;
    width: 200px;
}

.animal-wrapper button {
    font-size: 1em;
    border: solid black 1px;
    padding: 10;
    background: none;
    cursor: pointer;
    margin: 10px 0;
}

Este CSS añadirá un pequeño borde a la tarjeta y sustituirá el estilo predeterminado de botón por un borde y relleno. cursor: pointer cambiará el cursor cuando pase el puntero sobre el botón.

Guarde y cierre el archivo. Cuando lo haga, el navegador se actualizará y verá los datos en tarjetas individuales.

En este punto, creó dos componentes personalizados. Pasó datos al segundo componente del primer componente utilizando props. Entre los props se incluyeron diferentes datos, como cadenas, enteros, matrices, objetos y funciones. En su segundo componente, empleó los props para crear un componente dinámico utilizando JSX.

En el siguiente paso, usará un sistema de tipos llamado prop-types para especificar la estructura que su componente prevé, lo cual aportará previsibilidad en su aplicación y evitará errores.

Paso 3: Crear props predecibles con PropTypes y defaultProps

En este paso, agregará un sistema de tipos ligero a sus componentes con PropTypes. PropTypes funciona como otros sistemas de tipos definiendo explícitamente el tipo de datos que espera recibir para un prop determinado. También le dan la oportunidad de definir datos predeterminados en casos en que no siempre se requiere el prop. A diferencia de la mayoría de los sistemas de tipos, PropTypes es una comprobación de tiempo de ejecución. Por ello, si los props no coinciden con el tipo, el código se compilará de todas formas, pero también mostrará un error en la consola.

Al final de este paso, sumará previsibilidad a su componente personalizado definiendo el tipo para cada prop. Esto garantizará que la siguiente que trabaje en el componente tenga una idea clara de la estructura de los datos que el componente necesitará.

El paquete prop-types se incluye como parte de la instalación de Create React App. Para usarlo, lo único que debe hacer es importarlo a su componente.

Abra AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Luego importe PropTypes desde prop-types:

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

Añada PropTypes directamente a la función del componente. En JavaScript, las funciones son objetos; esto significa que puede añadir propiedades utilizando sintaxis de puntos. Añada los siguientes PropTypes a AnimalCard.js:

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
  diet: PropTypes.arrayOf(PropTypes.string).isRequired,
  name: PropTypes.string.isRequired,
  scientificName: PropTypes.string.isRequired,
  showAdditional: PropTypes.func.isRequired,
  size: PropTypes.number.isRequired,
}

Guarde y cierre el archivo.

Como puede ver, hay muchos PropTypes diferentes. Esta es solo una pequeña muestra; consulte la documentación oficial de React para ver los demás que puede utilizar.

Comenzaremos con el prop name. Aquí, especificará que name debe ser una string. La propiedad scientificName es la misma. size es un number, que puede incluir números de punto flotante, como 1.5, y enteros, como 6. showAdditional is una función (func).

diet, por otra parte, es un poco diferente. En este caso, especifica que diet será una array, pero también necesita especificar lo que esta matriz contendrá. En este caso, la matriz contendrá solo cadenas. Si desea mezclar tipos, puede utilizar otro prop llamado oneOfType, que toma una matriz de PropTypes válidos. Puede utilizar oneOfType en cualquier lugar. Por ello, si desea que size sea un número o una cadena, puede cambiar el parámetro por esto:

size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

El prop additional también es un poco más complejo. En este caso, especifica un objeto y, para una mayor claridad, indica lo que desea que contenga. Para hacerlo, se utiliza PropTypes.shape, que toma un objeto con campos adicionales que necesitarán sus propios PropTypes. En este caso, link y notes son PropTypes.string.

Actualmente, todos los datos están bien formados y coinciden con los props. Para ver lo que sucede si los PropTypes no coinciden, abra sus datos:

nano src/components/App/data.js

Cambie el tamaño a una cadena en el primer elemento:

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: '140',
    diet: ['meat'],
  },
...
]

Guarde el archivo. Cuando lo haga, el navegador se actualizará y verá un error en la consola.

Error
index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`.
    in AnimalCard (at App.js:18)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

A diferencia de otros sistemas de tipos, como TypeScript, PropTypes no le proporcionará una advertencia en el momento de la compilación y. siempre y cuando no haya errores de código, se compilará de todas formas. Esto significa que puede publicar accidentalmente código con errores de prop.

Restablezca el tipo correcto para los datos:

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
...
]

Guarde y cierre el archivo.

Abra AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Cada prop, a excepción de additional, tiene la propiedad isRequired. Eso significa que se necesitan. Si no incluye un prop requerido, el código se compilará de todas formas, pero verá un error de tiempo de ejecución en la consola.

Si no se necesita un prop, puede añadir un valor predeterminado. Siempre se recomienda añadir un valor predeterminado para evitar errores de tiempo de ejecución si no se requiere un prop. Por ejemplo, en el componente AnimalCard, invoca una función con los datos additional. Si no está allí, la función intentará modificar un objeto que no existe y la aplicación fallará.

Para evitar este problema, añada una defaultProp para additional:

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
...
}

AnimalCard.defaultProps = {
  additional: {
    notes: 'No Additional Information'
  }
}

Añada los defaultProps a la función utilizando sintaxis de puntos, como lo hizo con propTypes. Luego, agregue un valor predeterminado que debe utilizar si el prop es undefined. En este caso, se hace coincidir la forma de additional, incluido un mensaje de que no hay más información.

Guarde y cierre el archivo. Cuando lo haga, el navegador se actualizará. Después de que se actualice, haga clic en el botón More Info para Lion. No tiene un campo additional en los datos; por lo tanto, el prop es undefined. Sin embargo, AnimalCard hará una sustitución en el prop predeterminado.

Ahora, sus props estarán bien documentados y serán necesarios o tendrán un valor por defecto para garantizar la previsibilidad del código. Esto ayudará a los futuros desarrolladores (incluido usted mismo) a determinar los props que un componente necesita. Esto hará que sea más fácil intercambiar y reutilizar sus componentes proporcionando información completa sobre cómo estos usarán los datos que reciben.

Conclusión

En este tutorial, creó varios componentes que utilizan props para mostrar la información de un elemento principal. Los props le ofrecen la flexibilidad necesaria para comenzar a desglosar los componentes más grandes en piezas más pequeñas y con mayor concentración. Ahora que sus datos ya no están acoplados estrechamente con la información de su visualización, podrá tomar decisiones sobre cómo segmentar su aplicación.

Los props son una herramienta crucial para crear aplicaciones complejas y dan la oportunidad de crear componentes que pueden adaptarse a los datos que reciben. Con PropTypes, crea componentes predecibles y legibles que permitirán a un equipo reutilizar el trabajo de los demás para crear una base de código flexible y estable. Si desea acceder a más tutoriales de React, consulte nuestra página temática de React o regrese a la página de la serie sobre cómo desarrollar código con React.js.