Reactでlocalhost:3000を表示したときの呼び出されるファイルの流れが知りたい

Question

前提・実現したいこと

現在Reactを勉強しています。
結論から言うと、Reactでlocalhost:3000を表示したときの呼び出されるファイルの流れが知りたいです。

index.htmlが呼び出されそうですが、そうではなく、index.jsが呼び出されるのでしょうか。
Reactをはじめる#index を詳しくみる
上記でもindex.jsがエントリーポイントと書いてありますもんね。

index.htmlはテンプレートファイルのようなもので、index.jsから呼び出されているのでしょうか。

通常のHTMLではindex.htmlからindex.jsを呼び出す記述を書いて、index.jsの処理が実行されるので、いまいちしっくりしていません。逆といいますか、index.jsがエントリポイントで、そこからindex.htmlが呼び出されているのでしょうか。
だとしたらimport文にindex.htmlが書いていてほしいような気がしますが、それもありません。

▼index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

私の認識・予想は以下です。
・index.html,index.js,App.jsが主要な３ファイル
・index.jsが呼び出され、その中のdocument.getElementById('root')で、index.htmlのid属性rootにindex.js内で構成した内容をレンダリング（反映）している？（←ここが知りたい。index.jsからindex.htmlを呼び出している？流れや仕組みが知りたい）
・index.jsではApp.jsの内容をインポートして（import App from './App';）、<App />の部分で反映している
・基本index.htmlは修正しない。index.jsもだろうか。基本App.jsを編集したり、新たにComponentを作ってApp.jsから呼び出す。

少し記事を読んでもしっくり来ていないし、あくまで予想になっているので、有権者の方にお聞きさせていただきたいです。

試したこと

・「react index.js どうやって読み込まれてる？」などで検索
・「react 仕組み」などで検索
・表示された記事を参照

Comments

[hoshi-takanori]

localhost:3000 にアクセスした時に最初に呼ばれるのはもちろん index.html ですが、public/index.html そのままではなく、<script src="bundle.js"> みたいなのが挿入されたものが返ります。
で、bundle.js がアクセスされると、webpack が index.js や App.js などのソースをすべて読み込んで、ライブラリもまとめて一つの大きな JS ファイルにしたものが返ります。

[k499778]

すごくわかりやすいです。ありがとうございます。しっくりきます

Answer 1

そもそも、上に書かれたコードはクライアントサイドのコードで、localhost:3000に応答するのはサーバサイドの処理です。

サーバサイドはcreate-react-appがReactの開発用に便利なものを用意してあって、index.htmlに「コードを挿入して、ブラウザーで実行できるように」するなどの処理をしています。

Comments

[k499778]

ありがとうございます。
たしかにサーバーサイドへまずはアクセスしますよね。
create-react-appがサーバーサイドは補填してくれて、その後の呼び出す流れはindex.htmlではなくindex.jsで合っていますでしょうか。
index.jsがindex.htmlを呼び出す？利用？したり、しているイメージでしょうか。大雑把に言うと。

[maisumakun]

違います。上に書いた（そして元の記事にもある）ようにサーバサイドではindex.htmlにindex.jsを埋め込んで返しています。ブラウザはJavaScript入りのHTMLを通常通りに解釈して実行します。

[k499778]

少しindex.jsとindex.htmlがどのように紐付いているかが把握しきれていないです。

静的ページのような基本的なhtml、jsであれば、html内でscriptタグによって、jsが呼び出されているので紐付き方が理解できますが、
Reactではそこが明確になっていないです。index.jsとindex.htmlは明示的な読み込みの記述がなくとも、紐付いていると思っておけばいいのでしょうか。裏でやっているというか、仕組みが担保してくれているといいますか。

[k499778]

あ，入れ違いになってしまいました。確認にします

[maisumakun]

> 裏でやっているというか、仕組みが担保してくれているといいますか。

はい。

あくまでcreate-react-appは開発用の仮環境なので、この仕組を深く掘り下げても実運用するサイトとは何ら関係しません。

[k499778]

>サーバサイドではindex.htmlにindex.jsを埋め込んで返しています。ブラウザはJavaScript入りのHTMLを通常通りに解釈して実行します。

なるほどですね、少ししっくり来たような気がします。index.jsが読み込まれる方法は通常のhtml,jsと一緒なのですね。もちろんですが。Reactの仕様でなにか全く新しいことをしてるのかもとも思いましたが、裏側でやっていることは基本的にhtml,jsの基本的な仕組みで理解できるとわかって安心しました。ありがとうございます