カスタム React Hook を使った応答型ナビゲーション

はじめに

このプロジェクトでは、useWindowSize と呼ばれるカスタム React Hook を作成して、現在のウィンドウサイズを取得し、それを使って Web アプリケーションのナビゲーションバーを条件付きでレンダリングする方法を学びます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• useWindowSize カスタム Hook を実装して、現在のウィンドウサイズを取得する
• App コンポーネントで useWindowSize Hook を使って、ウィンドウ幅に基づいてナビゲーションバーを更新する

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• 再利用可能な機能をカプセル化するためのカスタム React Hook を作成する
• useState と useEffect Hook を使って状態と副作用を管理する
• 現在のウィンドウサイズに基づいてコンポーネントを条件付きでレンダリングする

Skills Graph

useWindowSize Hook を実装する

始めるには、エディタを開きます。エディタから以下のファイルが見えます。

├── 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

このステップでは、現在のウィンドウサイズを取得するための useWindowSize カスタム Hook をどのように実装するか学びます。

1. src/Hooks ディレクトリにある useWindowSize.js ファイルを開きます。
2. このファイルで必要な依存関係をインポートします。

import { useEffect, useState } from "react";

3. 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;
};

解説:

• useWindowSize 関数は、現在のウィンドウ幅と高さを含むオブジェクトを返します。
• useState Hook は、状態変数 windowSize とそれを更新する関数 setWindowSize を作成するために使用されます。
• changeWindowSize 関数は、ウィンドウがリサイズされたときに windowSize 状態を更新するために定義されています。
• useEffect Hook は、resize イベントのイベントリスナーを追加し、コンポーネントがアンマウントされたときにそれを削除するために使用されます。
• windowSize オブジェクトは useWindowSize 関数から返されます。

アプリケーションをテストする

1. useWindowSize.js ファイルを保存します。
2. ターミナルで npm install コマンドを使用して依存関係をダウンロードし、依存関係のダウンロードが完了するまで待ってから、npm start コマンドを使用してプロジェクトを起動します。
3. プロジェクトが正常に起動したら、「Web 8080」をクリックしてブラウザでプレビューします。
4. その効果は、ユーザーがウィンドウをリサイズすると、下部のコンテンツにウィンドウ幅が表示され、上部のナビゲーションバーは小さな画面ではサブメニューを2つ非表示にし、大きな画面では3つのメニューを表示することです。

おめでとうございます！ あなたは正常に useWindowSize Hook を実装し、App コンポーネントで使用して、ウィンドウサイズに基づいてナビゲーションバーを更新しました。

まとめ

おめでとうございます！ このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabExでさらに多くの実験を行うことができます。