npm install webpack webpack-cli --include=dev
2. babel と babel の dependencies をインストールする:
npm install @babel/core @babel/preset-react @babel/preset-env --include=dev
3. webpack のビルドに必要な loader をインストールする:
npm install babel-loader css-loader style-loader --include=dev
4. react, react-dom をインストールする:
npm install react react-dom --include=dev
5. react-router などを使用する上で必要な dependencies をインストールする:
npm insatall react-router-dom @babel/plugin-proposal-class-properties
6. この時点での package.json の内容:
{
"name": "djangosite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.17.10",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
7. Django プロジェクトルートに webpack.config.js ファイルを作成し、webpack に対する設定を記述する。
webpack.config.js の記述の詳細は
こちらのオフィシャルドキュメント を参照:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "static/js"),
filename: "main.js"
},
module: {
rules: [
{
test: /\.js|.jsx$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
],
},
optimization: {
minimize: true,
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production"),
}),
],
};
8. Django プロジェクトルートに babel.config.json ファイルを作成し、babel に対する設定を記述する。
{
"presets": [["@babel/preset-react", {"targets": "defaults"}]],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
9. この時点での Django プロジェクトルートの static/js フォルダの中身は空。
10. Django プロジェクトのルートディレクトリ (仮想環境内) で webpack のビルドを実行:
npx webpack build
11. この時点で static/js には main.js が作成されている。また、httpd を再起動してサイトにアクセスすると、埋め込んでいる React コンポーネントはちゃんと動作している (ページ上部、ヘッダー部分の下で画像がスライドしていると思います。ポインタを hover させたり、クリックしたりして遊んでみてください)。
今回 React を利用した carousel slider コンポーネントを作成するにあたり、下記のサイトを参考にさせてもらいました:
RSSフィードを購読
