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

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

新規登録して質問してみよう
ただいま回答率
86.12%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

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

bubbleman303
bubbleman303

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

388閲覧

投稿2022/11/27 06:38

質問

Reactでページを作成して、buildしたものをDjangoでテンプレートとして読み込もうとしています。
そうすると、npm run buildを実行するとindex.htmlのみしか作成されません。
別のタイプのページ、例えばtopPage.htmlを作成したいときはどのようにしたらよいのでしょうか?
以下のように2つのファイルを、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を起動しない方が賢いのでしょうか?
回答の程宜しくお願い致します。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

0

おそらく 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

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。