Introducción a props

Completado

Los componentes de React están diseñados para ser unidades reutilizables. Para habilitar la reutilización, los componentes permiten que se les pasen datos a través de las propiedades o props.

props son valores de solo lectura disponibles para una única instancia de un componente. Se pueden establecer mediante programación o con la misma sintaxis que se usa al establecer los atributos de los elementos HTML. A diferencia del HTML normal, props no se limita a cadenas o valores primitivos; pueden ser objetos complejos o matrices. props está disponible como propiedad de this dentro de un componente. props puede contener tantas propiedades como su componente necesite, y es capaz de almacenar objetos o cualquier otro tipo de datos.

Escenario

Para que los componentes sean reutilizables, se suelen pasar los datos que se van a mostrar como props. Aquí, creará un componente denominado RecipeTitle para mostrar el título de la receta, que se pasará como una propiedad.

Creación del componente

1. Abra la carpeta de inicio en Visual Studio Code, como se resalta en la información general.

2. Dentro de Visual Studio Code, abra src/RecipeTitle.jsx.

3. Agregue el código siguiente bajo la línea // TODO: Create RecipeTitle component:

   // TODO: Create RecipeTitle component
   function RecipeTitle(props) {
       return (
           <section>
               <h2>{ props.title }</h2>
           </section>
       )
   };
   
   export default RecipeTitle;
   

Exploración del código

RecipeTitle tiene un aspecto similar al de un componente básico de React, con dos actualizaciones clave.

En primer lugar, acepta un parámetro denominado props. Esto contendrá automáticamente todos los atributos o propiedades que se pasen al componente cuando se utilice.

En segundo lugar, puede usar los valores contenidos en props como haría con cualquier parámetro normal. Está buscando un valor denominado title, que se muestra dentro de un elemento h2.

Uso del componente

Ahora vamos a actualizar App.jsx para usar el nuevo componente RecipeTitle con la propiedad title.

1. Abra App.jsx.

2. Agregue el código siguiente bajo la línea TODO: Add import for RecipeTitle para importar el componente RecipeTitle recién creado:

   // TODO: Add import for RecipeTitle
   import RecipeTitle from './RecipeTitle'
   

3. Agregue el siguiente código debajo de la línea que lee TODO: Add recipe object para crear un objeto para nuestra receta:

   // TODO: Add recipe object
   const recipe = {
       title: 'Mashed potatoes',
       feedback: {
           rating: 4.8,
           reviews: 20
       },
       ingredients: [
           { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
           { name: '4 Tbsp butter', prepared: false },
           { name: '1/8 cup heavy cream', prepared: false },
           { name: 'Salt', prepared: true },
           { name: 'Pepper', prepared: true },
       ],
   };
   

   Nota:

   En el transcurso de los ejercicios de este módulo, usará todo el objeto recipe. Por ahora, céntrese en title.

4. Agregue el código siguiente bajo la línea que lee TODO: Add RecipeTitle component:

   {/* TODO: Add RecipeTitle component */}
   <RecipeTitle title={ recipe.title } />
   

Exploración del código

Empiece por crear un objeto para representar la receta que desea mostrar y agréguele una propiedad title. A continuación, use el componente RecipeTitle del mismo modo que usaría un elemento HTML o cualquier otro componente de React. La diferencia clave es que se establece el atributo title para que sea el valor de recipe.title. Mediante el uso de handlebars ({ }), puede leer dinámicamente el valor.

Nota:

Si el valor que desea usar para title ha sido un literal de cadena, puede establecer la propiedad mediante la sintaxis title='Recipe title.

Visualización de la página

1. Guarde todos los archivos.
2. Vuelva al explorador y actualice la página. Ahora debería ver el título Mashed Potatoes en la página.