Reactの学習をします（2-3）
引き続き、Reactの学習をしています。
前回の記事 ： [React] Reactの学習をします（2-2）Node.js による API サーバー開発
教材
引き続き、likr さんが公開している「Reactチュートリアル2：レビューサイトを作ろう」という記事を教材に学習させて頂きます。
素晴らしい教材をありがとうございます。
成果物
このチュートリアル2につきましては、チュートリアルの通りに作成し既にNetlifyに公開させて頂いております。
こちらです → 日大文理ラーメンレビュー
学習日記
既に作成済ですが、少しずつチュートリアルの内容を読み返してみたいと思います。
※ 教材から箇条書き的に抜粋させて頂きます。
React Router を用いた複数ページ Web アプリの開発
・React で複数ページから構成される Web アプリを開発するためには React Router を使用します。
client/src/App.js をチュートリアルの内容で作成します。
・ここでは、react-router-dom からインポートした Router と Switch 、 Router という 3 つのコンポーネントが登場します。
・Router コンポーネントは、React Router が管理するコンポーネントの範囲を設定します。
・基本的にはアプリケーションのコンポーネント全体を Router コンポーネントの子要素にしておくとよいでしょう。・Switch コンポーネントは、URL によって切り替わる要素の場所を設定します。
・Route コンポーネントは、path 属性を持ち、URL が path と一致したときにページに表示させる内容を設定します。
フロントエンドからの API リクエスト
1.環境変数の利用
・開発環境と本番環境（最終的に公開する環境）でパラメータを切り替える必要がある場合には環境変数を利用すると良いでしょう。
・react-scripts を使っていれば、開発環境用の環境変数を .env.development 、本番環境用の環境変数を .env.production で設定することができます。
・これらのファイルには REACT_APP_ から始まる環境変数名を記述します。
2.API サーバーのエンドポイントに対応した関数の作成
・/restaurants と /restaurants/:restaurantId 、 /restaurants/:restaurantId/reviews に対して GET リクエストを行う関数をそれぞれ getRestaurants 、 getRestaurant 、getRestaurantReviews としています。
これらの間の共通の処理は request 関数にまとめています。
3.CORS の設定を追加
・フロントエンドと異なるオリジンとの通信は CORS（Cross-Origin Resource Sharing） と呼ばれます。
（つづく）