Cara Membina Bar Navigasi dalam React: Panduan Langkah demi Langkah

Hei! Bersedia untuk membina bar navigasi (navbar) yang hebat untuk aplikasi React anda? Dalam panduan ini, kami akan membimbing anda melalui segala-galanya daripada pertimbangan reka bentuk kepada pelaksanaan dan amalan terbaik kebolehaksesan. Jom terjun!

Mengapa Navbar Penting?

Navbar ialah elemen penting bagi mana-mana aplikasi web. Ia membolehkan pengguna menavigasi melalui halaman dan bahagian yang berbeza di tapak anda. Tanpa bar navigasi yang direka dengan baik, pengguna boleh tersesat atau kecewa dengan mudah, jadi adalah penting untuk memastikan bar navigasi anda mempunyai semua pautan dan ciri kebolehaksesan yang diperlukan.

Pengambilan Utama

1. Elemen Penting: Navbar adalah penting untuk membantu pengguna menavigasi tapak web anda.
2. Komponen Boleh Digunakan Semula: React sangat bagus untuk mencipta komponen boleh guna semula dan modular, sesuai untuk membina bar navigasi.
3. Penting Kebolehaksesan: Memastikan bar navigasi anda boleh diakses bermakna semua pengguna, termasuk mereka yang kurang upaya, boleh menavigasi tapak anda dengan berkesan.

Apakah Navbar?

Navbar ialah elemen antara muka pengguna yang biasanya terletak di bahagian atas atau sisi halaman web. Ia berfungsi sebagai bantuan navigasi, menyediakan pautan atau butang yang membolehkan pengguna mengakses bahagian atau halaman yang berbeza dalam tapak web. Navbar yang direka dengan baik membantu pengguna memahami struktur tapak anda dan bergerak dengan mudah antara bahagiannya.

Contoh Navbar yang Reka Bentuk Baik

• Airbnb: Reka bentuk yang bersih dan minimalis dengan pautan yang jelas ke bahagian seperti "Tempat untuk menginap", "Pengalaman" dan "Pengalaman Dalam Talian".
• Dropbox: Mudah namun berkesan, menampilkan menu lungsur turun "Produk" yang menonjol untuk meneroka tawaran yang berbeza.

Membina Navbar dalam React

Mari bina navbar untuk tapak web e-dagang yang dipanggil “ShopNow”.

Langkah 1: Merekabentuk Navbar

Sebelum kita memulakan pengekodan, mari kita merancang reka bentuk. Untuk ShopNow, kami akan ada:

• Logo di sebelah kiri
• Pautan ke bahagian seperti "Produk", "Perihal Kami" dan "Hubungi"
• Ikon troli beli-belah dengan lencana yang menunjukkan bilangan item
• Ikon pengguna untuk tindakan akaun seperti "Log Masuk" dan "Akaun Saya"

Berikut ialah mockup bagaimana ia mungkin kelihatan:

• Logo: "Beli Sekarang" di sebelah kiri
• Pautan: "Produk", "Perihal Kami", "Hubungi" di tengah
• Ikon: Troli beli-belah dan ikon pengguna di sebelah kanan

Langkah 2: Sediakan Projek React

Mula-mula, sediakan projek React baharu menggunakan Apl Buat React:

npx create-react-app shopnow
cd shopnow
npm start

Langkah 3: Mencipta Komponen Navbar

Buat fail baharu bernama Navbar.js dalam direktori src dan tambah kod berikut:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      {/* Navbar content goes here */}
    </nav>
  );
};

export default Navbar;

Sekarang, buat fail Navbar.css dalam direktori yang sama untuk menggayakan navbar kami.

Langkah 4: Menambah Struktur Navbar

Tambahkan struktur navbar di dalam komponen Navbar:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navbar-left">
        <a href="/" className="logo">
          ShopNow
        </a>
      </div>
      <div className="navbar-center">
        <ul className="nav-links">
          <li><a href="/products">Products</a></li>
          <li><a href="/about">About Us</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
      <div className="navbar-right">
        <a href="/cart" className="cart-icon">
          <i className="fas fa-shopping-cart"></i>
          <span className="cart-count">0</span>
        </a>
        <a href="/account" className="user-icon">
          <i className="fas fa-user"></i>
        </a>
      </div>
    </nav>
  );
};

export default Navbar;

Kod ini membahagikan bar navigasi kepada tiga bahagian: kiri untuk logo, tengah untuk pautan navigasi dan kanan untuk ikon.

Langkah 5: Menggayakan Navbar

Buka Navbar.css dan tambah gaya berikut:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navbar-center .nav-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-center .nav-links li {
  margin-right: 1rem;
}

.navbar-center .nav-links a {
  color: #fff;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right .cart-icon,
.navbar-right .user-icon {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  position: relative;
}

.navbar-right .cart-count {
  background-color: #f44336;
  color: #fff;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

Langkah 6: Mengimport dan Memaparkan Navbar

Akhir sekali, import komponen Navbar dan jadikannya dalam fail App.js anda:

import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    <div>
      <Navbar />
      {/* Rest of your app content goes here */}
    </div>
  );
}

export default App;

Sekarang, apabila anda menjalankan apl React anda, anda sepatutnya melihat bar navigasi di bahagian atas halaman.

Langkah 7: Meningkatkan Kebolehcapaian

Kebolehaksesan adalah penting untuk memastikan semua pengguna boleh menavigasi tapak anda. Berikut ialah beberapa amalan terbaik:

1. Gunakan HTML Semantik: Kami telah menggunakan

<a href="/cart" className="cart-icon" aria-label="Shopping Cart">
  <i className="fas fa-shopping-cart"></i>
  <span className="cart-count">0</span>
</a>
<a href="/account" className="user-icon" aria-label="User Account">
  <i className="fas fa-user"></i>
</a>

@media (max-width: 768px) {
  .navbar-center .nav-links {
    display: none;
  }

  .navbar-right {
    display: flex;
    align-items: center;
  }

  .navbar-right .hamburger-menu {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
  }
}