Reactのエントリーポイントがなぜindex.tsxなのか

Question

前提・実現したいこと

Reactのエントリーポイントについて教えていただきたいです。

発生している問題・エラーメッセージ

Reactのアプリ開発をしている初心者です。
index.tsxがエントリーポイントなのは分かるのですが、どこでそれが指定されているのかが知りたいです。
調べたところ、webpackを使用してReactの環境を構築した場合は指定箇所があるみたいなのですが、私はcreate-react-appで環境と作りました。

自身で調べても辿り着くことができなかったため、皆さんのお力をお借りしたいです。
よろしくお願いいたします。

Answer 1

create-react-appによって追加されるパッケージreact-scriptsによって設定されています。
正確にはnode_modules/react-scripts/config/paths.jsのappIndexJsで設定されています。

npm run ejectをするとcreate-react-appが隠蔽してくれていた膨大な設定がプロジェクト内に放逐(eject)されます。その場合、[project root]/config/paths.jsのappIndexJs(場合によってappSrc等も)を変更すればエントリポイントを変更できます。

ejectは不可逆な操作であり不要な設定まで見えてしまうため、react-app-rewired等のモジュールを使用して設定をオーバーライドすることをおすすめします。

蛇足

「なぜindex.tsxなのか」という質問に対しては、「react-scriptsがその様に設定しているから」としか答えようがありません。

質問の本筋は以下の様な気がするのでこちらをタイトルにしたほうが良さそうです。

index.tsxがエントリーポイントなのは分かるのですが、どこでそれが指定されているのかが知りたいです。

Comments

[benkyo_golang]

k4aさん
ご回答ありがとうございます。
少し難しい内容なので、回答いただいてから理解するまで時間がかかってしまいました。
webpackが関係していて、それがエントリーポイントを指定しているのだと解釈しました。
全くとっかかりがなく困っていたのでとても助かりました。
ありがとうございます。