どのようにUnsplash APIを使用して反応で画像検索アプリケーションを作成する

2632 ワード
unsplash react テキストリンク
このチュートリアルでは、イメージの膨大なコレクションへのアクセスを取得し、また、それらをダウンロードするUnsplash APIを使用して画像検索アプリケーションを作成します.
我々のアプリの開発の一部を開始する前に、それがlook exactlyになる方法を見てみましょう.
始めましょう.

内容

  • 反応アプリを作成する方法
  • 私たちのアプリ
    • のUIを構築する方法
  • アクセス・キーとAPI終点をunsplash
    • から得る方法
  • 我々のアプリ
    • でフックを使う方法
  • 私たちのアプリ
    • で画像を表示する方法
  • エラー処理の方法
  • 結論

    • 私たちは何を学びますか？


    このプロジェクトは主に初心者のためですが、彼らのスキルを磨くしたい誰もが続くことができます.このチュートリアルでは、次のように学習します.
  • Unsplash開発者のダッシュボードからAPIエンドポイントとアクセスキーを取得する方法.
  • APIとデータを使用してAPIからデータを取得する方法.
  • 画像やAPIからの他のデータを表示するためにマップ関数を使用する方法.

    • 反応アプリを作成する方法


    それは非常に簡単に反応アプリを作成する-ちょうどあなたの好みのディレクトリ内の作業ディレクトリに移動し、次のコマンドを端末に入力します.npx create-react-app image-search-appあなたが適切に作成反応アプリプロジェクトを設定する方法がわからない場合は、Create - Reac - APP - DEVでここで公式ガイドを参照することができます.‌‌
    セットアップの後、私たちの反応アプリが主催されるlocalhost:3000を開始するために、同じ端末でNPMスタートを走らせてください.我々はまた、そこにすべての変更を見ることができます.

    我々のアプリのUIを構築する方法


    私たちのアプリケーションのUIの2つのセクションがあります.
  • 入力部
    • 我々がイメージを示す結果セクションの

  • 入力セクションでは、検索タグまたはクエリを書く入力タグがあります.また、APIからデータを取得する機能を引き起こすOnClickイベントハンドラーを持つボタンもあります.
    import React from "react";
const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-12 d-flex justify-content-center align-items-center input">
            <input
              className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
              type="text"
              placeholder="Search Anything..."
            />
            <button
              type="submit"
              onClick={Submit}
              className="btn bg-dark text-white fs-3 mx-3"
            >
              Search
            </button>
          </div>
        </div>
      </div>
    </>
  );
};
export default App;
    出力は次のようになります.

    In this article, we will not be discussing the styling part of the app. This way we can stay more focused on the React part which is more necessary to understand.


    Continue Reading .
    • ベース→テキスト
    Activityアニメーションスタイルの起動と問題について