Barre de navigation en React

Rana Hasnain Khan 18 avril 2022

React React Navbar

Nous montrerons comment créer une barre de navigation dans React.

Une barre de navigation est une section d’une interface graphique destinée à aider les visiteurs à accéder aux informations de votre site Web.

Nous allons d’abord créer un nouveau projet en utilisant npx dans CLI pour créer une barre de navigation.

# CLI
npx create-react-app navigation

Ou en utilisant npm.

# CLI
npm init create-react-app navigation

Ou en utilisant yarn.

# CLI
yarn create react-app navigation

Une fois que nous avons créé un nouveau projet dans React. Nous allons l’ouvrir dans notre VS Code en allant dans le répertoire navigation et en tapant la commande suivante.

# CLI
cd navigation
code .

À l’aide du terminal, nous pouvons démarrer notre application.

# React Terminal
npm start

Créons un nouveau dossier components dans le dossier src. Dans le dossier components, nous devons créer un autre dossier Navbar. Dans le dossier Navbar, créons deux nouveaux fichiers appelés Navbar.js et Navbar.css.

Dans Navbar.js, il faut importer React et Component depuis React et créer la classe Navbar.

Le code dans Navbar.js ressemblera à ceci.

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

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

Revenons à une barre de navigation de base.

# 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>
  );
}

Nous allons créer un autre fichier nommé MenuItems.js pour définir un tableau d’éléments de menu. Si nous voulons le changer à l’avenir, nous pouvons facilement le changer à partir d’un seul fichier.

Le code dans MenuItems.js ressemblera à ceci.

# 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"
  }
];

Le title sera le nom de l’élément de menu, tandis que l'URL sera le lien vers cette page et cName sera le nom de la classe. Nous pouvons copier et coller cette structure pour autant d’éléments de menu que nous le souhaitons. Le dernier élément est pour le menu mobile, ajoutez donc nav-links-mobile.

Nous allons importer MenuItems dans Navbar.js.

# react
import { MenuItems } from "MenuItems"

Nous mapperons MenuItems. Navbar.js ressemblera à ceci.

# 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>
  );
}

Nous allons importer Navbar.js dans App.js.

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

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

Production :

barre de navigation en React

Ajoutons du code CSS pour le faire ressembler à un menu de navigation.

# 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;
}

Production :

navigation dans React résultat final

C’est ainsi que nous pouvons faire de la navigation dans React et l’importer dans n’importe quelle page à l’aide d’un composant.

Auteur: 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.

Barre de navigation dans React