概要

Python製WebアプリケーションフレームワークDjangoとフロントエンドフレームワークReactの融合方法とつまづくと思われるRoutingについてまとめ

準備

Django準備

コマンドライン

#アプリケーション生成
django-admin startproject webapp
#ディレクトリへ
cd webapp

#Reactコードを格納するディレクトリをプロジェクトルート直下に
mkdir frontend
mkdir frontend/src
mkdir frontend/src/component
touch frontend/src/index.js

#staticファイルを入れるディレクトリをプロジェクトルート直下に
mkdir static
mkdir static/js

コマンド一発でできるDjangoはやはり神であったか・・・
/templetes/index.html

{% load static %}
<!DOCTYPE html>
<html lang="ja" id="mysite">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <div id=App>
  </div>
</body>
<script src="{% static "js/main.js" %}"></script>
</html>

React

コマンドライン

#プロジェクトのディレクトリにて（manage.pyがあるところ）
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev
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

/.babelrc

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "styled-jsx/babel"
    ]
}

/package.json

(省略)
  "scripts": {
    "dev": "webpack --mode development ./frontend/src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
  },
(省略)

/webpack.config.js


module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

reactアプリはRoutingをする感じで好きなのを作ってみてください。
APIも必要なら作りましょう。
そんな感じで作ったアプリケーションのRoutingについて次で触れます。

Routing

SPAで意外と難しいのがこのRouting。というのもDjangoとReact双方のRouting機能が競合して面白いことになってしまいます。なのでURL周りは以下のように設定します。

/webapp/urls.py

#省略

api_urlpatterns = [
    省略
]

urlpatterns = [
    #この順番を守ろう。
    path('admin/', admin.site.urls),#管理ページのURL
    path('spa/1.0/', include(api_urlpatterns)),#APIのURL
    url(r'^',TemplateView.as_view(template_name='index.html'))#index.html配信URL
]

/webapp/settings.py

#以下適当な箇所に追加
APPEND_SLASH=False

そしてReactでは

<Switch>
    <Route exact path="/" component={component_of_top} />
    <Route exact path="/hoge" component={component_of_hoge}/>
</Switch>

こんな感じにしてURLの最後に/をつけないようにしましょ。

Django+ReactでWebアプリを作る時に困るかもしれないRoutingのお話

概要

準備

Django準備

React

Routing