Reactのindex.htmlを弄るのはご法度なのか

reactを使ってSPAを作っています。
最初、create-react-appから始めたため、

projecut
-node_modules
-public
--index.html
-src
--App.jsx
--index.jsx

という構成になっていました。
基本的には、src以下のapp.jsxを弄ることで画面を編集していくと思います。
ただ、私はSPA読み込み時にonloadを使い、特定の関数を動かしたいと考えています。
たとえば、SPAにアクセスした際(e.g. http://localhost:3000)、
すぐにSPAを表示するのではなく、alertを表示するといったことを考えています。
そのため、思いついた方法がindex.htmlのbodyタグにonloadを追加することでした。

index.html
1<body onload="loadfunc()">
2  <div id="root"></div>
3</body>

そのため、上記、index.htmlのコードの場合、loadfunc関数を定義する必要がありますが、
別途jsファイルを用意し(func.jsなど)その中でloadfunc関数を定義し、jsファイルを以下のように読み込み、loadfunc関数を使えるようにする。

html
1<script type="text/javascript" src="./func.js"></script>

といった方法を考えました。
このとき、func.jsを置く場所はどこが正しいのでしょうか。
func.jsをsrc以下においておきscriptタグの内容を記載し、実行すると、次のようなエラーがでました。

Uncaught SyntaxError: Unexpected token '<'

調べたところ、srcフォルダ以下においているのが問題みたいということで、publicフォルダ以下においてみると上手く動くようになりました。
ここで一つ質問です。なぜsrcフォルダ以下では駄目で、publicフォルダ以下ならうまくいったのでしょうか。

また、次にもう少し複雑な関数をonloadで呼びたく、public以下のfunc.jsにimport文を付け加えたところ以下のエラーが出ました。

Uncaught SyntaxError: Cannot use import statement outside a module

実際、onloadで呼ぶ関数はもっと複雑でimport文が必須になってきます。
なのに上記エラーがでており、困っています。
解決方法はありますでしょうか。
個人的にはフォルダの構成が原因でimportできていないのではないかと思っているのですが、だからといって具体的にどうすればいいかも見当がつきません。

また、もしindex.htmlをいじらずに、app.jsxを弄ることによって、ページ読み込み時に特定の関数を実行できるような方法があれば教えてください。
これも私自身が考えたのですが、
app.jsxのreturnは以下のようになっています。

App.jsx
1return(
2　<component1>
3　　<component2>
4　　　<componen3 />
5　　</component2>
6　</componet1>
7)

bodyタグはindex.htmlにあるため、操作できませんが、component1の上位にonloadで使いたい関数を実行するようなコンポーネントを入れても対応は可能なのかと思っています。
ただ、ひとまず動作することを確認したいため、import文が上手く読み込めるようにしたいです。
識者の方、ご教授ください。
よろしくお願いします。

hoshi-takanori

2022/04/01 18:20

単に index.jsx に次のように書くのでは駄目でしょうか？ if (window.confirm('Are you ready?')) { ReactDOM.render(<App />, document.getElementById('root')); }

spypow

2022/04/02 05:08

ご意見ありがとうございます。おっしゃる通り、window.confirmだとSPA読み込み前にダイアログが出ました。ただalertだと戻り値がないため、提案いただいた案では不可能でした。最終的にはalertでもなく、他の関数をSPA読み込み前に実行したいのですが、その時はどのような書き方をすればよいでしょうか。具体的に申し上げますと、SPAの前にログインするための関数を動かしたいのです。そのためSignIn関数を別のjsファイルで定義しています。このSignIn関数をSPAの前に実行したいと考えています。なお、このSignIn関数は戻り値はありません。よろしくお願いします。

hoshi-takanori

2022/04/02 10:26

うーん、素直にログインも SPA の中でやればいいと思いますが…。

spypow

2022/04/02 17:13

つまり、ログインを呼び出す関数をApp.jsxのreturnの中に含めてしまうということでしょうか？今、App.jsxのreturn文は質問文に記載しているようになっており、 component1の上にログインに関するコンポーネントを入れるイメージでしょうか