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

投稿2022/11/28 01:11

編集2022/11/28 01:13

caren

総合スコア25

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

質問

関連した質問