88702


プログラミング学習初心者です。  
Create React Appにおいてプロジェクトを作成し，実行しました。  
ReactのTutorialに従い，src/index.js，public/index.htmlの2つのファイルを作成しました。  
index.htmlファイルはindex.jsファイルをコードのどのように読み込んでいるのか教えていただきたいです。  
以下にコードを記載します。

_index.html_

[code]

        <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
      </body>
    </html>
    
[/code]

_index.js_

[code]

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    
    class Square extends React.Component {
        render() {
          return (
            <button className="square">
              {/* TODO */}
            </button>
          );
        }
      }
      
      class Board extends React.Component {
        renderSquare(i) {
          return <Square />;
        }
      
        render() {
          const status = 'Next player: X';
      
          return (
            <div>
              <div className="status">{status}</div>
              <div className="board-row">
                {this.renderSquare(0)}
                {this.renderSquare(1)}
                {this.renderSquare(2)}
              </div>
              <div className="board-row">
                {this.renderSquare(3)}
                {this.renderSquare(4)}
                {this.renderSquare(5)}
              </div>
              <div className="board-row">
                {this.renderSquare(6)}
                {this.renderSquare(7)}
                {this.renderSquare(8)}
              </div>
            </div>
          );
        }
      }
      
      class Game extends React.Component {
        render() {
          return (
            <div className="game">
              <div className="game-board">
                <Board />
              </div>
              <div className="game-info">
                <div>{/* status */}</div>
                <ol>{/* TODO */}</ol>
              </div>
            </div>
          );
        }
      }
      
      // ========================================
      
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<Game />);
    
[/code]


CC BY-SA 4.0
2022-05-07T15:30:07.333
88692
2022-05-08T07:20:21.690
52517
question
javascript reactjs
jsファイルの読み込みについて


[`npm run eject`](https://create-react-app.dev/docs/available-scripts/#npm-
run-eject) を実行して生成される `config/webpack.config.js` を見ると、 [`html-webpack-
plugin`](https://github.com/jantimon/html-webpack-plugin#usage) で `<script>`
タグを挿入しているのが分かるかと思います。

[code]

    ...
        plugins: [
          // Generates an `index.html` file with the <script> injected.
          new HtmlWebpackPlugin(
    ...
    
[/code]


CC BY-SA 4.0
2022-05-08T06:13:16.693
88698
2022-05-08T06:13:16.693
2808
88692
answer


ビルドコマンド`npm run
build`を実行して下さい。そうすればbuildフォルダ内にアプリケーションのビルドが生成されます。フォルダ内の`index.html`を見れば`index.js`を読み込む`script`タグが見つかるのでは？


CC BY-SA 4.0
2022-05-08T07:20:21.690
88702
2022-05-08T07:20:21.690
35709
88692
answer