Breaking

Post Top Ad

Your Ad Spot

viernes, 16 de octubre de 2020

Crear un componente de barra de navegación en React

 


En este tutorial vamos a agregar un componente NavBar a la aplicación que hemos estado construyendo en React. Durante este proceso, necesitaremos hacer una refactorización para cambiar el estado local de los componentes secundarios al componente principal de la aplicación. Siguiendo esta convención, necesitaremos generar eventos en los componentes secundarios mientras los manejamos en el componente primario. Esto permite que nuestra aplicación tenga una única fuente de verdad. En otras palabras, varios componentes pueden reflejar actualizaciones basadas en los mismos datos cambiantes. Veamos cómo funciona esto ahora.


Agregar el archivo del componente Navbar

En primer lugar, podemos agregar un nuevo archivo navbar.jsx a la carpeta de componentes con la que hemos estado trabajando.
reaccionar archivo navbar

En el componente NavBar podemos agregar el siguiente código. Observe que estamos usando el objeto props para obtener el número total de elementos en la aplicación para que podamos mostrarlos en el área de navegación.


Reconfigurar para usar App.js

Queremos volver a utilizar App.js como componente principal de la aplicación. Para hacer esto, podemos hacer un ajuste a index.js para que ahora rendericemos <App /> en lugar de <Items /> así.
index.js


Levantando el estado en reacción

Cuando trabaje en React, a veces escuchará hablar sobre cómo elevar el estado. Los documentos de React describen este concepto de la siguiente manera.

A menudo, varios componentes deben reflejar los mismos datos cambiantes. Recomendamos elevar el estado compartido a su antepasado común más cercano. Veamos cómo funciona esto en acción.

En nuestro caso, eso significa que queremos tener el siguiente diseño de la aplicación donde el estado ahora reside en el componente de la aplicación de nivel superior.

reaccionar estado de elevación

Para hacer esto, necesitábamos refactorizar todos los componentes secundarios para mover su estado al componente de la aplicación. Aquí está nuestro nuevo componente de aplicación. En la parte superior está el estado compartido, luego tenemos los controladores de eventos y, por último, el método render (). Consulte los tutoriales de React anteriores si necesita un repaso sobre estos conceptos. Para sumar los elementos totales a medida que incrementamos, utilizamos el método reduce () de JavaScript .
App.js


Componentes secundarios refactorizados

Dado que todo el estado y la lógica se elevó al componente de la aplicación de nivel superior, nuestros componentes <Items /> y <Item /> ahora están más optimizados. De hecho, ya ni siquiera tienen ningún estado local. Si necesitan trabajar con datos, deben obtenerlos a través del objeto props. Además, para actualizar los datos, los eventos se generan en el hijo y se manejan en el padre.

items.jsx

item.jsx


Estado compartido en acción

Ahora, cuando interactuamos con la aplicación, podemos ver algunos conceptos en acción. Hacer clic en el botón de incremento en cada artículo individual aumenta el recuento de ese artículo. Además, el componente NavBar ahora realiza un seguimiento de la suma de todos los valores de los elementos. Finalmente, podemos hacer clic en un botón para restablecer todos los contadores a cero.


Crear un componente de barra de navegación en el resumen de React

En este tutorial hicimos una buena refactorización para agregar un componente Navbar a la aplicación. Aprendimos un poco sobre cómo elevar el estado en reaccionar, así como cómo generar y manejar eventos. Si aún no lo ha hecho, consulte los Tutoriales de React anteriores para ver cómo llegamos a este punto.


No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas