フロントエンドではReactを使うのが標準になっているようで、特に最近流行のSPAなどとの相性が良いらしい。
Reactが優れている点はいくつかあるようですが、個人的には仮想DOMを使うことでページの更新が速やかにできる（レンダリングコストの低減）はメリットだと思う。
Reactを学ぶサイトにはいくつかありますが、標準的なところでは、
あるいは、
https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/react-beginners-tutorial
あたりが良さそうです。いずれにしても全体構造をさっと解説してあるようなサイトはなさそうで、ステップバイステップか。
ReactはJavaScriptのライブラリに過ぎないのですが、裏の仕組みとしてはNode.jsが主要な役割を果たしているようです。
% npx create-react-app some_app_name
で作成されるディレクトリ構造を見るとNode.jsに似ている（そっくり）ように思うし、
% npm start
でWebサーバーを起動するのも同じじゃないかと思う。Webサーバーを起動しているからサーバーサイドとクライアント間の通信もできるはず。
プロダクションビルドは、
% npm start
ではなく、
% npm run build
を使えと言われて、このコマンドを実行すると新たにbuildディレクトが作成されました。（以下の図(hello_reactディレクト)はVScodeから見えるbuildディレクトリ存在前のディレクトリ構造）中身を見ると、そのままサーバーに配置すれば使えるようになっているようだし、npm run buildの実行時のメッセージには以下のような出力がされるので、serveをインストールして起動するとnpm startと同様なページが表示されます。
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Reactの環境を作るのはコマンド一発で作成されますが、そこから作成されるファイル構造は上の図のようになっています。
webサーバー起動して表示される画面はこんな画面。
react.devの最初のtutorial(三目並べ)をbuildするのもNode.jsで変換されるんだろうと思いますが、以下のreact.devのtutorialのサンドボックスから見えるディレクトリ構造は、
/public/index.html、App.js/index.jsという同じ作りになっているから、この構造がスタートポイントと思えば良さそうです。index.html -> index.js -> App.jsと呼び出しているようです。
左上のメニューを選択して、File -> Export to ZIPでFilesメニューに見えるプロダクションビルドがZIPファイルでダウンロードできます。
admin