Membuat Navbar dalam React

Panduan ini menunjukkan membina bar navigasi yang responsif dan boleh diakses (NAVBAR) dalam React. Navbars adalah penting untuk navigasi laman web, yang membolehkan pengguna mengakses bahagian dan halaman yang berbeza. Tutorial ini merangkumi reka bentuk, pelaksanaan, dan amalan terbaik aksesibiliti.

Konsep Utama:

navbars adalah elemen UI penting untuk navigasi laman web.
• seni bina berasaskan komponen React memudahkan penciptaan navbar yang boleh diguna semula dan modular.
• Mengutamakan kebolehcapaian memastikan semua pengguna dapat menavigasi laman web dengan berkesan.

• Apakah navbar? Navbar, biasanya diposisikan di bahagian atas atau sisi laman web, menyediakan pautan atau butang untuk menavigasi bahagian atau halaman laman web. Navbar yang direka dengan baik meningkatkan pengalaman pengguna dengan menjelaskan struktur laman web dan memudahkan navigasi.

  Contoh Navbars yang direka dengan baik:

  Airbnb: Reka bentuk yang bersih dan minimalis dengan pautan yang jelas ke "Tempat Menginap," "Pengalaman," dan "Pengalaman Dalam Talian."

  

  • Dropbox: Navbar yang mudah dan berkesan dengan menu dropdown "Produk" yang menonjol.

    Membina Navbar React: Panduan Langkah demi Langkah

    Contoh ini mewujudkan navbar untuk tapak e-dagang fiksyen, "Shopnow."

    Langkah 1: Reka bentuk

    Navbar Shopnow akan menampilkan:

    logo di sebelah kiri.

    • Pautan ke "Produk," "Mengenai Kami," dan "Hubungi."

    • ikon keranjang belanja dengan lencana kiraan item.

    • Ikon Pengguna untuk Tindakan Akaun ("Log masuk," "Akaun Saya").

      

      Langkah 2: Persediaan Projek Buat projek React baru menggunakan Create React App:

       NPX create-react-app shopnow
      CD Shopnow
      NPM Mula <code class="language-bash"> <https:>
      <https:> <p> Langkah 3: Komponen Navbar (<strong> navbar.js <code>) <https:> <https:>
      <https:> create <p> navbar.js <code> dan tambahkan struktur komponen asas: <https:>
      <https:> <pre class="brush:php;toolbar:false"> Import React dari 'React';
      import '.https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712navbar.css';
      
      const navbar = () = & gt; {
        kembali (
          <code class="language-javascript">
            {https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* Navbar kandungan akan pergi ke sini * https: //www.php.cn
          <nav classname="navbar">
        );
      };
      
      Eksport lalai navbar; <st> <https:>
      <https:> create <p> navbar.css <code> untuk gaya. <https:>
      <https:> <p> Langkah 4: Struktur Navbar (<strong> navbar.js <code>) <https:> <https:>
      <https:> Tambahkan struktur HTML Navbar: <p>
      Https://www.php.cn/lininK/29A9F8C8460E.
      
      const navbar = () = & gt; {
        kembali (
          <https:>
            <pre class="brush:php;toolbar:false">
              <code class="language-javascript"> Shopnow <shopnow classname="navbar">
            <div classname="navbar-left">
              <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712" classname="logo">
                <https:> <https:> Products <div classname="navbar-center"> <ul classname="nav-links">
                <li> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712products"> tentang kami <https:> <https:>
                <li> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about"> Hubungi <https:> <https:>
              <li>
            <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712contact">
            <https:>
              <https:>
                <https:> <https:>
                <div classname="navbar-right"> 0 <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cart" classname="cart-icon">
              <i classname="fas fa-shopping-cart">
              <https:>
                <span classname="cart-count"> <https:>
              <https:>
            <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712account" classname="user-icon">
          <i classname="fas fa-user">
        );
      };
      
      Eksport lalai navbar; <st> <https:>
      <https:> ingat untuk memasukkan font hebat. <p>
      <https:> <p> Langkah 5: Styling (<strong> navbar.css <code>) <https:> <https:>
      <https:> Tambah gaya CSS ke <p> navbar.css <code> (gaya contoh yang disediakan dalam teks asal). <https:>
      <https:> <p> Langkah 6: Integrasi (<strong> app.js <code>) <https:> <https:>
      <https:> mengimport dan membuat komponen <p> navbar <code> dalam <https:> app.js <code>: <https:>
      <https:> <pre class="brush:php;toolbar:false"> Import React dari 'React';
      import navbar dari '.https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712navbar';
      
      aplikasi fungsi () {
        kembali (
          <code class="language-javascript">
            <div>
            {https://www.php.cn/link/29A9F8C8460E5E2BE4EDDE557FD83712* Rehat kandungan aplikasi anda * https anda * https: //www.php.cn/link/29A9F8
          <navbar https:>
        );
      }Eksport App Lalai; <st> <https:>
      <https:> <p> Langkah 7: Amalan Terbaik Kebolehcapaian <strong> <https:>
      <https:>
      <ul> Gunakan html semantik (<li> <code> <sh>, <nav> <https:> <code>, <ul> <https:> <code>, <li> <https:> <code>). <a>
      <https:> Tambah Peranan ARIA (<https:> role = "navigasi" <li> ke <code> <https:> <s>). <code>
      <nav> Pastikan kebolehcapaian papan kekunci (Tab Focus, EnterHttps: //www.php.cn/link/29A9F8C8460E5E2BE4EDDE557FD83712SPACE Pengaktifan).
      <https:> memberikan gaya fokus yang jelas (<https:>: fokus <li> css). <https:>
      <li> Gunakan teks pautan deskriptif (termasuk <code> aria-label <https:> untuk ikon). <https:>
      <li> Melaksanakan reka bentuk responsif menggunakan pertanyaan media CSS (mis., Menu hamburger). <code>
      <https:>
      <https:> <li> Penambahbaikan lebih lanjut (FAQs ditangani): <https:> <https:>
      <p>
      <strong> <https:> Responsiveness: <https:> Gunakan pertanyaan media dan berpotensi menu hamburger untuk skrin yang lebih kecil. <ul>
      <li> <strong> Perpustakaan luaran: <https:> Pertimbangkan reaksi bootstrap, bahan-UI, atau reka bentuk semut untuk komponen pra-dibina. <https:>
      <li> <strong> Pengendalian navigasi: <https:> Gunakan penghala React untuk penghalaan antara komponen. <https:>
      <li> <s> animationshttps: //www.php.cn/link/29a9f8c8460e5e2be4edde5557fd83712transisi: <strong>
      <https:><strong> Komponen kebolehgunaan semula: <https:> import dan menjadikan komponen <code> navbar <https:> di beberapa halaman. <https:>
      <li> <strong> Fungsi carian: <https:> Tambahkan input carian dan mengendalikan input pengguna dengan pengendali negeri dan acara. <https:>
      <li> <strong> Styling Link Active: <https:> Gunakan React Router's <code> NavLink <https:> komponen atau logik tersuai untuk gaya aktif gaya. <https:>
      <https:>
      </https:></https:></https:></code></https:></strong>
      </li></https:></https:></strong>
      </li></https:></https:></code></https:></strong></https:></strong></s>
      </li></https:></https:></strong>
      </li></https:></https:></strong>
      </li>
      </ul></https:></https:></strong></p></https:></https:>
      </li></https:></https:></code>
      </li></https:></https:></code>
      </li></https:>
      </li></https:></https:></nav></code></s></https:></code>
      </li></https:></https:></a></code></https:>
      </li></code></https:>
      </ul></code></https:></nav></sh></code>
      </li>
      </ul></https:></https:></strong></p></https:></https:></st></navbar>
      </div></code>