Reactの学習をします（2-4）
引き続き、Reactの学習をしています。
前回の記事 ： [React] Reactの学習をします（2-3）React Router を用いた複数ページ Web アプリの開発
教材
引き続き、likr さんが公開している「Reactチュートリアル2：レビューサイトを作ろう」という記事を教材に学習させて頂きます。
素晴らしい教材をありがとうございます。
成果物
このチュートリアル2につきましては、チュートリアルの通りに作成し既にNetlifyに公開させて頂いております。
こちらです → 日大文理ラーメンレビュー
学習日記
既に作成済ですが、少しずつチュートリアルの内容を読み返してみたいと思います。
※ 教材から箇条書き的に抜粋させて頂きます。
OR マッパーによるデータベースの利用
・次はデータベースを導入して、実際のデータをやり取りできるようにしていきましょう。
・ここからは、ローカルの開発環境からアクセスできる PostgreSQL のサーバーを用意しておく必要があります。
PostgreSQLを自分のPCにインストールしておきます。
PostgreSQL公式ページ ： PostgreSQLのダウンロード
そして、review_app というデータベースを作成しました。
※ 私のPCはWindows10ですので、PowerShell にて下記コマンドを実行します。
CREATE DATABASE review_app;
・SQL で取り出した情報は JavaScript 等のプログラミング言語で扱いやすい状態になっていると便利でしょう。
・O/R マッパーは、SQL の組み立てやクエリ結果のオブジェクトへの変換を行うライブラリで、Node.js では Sequelize という有名な O/R マッパーがあります。
チュートリアルに書かれている通りに作業していきます。
Heroku による API サーバーの公開
・API サーバーは Heroku を、フロントエンドは Netlify を使って公開します。
※ heroku pg:push するとき、エラーが発生してうまくデータを送ることができませんでした。
※ PostgreSQL のバージョンの問題であるように思われたため、いくつかのバージョンで試行錯誤しました。
※ 最終的にバージョン11を利用することにしました。
現在、Heroku では、特に指定しないとバージョン12が導入されます。
→ Heroku PostgreSQL version-support
ローカル側、Heroku側、ともにバージョン11にすることにしました。
Heroku でバージョンを指定して PostgreSQL を導入する方法については、こちらのブログの記事を参考にさせて頂きました。（ありがとうございます。）
→ [heroku]herokuのPostgreSQLでバージョンを指定する
Netlify によるフロントエンドの公開
・続けてフロントエンドを Netlify で公開します。いくつかの設定ファイルを追加しましょう。
（つづく）