それでは、今回はより具体的にReact開発方法について解説します。
ショップデモのリポジトリの配下にreactというディレクトリがあります。
この下にReactのコードがあります。
ここのreact-setup.mdに記載されている通り、前準備としてreactのテンプレートを作ります。
npx create-react-app shopdemo --template typescript
あとはこのReactプロジェクトを動かすためのライブラリのインストールを行います。
詳細は、react-setup.mdに書いてあります。
まず3つのディレクトリがあって、これは絶対こうしなければならないというものでもないのですが、基本的なお作法として用意するのが一般的なようです。
- public
- ここにはindex.htmlだけ置くのが一般的なようです。
- テンプレートが自動生成するものでも良いのですが、Bootstrapを使用する場合は、テンプレートのindex.htmlにそのライブラリのロードを付け加えています。
- components
- ここに自分で開発するreactコンポーネントを配置します。
- hooks
- hookを用意する場合は、ここに配置します。
ここでは、まずログインをするためのユーザー認証を行うコンポーネントの処理について説明します。
Login.

