Djangoは認証やセッションなどが簡単に実装できて便利です。DjangoとReactでWebアプリを構築するときに、ReactでSPAアプリを作れば、Djangoのこのような利点を利用するのが難しくなります。SPAでの認証にはJWTなどを使うのが一般的で少し複雑になります。結論的に言えば、基本的なところはDjangoに全て任せるとして、特定のDjango のページ（Template）をリッチにするためだけに使うのが現実的だと思われます。本記事はこのような考えを実装するための最小限の知識をまとめたものです。以下の記事を参考にしつつ自分なりに再構築しました。
Tutorial: Django REST with React (Django 2.0 and a sprinkle of testing)
Webpack 4 Tutorial: from 0 Conf to Production Mode
**【追記 2019/07/28】**DjangoとReactをまずは独立した環境で開発し、最後に結合する方法を試した記事です。==> 「Reactアプリから Django Rest API を叩いてみる - Qiita」
#１．ReactプロジェクトとDjangoプロジェクトのディレクトリ構成
まずwebpack4（名前は任意）ディレクトリを作成しトップディレクトリとします。
webpack4ディレクトリにはReactアプリ構築環境を... つまりnpmプロジェクトやwebpack、babelの環境を構築します。またdjangoreactwebpack4というDjangoプロジェクトを作成します。
つまりトップディレクトリには以下の２つのファイル／ディレクトリが置かれます。
- Reactアプリの環境
- Djangoプロジェクト
treeで表示すると以下のようなディレクトリ構成になります。
├── bin
├── djangoreactwebpack4(Djangoプロジェクト)
├── include
├── lib
├── lib64 -> lib
├── node_modules
├── package-lock.json
├── package.json
├── pyvenv.cfg
└── webpack.config.js
├── db.sqlite3
├── djangoreactwebpack4
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-36.pyc
│ │ ├── settings.cpython-36.pyc
│ │ ├── urls.cpython-36.pyc
│ │ └── wsgi.cpython-36.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── frontend
│ ├── __pycache__
│ │ ├── urls.cpython-36.pyc
│ │ └── views.cpython-36.pyc
│ ├── src
│ │ ├── components
│ │ └── index.js
│ ├── static
│ │ └── frontend ( ── main.js)
│ ├── templates
│ │ └── frontend
│ ├── urls.py
│ └── views.py
└── manage.py
#２．Djangoプロジェクト
それではPythonの環境を作ります。
python -m venv webpack4
source webpack4/bin/activate
作業領域を作成しdjangoをインストールします。
cd webpack4 # 作業領域のトップに移行
pip freeze # インストール済みは空であることを確認
pip install django # Djangoをインストール
Djangoプロジェクトを作成します
django-admin startproject djangoreactwebpack4
cd djangoreactwebpack4/
私の環境は、DjangoはRemoteサーバに構築していますので、サーバのドメイン名を入力してアクセスを許可します。
---
ALLOWED_HOSTS = ["www.mypress.jp"]
---
DBを初期化します。
python manage.py migrate
ここまででDjangoのアプリを立ち上げます。
python manage.py runserver 0:8080
http://www.mypress.jp:8080/ で、以下のような画面が表示されます。
#３．Django templates と React components
frontend という名前で Django Appを作成し、この template に React App を貼り付けます。
それではfrontendを作成します。
django-admin startapp frontend
frontendディレクトリ配下を以下のように使用します。
- frontend/srcディレクトリにReact Appのソースを作ります。
- frontend/templatesはDjangoのテンプレートディレクトリです。
- frontend/staticはDjangoの静的ファイルのディレクトリです。
mkdir -p ./frontend/src/components
mkdir -p ./frontend/{static,templates}/frontend
INSTALLED_APPSにfrontendを追加します。
---
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'frontend', # 追加
]
---
DjangoのURLとviewsを定義します。
from django.urls import path, include
urlpatterns = [
path('', include('frontend.urls')),
]
from django.urls import path
from . import views
urlpatterns = [
path('', views.index ),
]
from django.shortcuts import render
def index(request):
return render(request, 'frontend/index.html')
以上のURLとviewsの定義で、http://www.mypress.jp:8080/ のアクセスで、以下のindex.htmlが呼び出されることになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<title>Django DRF - React : Quickstart - Valentino G. - www.valentinog.com</title>
</head>
<body>
<section class="section">
<div class="container">
<div id="app" class="columns"><!-- React --></div>
</div>
</section>
</body>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
</html>
{% static %} テンプレートタグは、静的ファイルの完全 URL を生成します。{% static "frontend/main.js" %} はmain.jsを指すURLです。後で説明しますが、webpack (babel)がindex.jsをコンパイルしてmain.jsをstaticファイルとして生成します。それをこのindex.htmlが読み込んで、id="app"にマウントされることになるわけです。ここがDjangoとReactの接点になります。
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
import App from "./components/App";
#４．Reactプロジェクト
最後にReactプロジェクトの環境を構築していきます。
webpack4ディレクトリ直下にて作業を行います。
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev
npm run build や npm run dev でReactのindex.jsをコンパイルしてmain.jsを吐き出すようにします。index.jsとmain.jsのディレクトリに注意してください。
---
"scripts": {
"dev": "webpack --mode development ./djangoreactwebpack4/frontend/src/index.js --output ./djangoreactwebpack4/frontend/static/frontend/main.js",
"build": "webpack --mode production ./djangoreactwebpack4/frontend/src/index.js --output ./djangoreactwebpack4/frontend/static/frontend/main.js"
},
---
npm run devは開発時に使います。吐き出されるmain.jsがデバッグに備えて見やすいものになっています。npm run buildは本番deploy時に使います。main.jsは圧縮された形です。
必要なパッケージをインストールします。
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties --save-dev
npm i react react-dom prop-types --save-dev
babelの設定です。
{
"presets": [
"@babel/preset-env", "@babel/preset-react"
],
"plugins": [
"transform-class-properties"
]
}
webapackの設定です。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Reactアプリをコンパイルします。
npm run build
それではDjangoプロジェクトを起動しましょう。
cd djangoreactwebpack4
python manage.py runserver 0:8080
http://www.mypress.jp:8080/ で、以下のような画面が表示されます。
以上です。