このフォルダは、クライアント側（フロントエンド）のソースコードを書いていくフォルダです。
client
├── README.md
├── package.json
├── package-lock.json
├── dist (初期状態では存在しない)
├── node_modules (初期状態では存在しない)
├── public
├── src
| ├── App.css
| ├── App.jsx
| ├── index.css
| ├── main.jsx
├── .eslintrc.json
├── .gitignore
├── index.html
└── vite.config.jsクライアントのエントリーポイントです。
ここの、<div id="root"></div>にReactがマウントされますが、気にしなくても大丈夫です。
サイトのタイトルや、外部のCSSやJavaScriptの読み込みなどを行うときは<head>か<body>の末尾だけ編集してください。
npmのパッケージファイルです。npmのパッケージを使うために必要なファイルです。 他人の書いたプログラムを使う設定が書かれています。
基本的には、このファイルは変更しません。
ライブラリを追加するときは、npm installコマンドを使って追加してください。
ビルド後のファイルが入っているフォルダです。 ビルドしたファイルは.gitignoreに追加されているので、Gitの管理対象外になっています。 (というのも、変更が多くその度にコミットすると、Gitの履歴が汚くなってしまうためです)
package.json等に記述されているnpmのパッケージが入っているフォルダです。 npm installコマンドを実行すると、このフォルダが作成されます。
こちらのフォルダも.gitignoreに追加されているので、Gitの管理対象外になっています。
このフォルダに入れたファイルは、サイトを立ち上げたときに、そのまま配信されます。
例えばpublicフォルダにfavicon.icoを入れると、サイトを立ち上げたときに、<URL>/favicon.icoでアクセスできるようになります。
ここにReactのソースコードを書いていきます。
App.jsxにかけるCSSを書くファイルです。App.jsxに書いたコンポーネントにだけ適用されます。 （ただし子コンポーネントがある場合は、子コンポーネントにも適用されます）
Reactのルートコンポーネントです。ここに、他のコンポーネントを組み合わせていきます。
index.htmlに読み込まれるCSSファイルです。ここに書いたCSSは、全てのページで適用されます。 bodyやCSS変数のスタイルを書くとき、ここが便利です。
Reactのエントリーポイントです。ここで、App.jsxを読み込んで、index.htmlの<div id="root"></div>にマウントしています。
ESLintの設定ファイルです。「静的解析」と調べると、何をしているかわかると思います。 コードの品質をプログラムでチェックしてくれるツールです。 （ここをいじるのは結構知識がいるので、放置で大丈夫です）
Gitの管理対象外にするファイルを指定するファイルです。
Viteの設定ファイルです。Viteの設定を書いていきます。 Viteに関しては、Viteのドキュメントを参照してください。 （ここもフロントエンド開発に慣れてからいじるといいと思います）