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.

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import React, { Component } from "react";   class NavBar extends Component {   render() {     return (       <React.Fragment>         <nav className="navbar navbar-dark bg-dark mb-3">           <a className="navbar-brand" href="#">             <h1>Total Items <span className="badge badge-secondary">{this.props.totalItems}</span></h1>           </a>         </nav>       </React.Fragment>     );   } }   export default NavBar;

---

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

1 2 3 4 5 6 7

import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import "bootstrap/dist/css/bootstrap.css";   ReactDOM.render(<App />, document.getElementById("root"));

---

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.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

import React, { Component } from "react"; import NavBar from "./components/navbar"; import Items from "./components/items"; import "./App.css";   class App extends Component {   state = {     items: [{ id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 }]   };     handleIncrement = item => {     const items = [...this.state.items];     const index = items.indexOf(item);     items[index] = { ...item };     items[index].value++;     this.setState({ items });   };     handleReset = () => {     const items = this.state.items.map(i => {       i.value = 0;       return i;     });     this.setState({ items });   };     handleDelete = itemId => {     const items = this.state.items.filter(item => item.id !== itemId);     this.setState({ items: items });   };     render() {     return (       <React.Fragment>         <NavBar           totalItems={this.state.items.reduce((prev, cur) => {             return prev + cur.value;           }, 0)}         />         <Items           onReset={this.handleReset}           onDelete={this.handleDelete}           onIncrement={this.handleIncrement}           items={this.state.items}         />       </React.Fragment>     );   } }   export default App;

---

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

import React, { Component } from "react"; import Item from "./item";   class Items extends Component {   render() {     return (       <React.Fragment>         <button           onClick={this.props.onReset}           className="btn btn-success btn-lg m-3"         >           Reset All         </button>         {this.props.items.map(item => (           <Item             key={item.id}             onDelete={this.props.onDelete}             onIncrement={this.props.onIncrement}             item={item}           />         ))}       </React.Fragment>     );   } }   export default Items;

item.jsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import React, { Component } from "react";   class Item extends Component {   render() {     return (       <React.Fragment>         <div className="card mb-2">           <h5 className={this.styleCardHeader()}>{this.styleCount()}</h5>           <div className="card-body">             <button               onClick={() => this.props.onIncrement(this.props.item)}               className="btn btn-lg btn-outline-secondary"             >               Increment             </button>               <button               onClick={() => this.props.onDelete(this.props.item.id)}               className="btn btn-lg btn-outline-danger ml-4"             >               Delete             </button>           </div>         </div>       </React.Fragment>     );   }     styleCardHeader() {     let classes = "card-header h4 text-white bg-";     classes += this.props.item.value === 0 ? "warning" : "primary";     return classes;   }     styleCount() {     const { value } = this.props.item;     return value === 0 ? "No Items!" : value;   } }   export default Item;

---

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.