Reactの学習をします(2-5)
引き続き、Reactの学習をしています。
前回の記事 : [React] Reactの学習をします(2-4)OR マッパーによるデータベースの利用
教材
引き続き、likr さんが公開している「Reactチュートリアル2:レビューサイトを作ろう」という記事を教材に学習させて頂きます。
素晴らしい教材をありがとうございます。
成果物
このチュートリアル2につきましては、チュートリアルの通りに作成し既にNetlifyに公開させて頂いております。
こちらです → 日大文理ラーメンレビュー
学習日記
既に作成済ですが、少しずつチュートリアルの内容を読み返してみたいと思います。
※ 教材から箇条書き的に抜粋させて頂きます。
ユーザー認証
・本チュートリアルではユーザーの認証機能を提供してくれる Auth0 というサービスを利用します。
・メニューの「Applications」を開き、「CREATE APPLICATION」と書かれたボタンを押して新しくアプリケーションを作成しましょう。
・開発環境と本番環境で 2 つのアプリケーションを作る必要があります。
・「Name」は何でも構いませんが、資料流では開発環境は「Development」、本番環境は「Review App」としておきます。

「Development」と「Review App」という2 つのアプリケーションを作ります。
・それぞれのアプリケーションで (中略) 開発環境と本番環境のフロントエンドの URL を入力し、画面下部の「SAVE CHANGES」ボタンを押して保存します。
・開発環境の URL は http://localhost:3000 、本番環境の URL は https://aaa-bbb-ccc.netlify.app/ のような Netlify にデプロイした結果の URL となります。
サーバーの実装 クライアントの実装
サーバー側、クライアント側で認証機能を加えるため、それぞれチュートリアルの通りにプログラムを変更していきます。
(この辺はもう私の能力を超えすぎていて、プログラムの内容はよくわかっていないです……とりあえず、ヨシとしましょう。)
レビューの投稿フォームが機能するようにする
以下2点の作業をします。
・client/src/pages/RestaurantDetails.js を編集
・実際に API サーバーに対して認証情報を付けて POST リクエストを行う処理を client/src/api.js に加える
最後にデータベースをクリアして本番環境の更新を行う
サーバー側、クライアント側の更新を行い、本番環境が動作するようにします。
これで、このチュートリアルは終わりますが、私にはまだ難しかったですね・・・。(もう少し理解を深められるようにしていきたいと思います。)