著者はCOVID-19救済基金を選択し、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

StackOverflow 2020 Developer Survey によると、Reactは最も人気のあるJavaScriptフレームワークの1つであり、ウェブアプリのビューを効率的に変更するなど、多くの理由があります。 Virtual DOM を使用して、再利用可能、構成可能、ステートフルなコンポーネントを使用して、スケーラビリティなどを向上させます。 初心者のReact開発者は、実際のアプリケーションで使用するために知識を活用する経験を必要とすることがよくあります。 このチュートリアルでは、 Reactフックの使用方法、 useState()の使用方法、およびReactでAPI呼び出しを行う方法を紹介します。

この記事では、 UnsplashAPIを使用してReactで写真検索アプリケーションを構築する手順を説明します。 Unsplashは現在、最も使用され人気のある写真検索エンジンの1つであり、プロジェクトやアプリケーションを構築する際の優れたデータプロバイダーになる可能性があります。

このチュートリアルを終了すると、ReactHooksを使用してUnsplashAPIをクエリする実用的なアプリケーションができあがります。 このプロジェクトは、同じプログラミングロジックを再利用し、API呼び出しを含む他のプロジェクトを構築するためのベースとして使用できるため、定型文としても機能します。 写真検索アプリケーションには、次のように検索バーとレンダリングされた結果が含まれます。

Photo Search Application

完全なコードを確認したい場合は、 DigitalOceanCommunityGitHubリポジトリをご覧ください。

前提条件

このガイドに従うために:

  • 無料のUnsplashアカウントが必要になります。このアカウントは、公式のUnsplashWebサイトで入手できます。

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04