92日目②：React appのセットアップ＆Npmパッケージインストールでフロントエンド作成の準備をする

バックエンドが完成した後は、フロントエンド部分を作成していきます。まずは、React appのセットアップ・Npmパッケージのインストール・フロントエンドとバックエンドの同時起動の準備を行いました。

この講座で使用するUI/テーマのデザインは是非自分で作ってみたかったのですが、すでにhtml/cssファイルは準備されていました。この講座ではバックエンド・フロントエンド・React & Reduxに集中するということだそうです。

Udemy講座で仕上がるUI/テーマデザインを自作したい場合はYouTube動画４本で最初から制作することもできる

私にとって朗報だったのが、既に出来上がっていたUI/テーマはYouTubeのチュートリアル動画を見ながら自作できるということでした。今回は、準備されていたhtml/cssファイルを使ってまずは講座を進める予定ですが、終了したら戻ってこようと思います。

タイトルは”Social Networking Theme with Sass" でpart1~4まであるそうです。

clientファイルを新たに作成＆React App作成＆フロントエンドとバックエンドを同時起動させる

現在制作しているdevconnectorに、clientというファイルを新たに作成してReact appとして動作するようGit Bashから

npx create-react-app client

を行いました。

その後沢山のnpmパッケージをインストール。フロントエンドとバックエンドが同時に動くように、package.jsonも少々書き換えました。

元々あったdevconnector/package.jsonに

"scripts": {"client": "npm start --prefix client",
                "dev": "concurrently \"npm run server\" \"npm run client\""}

"proxy": "http://localhost:5000"
}
と書き加えました。Git Bashで

npm run dev

と書けば、フロントエンドとバックエンド両方同時にlocalhost:5000で起動するところまで確認しました。
次回も、もう少しReactとフロントエンドの準備の続きをすることになりそうです。