Responsive Navigation mit benutzerdefiniertem React-Hook

Einführung

In diesem Projekt lernst du, wie du einen benutzerdefinierten React-Hook namens useWindowSize erstellen kannst, um die aktuelle Fenstergröße zu erhalten und sie zur bedingten Darstellung der Navigationsleiste in einer Webanwendung zu verwenden.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Implementiere den benutzerdefinierten Hook useWindowSize, um die aktuelle Fenstergröße zu erhalten
• Verwende den Hook useWindowSize in der App-Komponente, um die Navigationsleiste basierend auf der Fensterbreite zu aktualisieren

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Einen benutzerdefinierten React-Hook zu erstellen, um wiederverwendbare Funktionalität zu kapseln
• Die Hooks useState und useEffect verwenden, um den Zustand und Nebeneffekte zu verwalten
• Komponenten bedingt basierend auf der aktuellen Fenstergröße rendern

Implementiere den useWindowSize-Hook

Um loszulegen, öffne den Editor. Du kannst die folgenden Dateien in deinem Editor sehen.

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

In diesem Schritt wirst du lernen, wie du den benutzerdefinierten Hook useWindowSize implementierst, um die aktuelle Fenstergröße zu erhalten.

1. Öffne die Datei useWindowSize.js im Verzeichnis src/Hooks.
2. Importiere in dieser Datei die erforderlichen Abhängigkeiten:

import { useEffect, useState } from "react";

3. Definiere die Funktion useWindowSize:

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

Erklärung:

• Die Funktion useWindowSize gibt ein Objekt zurück, das die aktuelle Fensterbreite und -höhe enthält.
• Der Hook useState wird verwendet, um eine Zustandsvariable windowSize und eine Funktion setWindowSize zu erstellen, um sie zu aktualisieren.
• Die Funktion changeWindowSize ist definiert, um den Zustand windowSize zu aktualisieren, wenn das Fenster vergrößert oder verkleinert wird.
• Der Hook useEffect wird verwendet, um einen Ereignislistener für das resize-Ereignis hinzuzufügen und ihn zu entfernen, wenn die Komponente abmontiert wird.
• Das Objekt windowSize wird aus der Funktion useWindowSize zurückgegeben.

Teste die Anwendung

1. Speichere die Datei useWindowSize.js.
2. Lade die Abhängigkeiten herunter, indem du im Terminal den Befehl npm install verwendest. Warte, bis die Abhängigkeiten heruntergeladen sind, und starte dann das Projekt mit dem Befehl npm start.
3. Wenn das Projekt erfolgreich gestartet ist, klicke auf "Web 8080", um es in deinem Browser zu previewen.
4. Der Effekt besteht darin, dass wenn der Benutzer die Fenstergröße ändert, der untere Inhalt die Fensterbreite anzeigt und die obere Navigationsleiste auf kleinen Bildschirmen zwei Untermenüs ausblendet und auf großen Bildschirmen drei Menüs anzeigt.

Herzlichen Glückwunsch! Du hast den Hook useWindowSize erfolgreich implementiert und ihn in der App-Komponente verwendet, um die Navigationsleiste basierend auf der Fenstergröße zu aktualisieren.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.