ReactとCSSグリッドを使用して無限スクロール画像ギャラリーを構築する方法

投稿日: 2022-04-20 2022-08-08
タグ: React

序章

このチュートリアルでは、ReactフロントエンドJavascriptフレームワークとCSSグリッドを使用して、 Unsplash API を使用して写真画像を埋め込み、無限スクロール画像ギャラリーを構築します。 Scotch.ioのcodepenコーディングチャレンジをコードのベースとして使用し、React.jsを使用してインターフェースを構築し、Axiosを使用してHTTPリクエストを作成します。 react-infinite-scroll 無限スクロール機能を実装するためのライブラリ。

また、このチュートリアルでは、Reactフックを使用し、プロジェクト全体で機能コンポーネントを使用します。

前提条件

このチュートリアルでは、この画像コラージュベースコードを、プロジェクトを構築するための開始点として使用します。

ステップ1—必要なパッケージのインストール

CDNから必要なすべての依存関係をインポートします。 Codepenには、モジュールの名前を入力し、結果から1つを選択してプロジェクトに追加できる、検索バーが用意されています。

インストールされる依存関係は次のとおりです。

Unsplash に進んでアプリケーションを作成し、アクセスキーを取得します。

ステップ2—ベースコンポーネントの構築

Reactでは、親コンポーネントのHTMLテンプレートはJSXで記述されています。 JSXでテンプレートを作成するこれらのHTML要素の記述に進みます。

機能コンポーネントを作成し、次のコマンドを使用してDOMでレンダリングします。

let Collage = () => {

    // Return JSX
  return (
    <div className="hero is-fullheight is-bold is-info">
      <div className="hero-body">
        <div className="container">
          <div className="header content">
            <h2 className="subtitle is-6">Code Challenge #16</h2>
            <h1 className="title is-1">
              Infinite Scroll Unsplash Code Challenge
            </h1>
          </div>
    // Images go here

        </div>
      </div>
    </div>
  );
};

// Render the component to the DOM element with ID of root
ReactDOM.render(<Collage />, document.getElementById("root"));

ここでは、親コンポーネントを作成しました Collage 、JSXでHTML要素を返し、IDが root. Bulmaクラスは、ページの基本的なスタイルを提供するために使用されました。

ステップ3—単一の画像コンポーネントを構築する

次に、フェッチされた単一の画像に対して単一のコンポーネントを作成することに移りましょう。これは、各画像の位置を設定するのに役立ちます。

次の機能を使用して単一の機能コンポーネントを作成します。

const UnsplashImage = ({ url, key }) => (
  <div className="image-item" key={key} >
    <img src={url} />
  </div>
);

このコンポーネントはの小道具を受け取ります url と key、表示される画像のURLと、レンダリングされた各画像のキーです。コンポーネントでは、 <img/> フェッチされた画像を表示する要素。

ステップ4—Unsplashからのランダム画像のフェッチとレンダリング

Unsplashは、ランダムな画像をフェッチするための無料のAPIを提供します。画像は状態コンテナに保存され、状態からDOMに渡されます。 React Hooksを使用するため、状態メソッドとライフサイクルメソッドを次のように処理します。 useState と useEffect、それぞれ。

の中に Collage コンポーネントで、2つの状態変数を作成します。1つは着信画像を保持し、もう1つは画像がロードされているかどうかをプログラムに通知するブール値を格納します。

[...]

const [images, setImages] = React.useState([]);
const [loaded, setIsLoaded] = React.useState(false);

[...]

次に、Axiosを使用して10個のランダムな画像をフェッチする関数を作成します。これは、取得したアクセスキーと返される画像の量を渡しながら、APIエンドポイントにGETリクエストを行うことによって行われます。これを行う：

const fetchImages = (count = 10) => {
    const apiRoot = "https://api.unsplash.com";
    const accessKey = "{input access key here}";

    axios
      .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`)
      .then (res => {
        setImages([...images, ...res.data]);
        setIsLoaded(true);
      });
};

AxiosはPromiseベースのライブラリであり、リクエストの解決時に、 setImages フェッチされた画像を入力し、フェッチされた以前の画像を拡散するメソッド。また、の値を設定します loaded に true.

画像が状態で保存されたので、これを呼び出しましょう fetchImages コンポーネントがマウントされると機能します。以前のバージョンのReactでは、これを componentDidMount ライフサイクル方式。ただし、Reactは現在 useEffect 機能コンポーネントのすべてのライフサイクル操作を処理するためのフック。

の中に Collage コンポーネント、呼び出し fetchImages マウント時：

[...]

React.useEffect(() => {
    fetchImages();
}, []);

[...]

The useEffect フックは、配列である2番目のパラメーターを取ります。フックで提供される関数は、配列が更新または変更されるたびに実行されます。

これで、Unsplashから10個のランダムな画像をフェッチするページができました。無限スクロールコンテナで画像をレンダリングすることに進みましょう。

React-infinite-scroll-componentは、読み込みスピナーまたは任意の要素をプレースホルダーとして表示し、ローダーが表示または表示に近づいたらさらにデータをフェッチする関数を呼び出し、指定されたデータを表示する機能を提供します。返されたJSXで Collage そしてその後 div のクラスで header、無限スクロールコンポーネントの画像を次のようにレンダリングします。

<InfiniteScroll
     dataLength={images}
     next={() => fetchImages(5)}
     hasMore={true}
     loader={
      <img
         src="https://res.cloudinary.com/chuloo/image/upload/v1550093026/scotch-logo-gif_jq4tgr.gif"
         alt="loading"
      />}
 >
     <div className="image-grid" style={{ marginTop: "30px" }}>
        {loaded ? 
            images.map((image, index) => (
                <UnsplashImage url={image.urls.regular} key={index} />
            )): ""}
    </div>
</InfiniteScroll>

の中に InfiniteScroll コンポーネント、関数をに渡しました next パラメータ。関数はを呼び出します fetchImages 関数とのパラメータを渡します 5、これはフェッチされる画像の数です。の中に loader パラメータ、ロードプレースホルダーとして機能する画像をJSXに渡しました。

.map() を反復処理するために使用されます images 状態の配列とを使用して各画像をレンダリングします UnsplashImage 成分。

ステップ5—ギャラリーのスタイリング

CSSグリッドを使用して、フェッチした画像のスタイルを設定します。 CSSを次のように編集します。

.title {
  font-family: 'Carter One';
}
.container {
  margin-top: 50px;
  text-align: center;
}

.image-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(50px, auto);

  .image-item:nth-child(5n){
    grid-column-end: span 2;
  }

  img{
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

これにより、幅250pxの列を持つグリッドが作成され、画像コンテナ全体が塗りつぶされます。また、行は最小で50ピクセル、最大で最大50ピクセルに設定されています。 auto 各画像に合わせます。使用しました grid-column-end 5つおきの画像にプロパティを設定して、1つではなく2つの画像スペースを使用するようにします。

The object-fit プロパティは、各画像がそのコンテナのフルサイズに収まるか含まれていることを確認します。

完成したギャラリーはここhttps://codepen.io/Chuloo/full/BMPXqyにあります。

結論

このチュートリアルでは、ReactフックとCSSグリッドを使用して画像ギャラリーを構築しました。グリッドをいじって、さらに優れたセットアップを作成することができます。

getdocs

13036