Reactで複数のhtmlファイルをビルドする方法がわかりません。

質問

Reactでページを作成して、buildしたものをDjangoでテンプレートとして読み込もうとしています。
そうすると、npm run buildを実行するとindex.htmlのみしか作成されません。
別のタイプのページ、例えばtopPage.htmlを作成したいときはどのようにしたらよいのでしょうか？
以下のように２つのファイルを、index.html,index.jsをまねして新しく作成してビルドしたのですが、top_page.htmlはうまく動きませんでした。

###作成したコード

top_page.html
1(中略)
2<div id="top_page_id"></div>
3

topPage.js
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './index.css';
4import NewPage from './pages/NewPage';
5import reportWebVitals from './reportWebVitals';
6
7const root = ReactDOM.createRoot(document.getElementById('top_page_id'));
8root.render(
9  <React.StrictMode>
10    <NewPage />
11  </React.StrictMode>
12);
13
14// If you want to start measuring performance in your app, pass a function
15// to log results (for example: reportWebVitals(console.log))
16// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17reportWebVitals();

また、webpack.config.jsも以下のように編集をしたのですがbundle.jsで思うようなものが作成されませんでした。

webpack.config.js
1(中略)
2module.exports = {
3    // entry: path.resolve(__dirname, 'src/index.js'),
4    entry: {
5        main: path.resolve(__dirname, 'src/index.js'),
6        home: path.resolve(__dirname, 'src/topPage.js')
7    },
8    output: {
9        path: path.resolve(__dirname, 'assets'),
10        filename: '[name].bundle.js'
11    },

そもそもにして、index.jsの
const root = ReactDOM.createRoot(document.getElementById('root'));
のドキュメントがどうしてindex.htmlと結びついているのか、top_page.htmlとtop_page.jsをどのように紐づけたらよいのかがわかっていません。
Webの仕組みについて詳しくないので教えて頂けますと嬉しいです。
また、複数ページを作ることのみを今は目的としているのですが、上記のような考え方以外で良いやり方がありましたら教えて頂けますと嬉しいです。
または普通にReactを動かして、バックエンドAPIをpythonのFAST APIを使い、Djangoを起動しない方が賢いのでしょうか？
回答の程宜しくお願い致します。

maisumakun

2022/11/27 06:41

> npm run buildを実行するとindex.htmlのみしか作成されません。むしろ、「npm run buildでHTMLが出力される」環境は、どのようにセットアップしたのでしょうか。

bubbleman303

2022/11/27 06:43

reactの環境構築で、npm install react-domなどを実行したと思います。インターネットにある情報で行ったので、このようにすればbuildができるということを知っただけでした。

maisumakun

2022/11/27 07:28

package.jsonで、buildはどのように定義されていますか？

bubbleman303

2022/11/27 09:11

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, このように書かれていました。

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

回答1件

おそらく create react app　というコマンドでreactを作成したであろうという前提で回答いたします。

reactのようなSPAではHTMLファイルは基本的には一つしか作成しません。
publicフォルダの中にあるindex.htmlに記述されている<div id="root"></div>というIDを、srcフォルダのindex.jsというファイルの中で、取得してレンダー（表示）しています。

index.html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <!-- <meta name="theme-color" content="#000000" /> -->
8    <meta
9      name="description"
10      content="Web site created using create-react-app"
11    />
12    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13    <link
14  rel="stylesheet"
15  href="https://fonts.googleapis.com/icon?family=Material+Icons"
16/>
17    <!--
18      manifest.json provides metadata used when your web app is installed on a
19      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
20    -->
21    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
22    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
23        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
24    <!--
25      Notice the use of %PUBLIC_URL% in the tags above.
26      It will be replaced with the URL of the `public` folder during the build.
27      Only files inside the `public` folder can be referenced from the HTML.
28
29      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
30      work correctly both with client-side routing and a non-root public URL.
31      Learn how to configure a non-root public URL by running `npm run build`.
32    -->
33    <title>React App</title>
34  </head>
35  <body>
36    <noscript>You need to enable JavaScript to run this app.</noscript>
37    <div id="root"></div>★ここ！
38    <!--
39      This HTML file is a template.
40      If you open it directly in the browser, you will see an empty page.
41
42      You can add webfonts, meta tags, or analytics to this file.
43      The build step will place the bundled scripts into the <body> tag.
44
45      To begin the development, run `npm start` or `yarn start`.
46      To create a production bundle, use `npm run build` or `yarn build`.
47    -->
48  </body>
49</html>
50

index.js
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import { App } from './App';
4import reportWebVitals from './reportWebVitals';
5
6const root = ReactDOM.createRoot(document.getElementById('root'));★rootというIDを取得！
7
8root.render(　★ここで表示！
9
10  <React.StrictMode>    
11          <BrowserRouter>            
12              <App /> ★Appというコンポーネントを表示！      
13          </BrowserRouter>
14  </React.StrictMode>
15
16);
17
18// If you want to start measuring performance in your app, pass a function
19// to log results (for example: reportWebVitals(console.log))
20// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
21reportWebVitals();
22

ではどうやって別ページを表示させるかというと、下記のようにコンポーネントを指定する形で別ページを表現します。これはreact-router-domというライブラリを使用しています。react-router-domではelementで表示したいコンポーネントを指定し、pathでどのようなパスにするのか指定するという使い方をします。よかったら参考にしてくださいね。

App.js
1
2import React from 'react';
3import { Routes, Route } from "react-router-dom";
4import {Home} from "./Webpages/Home";
5import {Customer} from './Webpages/Customer';
6import {Product} from './Webpages/Product';
7
8
9export function App() {
10  return (
11    <div className="App">
12      <Routes>        
13        <Route path="/" element={<Home />} />★パスとコンポーネントを指定する
14        <Route path="customer" element={<Customer />} />                      
15        <Route path="product" element={<Product />} />                                           
16      </Routes>
17    </div>
18  );
19
20};
21
22
23
24
25
26