React のナビゲーションバー

Rana Hasnain Khan 2022年4月18日

React React Navbar

React でナビゲーションバーを作成する方法を示します。

React のナビゲーションバー

ナビゲーションバーは、訪問者が Web サイトの情報にアクセスできるようにすることを目的とした GUI のセクションです。

まず、CLI で npx を使用して新しいプロジェクトを作成し、ナビゲーションバーを作成します。

# CLI
npx create-react-app navigation

または、npm を使用します。

# CLI
npm init create-react-app navigation

または yarn を使用して。

# CLI
yarn create react-app navigation

React で新しいプロジェクトを作成したら。navigation ディレクトリに移動し、次のコマンドを入力して、VSCode で開きます。

# CLI
cd navigation
code .

ターミナルを使用して、アプリを起動できます。

# React Terminal
npm start

src フォルダに新しい components フォルダを作成しましょう。components フォルダー内に、別の Navbar フォルダーを作成する必要があります。Navbar フォルダーに、Navbar.js と Navbar.css という 2つの新しいファイルを作成しましょう。

Navbar.js では、React から React と Component をインポートし、Navbar クラスを作成する必要があります。

Navbar.js のコードは次のようになります。

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

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

基本的なナビゲーションバーを返しましょう。

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

メニュー項目の配列を定義するために、MenuItems.js という名前の別のファイルを作成します。将来変更したい場合は、1つのファイルから簡単に変更できます。

MenuItems.js のコードは次のようになります。

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

タイトルはメニュー項目の名前になり、URL はそのページへのリンクになり、cName はクラス名になります。この構造をコピーして、必要な数のメニュー項目に貼り付けることができます。最後の項目はモバイルメニューなので、nav-links-mobile を追加します。

MenuItems を Navbar.js にインポートします。

# react
import { MenuItems } from "MenuItems"

MenuItems をマップします。Navbar.js は次のようになります。

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

App.js に Navbar.js をインポートします。

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

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

出力：

React 中のナビゲーションバー

CSS コードを追加して、ナビゲーションメニューのように見せましょう。

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

出力：

React の最終結果のナビゲーション

これが、React でナビゲーションを作成し、コンポーネントを使用して任意のページにインポートする方法です。

著者： 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.

React のナビゲーションバー

関連記事 - React Navbar