Erstellen einer Marine in React

Dieser Leitfaden zeigt, dass das Erstellen einer reaktionsschnellen und zugänglichen Navigationsleiste (NAVBAR) in React erstellt wird. NAVAHS sind für die Navigation der Website von entscheidender Bedeutung, sodass Benutzer problemlos auf verschiedene Abschnitte und Seiten zugreifen können. Dieses Tutorial umfasst die Best Practices von Design, Implementierung und Barrierefreiheit.

Schlüsselkonzepte:

• Navigationsbars sind wesentliche UI -Elemente für die Navigation der Website.
• Reacts Komponentenbasierte Architektur erleichtert wiederverwendbare und modulare Navigationsstaberstellung.
• Priorisierung der Barrierefreiheit stellt sicher, dass alle Benutzer die Website effektiv navigieren können.

  Was ist eine Navigation?

  Eine Navigationsleiste, die normalerweise oben oder Seite einer Webseite positioniert ist, bietet Links oder Schaltflächen zum Navigieren von Website -Abschnitten oder -Seiten. Eine gut gestaltete Naviglleiste verbessert die Benutzererfahrung durch Klärung der Website-Struktur und Vereinfachung der Navigation.

  Beispiele für gut gestaltete Achtereiser:

  • Airbnb: Ein sauberes, minimalistisches Design mit klaren Links zu "Orte zum Übernachten", "Erfahrungen" und "Online -Erlebnisse".

    

  • Dropbox: Eine einfache, effektive Navigationsleiste mit einem prominenten Dropdown -Menü "Produkte".

    

    Erstellen einer React Navi: Eine Schritt-für-Schritt-Anleitung

    Dieses Beispiel schafft eine Marine für eine fiktive E-Commerce-Website "ShopNow".

    Schritt 1: Design

    Die ShopNow Navbarbar wird: enthalten

    • Ein Logo links.

    • Links zu "Produkten", "über uns" und "Kontakt".

    • Ein Einkaufswagen -Symbol mit einem Artikelanzahl.

    • Ein Benutzersymbol für Kontoaktionen ("Melden Sie sich an", "mein Konto").

      

      Schritt 2: Projekt -Setup

      Erstellen eines neuen React -Projekts mit React App Create React App:

       <code class="language-bash"> npx erstellen reag-app ShopNow
      CD ShopNow
      npm start <https:> <https:>
      <p> <strong> Schritt 3: Navi -Komponente (<code> navbar.js <https:>) <https:> <https:>
      <p> erstellen <code> navbar.js <https:> und fügen Sie die grundlegende Komponentenstruktur hinzu: <https:>
      <pre class="brush:php;toolbar:false"> <code class="language-javascript"> reagieren aus 'reagt';
      import '.https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712navbar.css';
      
      const navbar = () = & gt; {
        zurückkehren (
          <nav classname="navbar">
            {https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* Navigbarinhalte wird hierher gehen
          <https:>
        );
      };
      
      Standard -Navigation exportieren. <https:> <https:>
      <p> create <code> navbar.css <https:> zum Styling. <https:>
      <p> <strong> Schritt 4: Navi -Struktur (<code> navbar.js <https:>) <https:> <https:>
      <p> Fügen Sie die HTML -Struktur des Navihs hinzu: <https:>
      <pre class="brush:php;toolbar:false"> <code class="language-javascript"> https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29A9f8460E5E2BE4DE4EDDE57FD83712 ... (
      
      const navbar = () = & gt; {
        zurückkehren (
          <nav classname="navbar">
            <div classname="navbar-left">
              <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712" classname="logo"> ShopNow <https:>
            <https:>
            <div classname="navbar-center">
              <ul classname="nav-links">
                <li> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712products"> Produkte <https:> <https:>
                <li> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about"> Über uns <https:> <https:>
                <li> <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712contact"> Kontakt <https:> <https:>
              <https:>
            <https:>
            <div classname="navbar-right">
              <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cart" classname="cart-icon">
                <i classname="fas fa-shopping-cart"> <https:>
                <span classname="cart-count"> 0 <https:>
              <https:>
              <a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712account" classname="user-icon">
                <i classname="fas fa-user"> <https:>
              <https:>
            <https:>
          <https:>
        );
      };
      
      Standard -Navigation exportieren. <https:> <https:>
      <p> Denken Sie daran, eine Schriftart fantastisch einzuschließen. <https:>
      <p> <strong> Schritt 5: Styling (<code> navbar.css <https:>) <https:> <https:>
      <p> CSS -Stile zu <code> navbar.css <https:> hinzufügen (Beispielstile im Originaltext). <https:>
      <p> <strong> Schritt 6: Integration (<code> app.js <https:>) <https:> <https:>
      <p> importieren und rendern die <code> navi <https:> -Komponente in <code> app.js <https:>: <https:>
      <pre class="brush:php;toolbar:false"> <code class="language-javascript"> reagieren aus 'reagt';
      Importieren Sie Navbar aus '.https: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712navbar';
      
      Funktion App () {
        zurückkehren (
          <div>
            <navbar https:>
            {https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* Rest Ihres App -Inhalts * https: //www.php.cn/link/29a9f8460e5e2be4edde2be4edde2
          <https:>
        );
      }Standard -Standard -App; <https:> <https:>
      <p> <strong> Schritt 7: Best Practices für Zugänglichkeit <https:> <https:>
      <ul>
      <li> semantische html verwenden (<code> <nav> <https:>, <code> <ul> <https:>, <code> <li> <https:>, <code> <a> <https:>). <https:>
      <li> ARIA -Rollen hinzufügen (<code> rollen = "navigation" <https:> zu <code> <nav> <https:>). <https:>
      <li> Sicherheitsgrad der Tastatur (Registerkarte Fokus, Enterhttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712space -Aktivierung). <https:>. <li>. <code>
      <https:> Geben Sie klare Fokusstile an (<https:>: Fokus <li> css). <code>
      <https:> Verwenden Sie den deskriptiven Link-Textes (einschließlich <https:> aria-label <li> für Symbole). <https:>
      <https:> Responsive Design mit CSS -Medienabfragen implementieren (z. B. Hamburger -Menü). <p>
      <strong>
      <https:> <https:> Weitere Verbesserungen (angesprochene FAQs): <ul> <li>
      <strong>
      <https:> <https:> Reaktionsfähigkeit: <li> Verwenden Sie Medienabfragen und möglicherweise ein Hamburger -Menü für kleinere Bildschirme. <strong>
      <https:> <https:> externe Bibliotheken: <li> Beachten Sie React Bootstrap, Material-UI oder Ameisendesign für vorgefertigte Komponenten. <strong>
      <https:> <https:> Navigation Handhabung: <li> Verwenden Sie den React -Router zum Routing zwischen Komponenten. <strong>
      <https:> <https:> Animationshttps: //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Transition: <li> Verwenden Sie CSS -Übergänge, Animationen oder Javascript -Bibliotheken wie React Transformition Group.
      <strong> Wiederverwendbarkeit <https:> Komponente: <code> importieren und rendern die <https:> navi <https:> -Komponente über mehrere Seiten. <li>
      <strong> <https:> Suchfunktionalität: <https:> Fügen Sie eine Sucheingabe hinzu und handhaben Sie Benutzereingabe mit Status- und Ereignishandlern. <li>
      <strong> </strong>
      </li></https:></https:></strong>
      </li></https:></https:></code></https:></strong>
      </li></https:></https:></strong>
      </li></https:></https:></strong>
      </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></https:></code>
      </li></https:></https:></a></code></https:>
      </li></code></https:>
      </ul></code></https:></nav></code>
      </li>
      </ul></https:></https:></strong></p></https:></https:></https:></navbar>
      </div></code>