Как подружить Django и React

Подготовка

1. Создание нового проекта Django

$ django-admin startproject app
$ cd app
$ virtualenv -p python3.6 venv
$ source venv/bin/activate
$ pip install django
$ python manage.py migrate

2. Создание React-приложения

$ mkdir frontend
$ cd frontend
$ npm init -y

Дружим

3. Измените содержимое ключа scripts в файле frontend/package.json

"scripts": {
  "build": "webpack --config webpack.config.js --progress --colors",
  "watch": "webpack --config webpack.config.js --watch --mode development"
},

4. Установите необходимые библиотеки

$ npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-bundle-tracker webpack-cli clean-webpack-plugin @babel/core @babel/preset-env @babel/preset-react
$ npm install --save react react-dom

5. Создайте файл frontend/webpack.config.js

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  context: __dirname,

  entry: './src/index',

  output: {
      path: path.resolve('./build/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new CleanWebpackPlugin(),
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

6. Создайте файл frontend/.babelrc со следующим содержимым

{
    "presets": ["@babel/preset-env", "@babel/react"]
}

7. Создайте индексный файл для реакта frontend/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="world" />;
ReactDOM.render(
  element,
  document.getElementById('react')
);

8. Установить модуль django-webpack-loader в Django

pip install django-webpack-loader

9. Добавить его в INSTALLED_APPS и настроить

INSTALLED_APPS = (
    # ...
    'webpack_loader',
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'build/',  # это префикс для урла - /media/build/
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),  # путь до файла webpack-stats.json
    }
}

10. Создать индексный файл в темплейтах Django

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>
    <body>
        <div id="react"></div>
        {% render_bundle 'main' %}
    </body>
</html>

Разработка

Запустить React

cd frontend && npm run watch

И запустить Django

source venv/bin/activate && python manage.py runserver

Внести изменения, сохранить файлы в реакте, перейти на необходимую страницу и перезагрузить (хот-релоада нет).


Источник, переведенный и дополненный (исправлены ошибки): https://medium.com/uva-mobile-devhub/set-up-react-in-your-django-project-with-webpack-4fe1f8455396

django react