react index.htmlの用途

Question

・create-react-appで作られたフォルダにpublicフォルダがあり、いらないと思ったので消してyarn startを実行したら下記のエラーになりました。

Could not find a required file. Name: index.html error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

publicフォルダのindex.htmlを戻したら実行できたのですが、publicの中にあるindex.htmlは何で使われているものなのでしょうか？

Answer 1

ブラウザで直接JavaScriptを実行することはできず、何かしらのHTMLの上で動作させる必要があります。

いわゆる「SPA」のような、ほぼ完全にReactで作ったシステムでも、ブラウザで使うには「JavaScriptを呼び出すHTML」が必要です。

Comments

[yyyooo34343]

返信ありがとうございます！
index.htmlは何かしらのページが呼ばれる前に呼ばれるページということでしょうか？

[yyyooo34343]

index.htmlはjavascriptを呼び出すものなので変更する必要がないという認識で合っていますか？

Answer 2

publicフォルダのindex.htmlを戻したら実行できたのですが、publicの中にあるindex.htmlは何で使われているものなのでしょうか？

まず、WEBサーバー上にはindex.htmlとReactで作ったコードをトランスパイルして作成されたJavaScriptのファイルを配置します。

このサイトをユーザーが見た時

• ブラウザ→アクセスする→WEBサーバ
• ブラウザ←index.htmlを返す←WEBサーバ

が行われ、ブラウザがindex.htmlの中身を読んで

• ブラウザ→javascriptのファイルを要求する→WEBサーバ
• ブラウザ←javascriptのファイルを返す←WEBサーバ

という動作になり、これで初めてブラウザ上でJavaScriptが実行されます。

Comments

[yyyooo34343]

なんとなく理解することができました！！
ブラウザからwebサーバーにアクセスするページが違う場合は違うindex.htmlを作るってことでしょうか？

[gentaro]

そもそものWEBの仕組みがそういうものです。
Reactを勉強する前に、もうちょっと基本的なWEBの仕組みから勉強されてみては。