Navbar in React
Wir zeigen, wie man eine Navbar in React erstellt.
Navbar in React
Eine Navbar ist ein Abschnitt einer GUI, der Besuchern den Zugriff auf die Informationen Ihrer Website erleichtern soll.
Wir werden zuerst ein neues Projekt mit npx in CLI erstellen, um eine Navigationsleiste zu erstellen.
# CLI
npx create-react-app navigation
Oder mit npm.
# CLI
npm init create-react-app navigation
Oder indem wir yarn verwenden.
# CLI
yarn create react-app navigation
Sobald wir ein neues Projekt in React. Wir öffnen es in unserem VS-Code, indem wir in das Verzeichnis navigation gehen und den folgenden Befehl eingeben.
# CLI
cd navigation
code .
Über das Terminal können wir unsere App starten.
# React Terminal
npm start
Lassen Sie uns einen neuen Ordner components im Ordner src erstellen. Innerhalb des Ordners components müssen wir einen weiteren Ordner Navbar erstellen. Lassen Sie uns im Ordner Navbar zwei neue Dateien namens Navbar.js und Navbar.css erstellen.
In Navbar.js müssen wir React und Component aus React importieren und die Klasse Navbar erstellen.
Der Code in Navbar.js sieht dann so aus.
# react
import React, { Component } from "react";
export class Navbar extends Component{
render(){
return{
}
}
}
Lassen Sie uns eine einfache Navigationsleiste zurückgeben.
# 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>
);
}
Wir werden eine weitere Datei namens MenuItems.js erstellen, um eine Reihe von Menüelementen zu definieren. Wenn wir es in Zukunft ändern möchten, können wir es einfach von einer Datei aus ändern.
Der Code in MenuItems.js sieht so aus.
# 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"
}
];
Der title ist der Name des Menüpunkts, während die URL der Link zu dieser Seite und cName der Klassenname ist. Wir können diese Struktur für beliebig viele Menüpunkte kopieren und einfügen. Der letzte Punkt ist für das mobile Menü, also fügen Sie nav-links-mobile hinzu.
Wir werden MenuItems in Navbar.js importieren.
# react
import { MenuItems } from "MenuItems"
Wir werden MenuItems zuordnen. Navbar.js sieht dann so aus.
# 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>
);
}
Wir werden Navbar.js in App.js importieren.
# react
import "./styles.css";
import Navbar from "./components/Navbar/Navbar";
export default function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
Ausgabe:
Lassen Sie uns etwas CSS-Code hinzufügen, damit es wie ein Navigationsmenü aussieht.
# 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;
}
Ausgabe:
So können wir die Navigation in React erstellen und sie mithilfe einer Komponente in jede Seite importieren.
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.
LinkedIn