序章
このチュートリアルでは、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グリッドを使用して画像ギャラリーを構築しました。 グリッドをいじって、さらに優れたセットアップを作成することができます。