Barra de navegación en React

Rana Hasnain Khan 18 abril 2022

React React Navbar

Demostraremos cómo crear una barra de navegación en React.

Barra de navegación en React

Una barra de navegación es una sección de una GUI destinada a ayudar a los visitantes a acceder a la información de su sitio web.

Primero crearemos un nuevo proyecto usando npx en CLI para crear una barra de navegación.

# CLI
npx create-react-app navigation

O usando npm.

# CLI
npm init create-react-app navigation

O usando yarn.

# CLI
yarn create react-app navigation

Una vez que hemos creado un nuevo proyecto en React. Lo abriremos en nuestro VS Code yendo al directorio de navegación y escribiendo el siguiente comando.

# CLI
cd navigation
code .

Usando la terminal, podemos iniciar nuestra aplicación.

# React Terminal
npm start

Vamos a crear una nueva carpeta components en la carpeta src. Dentro de la carpeta components, necesitamos crear otra carpeta Navbar. En la carpeta Navbar, creemos dos nuevos archivos llamados Navbar.js y Navbar.css.

En Navbar.js, debemos importar React y Component de React y crear la clase Navbar.

El código en Navbar.js se verá así.

# react 
import React, { Component } from "react";

export class Navbar extends Component{
  render(){
    return{
      
    }
  }
}

Devolvamos una barra de navegación básica.

# react
import React from "react";
import { MenuItems } from "./MenuItems";
import { Nav } from "react-bootstrap";

export default function Navbar() {
  return (
    <Nav className="NavbarItems">
      <h1 className="Navbar-logo">React</h1>
      <div className="menu-icon"></div>
      <ul>
        <li><a href="#"></a></li>
      </ul>
    </Nav>
  );
}

Crearemos otro archivo llamado MenuItems.js para definir un array de elementos de menú. Si queremos cambiarlo en el futuro, podemos cambiarlo fácilmente desde un archivo.

El código en MenuItems.js se verá así.

# react
export const MenuItems = [
  {
    Title: "Home",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "About Us",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "Our Services",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "Contact Us",
    url: "#",
    cName: "nav-links"
  },
  {
    Title: "Sign Up",
    url: "#",
    cName: "nav-links-mobile"
  }
];

El title será el nombre del elemento del menú, mientras que la URL será el enlace a esa página y cName será el nombre de la clase. Podemos copiar y pegar esta estructura para tantos elementos de menú como queramos. El último elemento es para el menú móvil, así que agregue nav-links-mobile.

Importaremos MenuItems a Navbar.js.

# react
import { MenuItems } from "MenuItems"

Mapearemos MenuItems. Navbar.js se verá así.

# react
import React from "react";
import { MenuItems } from "./MenuItems";
import { Nav } from "react-bootstrap";

export default function Navbar() {
  return (
    <Nav className="NavbarItems">
      <h1 className="Navbar-logo">React</h1>
      <div className="menu-icon"></div>
      <ul>
        {MenuItems.map((item, index) => {
          return (
            <li key={index}>
              <a className={item.cName} href={item.url}>
                {item.Title}
              </a>
            </li>
          );
        })}
      </ul>
    </Nav>
  );
}

Importaremos Navbar.js en App.js.

# react
import "./styles.css";
import Navbar from "./components/Navbar/Navbar";

export default function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

Producción:

barra de navegación en React

Agreguemos un código CSS para que parezca un menú de navegación.

# react
body {
  margin: 0;
  padding: 0;
}
.NavbarItems {
  background-color: black;
  margin: 0;
  padding: 0;
  height: 80px;
}

.NavbarItems h1 {
  color: white;
  padding: 10px;
  font-size: 25px;
}
.logo {
  width: 20%;
  float: left;
}
.navbar-ul {
  width: 80%;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0;
}
li {
  display: inline;
  list-style: none;
  font-size: 18px;
  padding: 10px;
  line-height: 80px;
}
.nav-links {
  color: white;
  text-decoration: none;
}
.nav-links-mobile {
  color: white;
  text-decoration: none;
}
li:hover {
  background-color: white;
}
li:hover .nav-links {
  color: black;
}
li:hover .nav-links-mobile {
  color: black;
}

Producción:

navegación en React resultado final

Así es como podemos hacer navegación en React e importarla a cualquier página usando un componente.

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Barra de navegación en React

Artículo relacionado - React Navbar