index.htmlとindex.jsはどのような仕組みで連携しているのでしょうか？

Reactを学習中です。

以下はcreate-react-appコマンドで作成した一連ファイル内にある
index.htmlですが、特にindex.jsを使うような記述が見当たりません。
index.htmlとindex.jsはどのような仕組みで連携しているのでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <meta name="theme-color" content="#000000">
8    <!--
9      manifest.json provides metadata used when your web app is added to the
10      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11    -->
12    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13    <!--
14      Notice the use of %PUBLIC_URL% in the tags above.
15      It will be replaced with the URL of the `public` folder during the build.
16      Only files inside the `public` folder can be referenced from the HTML.
17
18      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19      work correctly both with client-side routing and a non-root public URL.
20      Learn how to configure a non-root public URL by running `npm run build`.
21    -->
22    <title>React App</title>
23  </head>
24  <body>
25    <noscript>
26      You need to enable JavaScript to run this app.
27    </noscript>
28    <div id="root"></div>
29    <!--
30      This HTML file is a template.
31      If you open it directly in the browser, you will see an empty page.
32
33      You can add webfonts, meta tags, or analytics to this file.
34      The build step will place the bundled scripts into the <body> tag.
35
36      To begin the development, run `npm start` or `yarn start`.
37      To create a production bundle, use `npm run build` or `yarn build`.
38    -->
39  </body>
40</html>
41

行動規範の内容に同意します

回答2件

試してみたところ、jsファイルが読み込まれているようでした。

console
1$ create-react-app test
2$ cd test
3$ yarn start

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <link rel="shortcut icon" href="/favicon.ico">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <meta name="theme-color" content="#000000">
8    <!--
9      manifest.json provides metadata used when your web app is added to the
10      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11    -->
12    <link rel="manifest" href="/manifest.json">
13    <!--
14      Notice the use of  in the tags above.
15      It will be replaced with the URL of the `public` folder during the build.
16      Only files inside the `public` folder can be referenced from the HTML.
17
18      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
19      work correctly both with client-side routing and a non-root public URL.
20      Learn how to configure a non-root public URL by running `npm run build`.
21    -->
22    <title>React App</title>
23  </head>
24  <body>
25    <noscript>
26      You need to enable JavaScript to run this app.
27    </noscript>
28    <div id="root"></div>
29    <!--
30      This HTML file is a template.
31      If you open it directly in the browser, you will see an empty page.
32
33      You can add webfonts, meta tags, or analytics to this file.
34      The build step will place the bundled scripts into the <body> tag.
35
36      To begin the development, run `npm start` or `yarn start`.
37      To create a production bundle, use `npm run build` or `yarn build`.
38    -->
39  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
40</html>
41

投稿2018/10/06 10:20

IshibashiTanaka

総合スコア152

create-react-appはwebpackを元に開発環境がパッケージされています。
試しにcreate-react-appで新しいプロジェクトを作ってnpm run ejectを打ってみると分かりやすいと思います。(※ejectしたあとは元に戻せないので新しいプロジェクトで試すことをお勧めします)
いろいろと設定ファイルがあらわになります。
これはcreate-react-appでパッケージされた設定ファイルたちです。
Reactアプリをさくっと作成するための設定がwebpackにてあらかじめされているため、アプリケーションbuild時にindex.htmlでJavaScriptを呼び出せています。

投稿2021/06/16 14:20

編集2021/06/16 14:21