質問
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を起動しない方が賢いのでしょうか?
回答の程宜しくお願い致します。
