Incorporación de estado a una aplicación

Completado

React administra el estado de varias maneras. Nos centraremos en una de las principales formas, los enlaces de React.

Un enlace es un mecanismo que permite acceder al funcionamiento interno de React. Puede usar enlaces para ejecutar código cuando se produce algún cambio en React. También se usan para registrar algo con React, como un estado. Cuando creamos el estado mediante el enlace useState, por ejemplo, obtenemos el objeto de estado y una función de actualizador para actualizar el valor del enlace.

Escenario

Una técnica común que usan muchos cocineros es la mise en place, que significa "preparación" en francés. Los cocineros se aseguran de que todos los elementos están preparados antes de empezar a cocinar.

En nuestra aplicación de recetas, queremos permitir que los usuarios pulsen ingredientes para marcarlos como preparados. Comenzaremos por crear el estado y pasar la información de presentación al componente. En la unidad siguiente, exploraremos cómo controlar eventos.

Incorporación de estado

Cualquier tipo de datos u objeto de JavaScript se puede registrar con estado en React. La función que se usa para registrar el objeto es useState. La función useState especifica el valor inicial. Devuelve el objeto con estado recientemente creado y otra función que se puede usar para actualizar el valor.

Nota:

En React, el estado es inmutable, lo que significa que no se puede cambiar. Para modificar el valor de un objeto con estado, reemplácelo por una nueva instancia que contenga los valores adecuados. La función que devuelve useState administra este proceso.

1. En el Explorador de VS Code, expanda la carpeta src y abra el archivo App.jsx. Observe el objeto initialRecipe existente. Usaremos este objeto como valor predeterminado de nuestro elemento recipe con estado.

2. Cree el objeto de estado recipe y la función setRecipe desde useState. Para ello, agregue el código siguiente después de la línea que lee, TODO: Create recipe state.

   const [ recipe, setRecipe ] = useState(initialRecipe);
   

   En este código, recipe es el objeto con estado. La función setRecipe se utilizará para reemplazar recipe por cualquier versión nueva.

3. Podemos usar recipe para pasar las propiedades en los componentes. En el código siguiente, se usará el componente RecipeTitle para mostrar el título y los comentarios. Pase los valores title y feedback en RecipeTitle mediante la incorporación del código siguiente después del comentario que lee, TODO: Pass recipe metadata to RecipeTitle.

   <RecipeTitle title={recipe.title} feedback={recipe.feedback} />
   

4. Abra el archivo RecipeTitle.jsx. Observe el componente existente que muestra las propiedades title y feedback.

Prueba de la página

1. Guarde todos los archivos.

2. Regrese al explorador y actualícelo. Ahora debería ver los metadatos de la receta mostrados en la página.