Reactの学習をします（1-4）
Reactの学習をしてみることにしました。
前回の記事 ： [React] Reactの学習をします（1-3）式の埋め込み
教材
likr さんが公開している「Reactチュートリアル1：犬画像ギャラリーを作ろう」という記事を教材に学習させて頂きます。
素晴らしい教材をありがとうございます。
学習日記
本日は「条件分岐」～「Web アプリの公開」までやりました！
無事、公開することができました！
（これで、「Reactチュートリアル1：犬画像ギャラリーを作ろう」の学習は完了です。）
条件分岐
※ 教材から箇条書き的に抜粋させて頂きます。
・Dog API からの応答を受け取ってはじめて画像の一覧を表示することができるようになります。そのため、画像を取得し終わるまでは別の内容を表示しておかなければいけません。例えば、「loading」などと表示しておくと、まだデータを読み込み中であることがわかるでしょう。
・さて、データの取得が終わっているかどうかに応じて画面の表示内容を切り替える必要が出てきました。条件分岐によってそれを実現しましょう。
if (urls == null) {
return <Loading />;
}
（一部抜粋させて頂きました。）
サーバーからのデータ取得
※ 教材から箇条書き的に抜粋させて頂きます。
・新たに src/api.js を作成し、そこに Dog API から画像取得を行う fetchImages 関数を作成します。
ここで、サンプルプログラムに async や await というのが出てきます。async や await 何となく聞いたことがあるのですが、何だったけ？ と思ったので検索しました。
検索しますと、Qiita で @soarflat さんという方が書かれた記事が出てきました。読ませて頂きました。ありがとうございます。
さて、チュートリアルを続けます。
・React のコンポーネントは、アプリケーションの状態が同じであれば常に同じ JSX 式を結果として返すべきです
・アプリケーションの状態から JSX を組み立てることがこの関数の主作用となります。
・Web アプリケーションでは、アプリケーションの状態を更新するための副作用も発生します。例えば、外部のサーバーにリクエストを送ることなどが副作用にあたります。
・useEffect 関数は、時間の経過や外部サーバーからのリソース取得結果を処理するなど、コンポーネントの副作用を表現するために使われます。
Main コンポーネントを useEffect を使うように、書き換えていきます。
・useEffect の第 1 引数には、副作用を起こす関数を渡します。
・useEffect の第 2 引数には、その副作用が依存する値のリストを配列で渡します。
状態の変更
※ 教材から箇条書き的に抜粋させて頂きます。
・コンポーネントの状態を扱うためには useState 関数を使います。まずは、src/App.js の先頭で useState をインポートしましょう。
・次に、Main コンポーネントを以下のように書き換えます。
サンプルプログラムの通りに書き換えますと、Dog API から画像を取得を取得できるようになります！
フォームの操作とイベントハンドリング
※ 教材から箇条書き的に抜粋させて頂きます。
・今は柴犬の画像のみを表示していますが、Dog API は様々な犬種の画像を提供しています。表示する画像の犬種を選べるようにしてみましょう。
・フォームが送信されたときの処理を追加します。form要素において、フォームが送信されるときには submit イベントが発生します。React では、イベントを起こす要素にイベントを処理する関数を渡すことで行います。
・今回は、select要素で選択された値を引数として親コンポーネントから渡された onFormSubmit 関数を呼び出すことにします。
・select要素の値を受け取って処理する関数を reloadImages として作成します。関数の中身では、fetchImages 関数を呼び出して新しく取得した画像 URL のリストでurlsを更新します。
※ ここまでやりますと、このWebアプリケーションは完成です！！
Web アプリの公開
※ 教材から箇条書き的に抜粋させて頂きます。
仕上げに、開発した すばらしい 犬画像ギャラリーを、世界中の人がアクセスできるように公開しましょう。Web アプリの公開にはいくつもの方法がありますが、今回はNetlify を利用します。
成果物
Netlifyに公開させて頂きました！素晴らしいチュートリアルをありがとうございます！！
こちらです → Cute Dog Images