Как заставить Django и ReactJS работать вместе?

Я чувствую вашу боль, поскольку я тоже начинаю получать Джанго и реагировать.js работают вместе. Сделал пару проектов Django, и я думаю, реагирую.js-отличный матч для Django. Тем не менее, это может быть пугающим, чтобы начать. Мы стоим здесь на плечах гигантов;)

вот как я думаю, все это работает вместе (большая картина, пожалуйста, кто-нибудь поправьте меня, если я ошибаюсь).

• Django и его база данных (я предпочитаю Postgres) с одной стороны (бэкэнд)
• Django Rest-фреймворк, предоставляющий интерфейс внешнему миру (т. е. мобильные приложения и реагировать и тому подобное)
• Reactjs, Nodejs, Webpack, Redux (или, может быть, MobX?) на другой стороне (frontend)

связь между Django и "интерфейсом" осуществляется через REST framework. Убедитесь, что вы получили авторизацию и разрешения для REST framework на месте.

Я нашел хороший шаблон котла именно для этого сценария, и он работает из коробки. Просто следуйте readme https://github.com/scottwoodall/django-react-template и как только вы закончите, у вас будет довольно хороший проект Django Reactjs. Это ни в коем случае не предназначено для производства, а скорее как способ для вас, чтобы копаться и видеть, как вещи связаны и работают!

одно крошечное изменение, которое я хотел бы предложить это: Следуйте инструкциям по установке, но прежде чем перейти к 2-му шагу, чтобы настроить бэкэнд (Django здесь https://github.com/scottwoodall/django-react-template/blob/master/backend/README.md), измените файл требований для установки.

вы найдете файл в своем проекте в /backend / requirements / common.очко Замените его содержимое этим

appdirs==1.4.0
Django==1.10.5
django-autofixture==0.12.0
django-extensions==1.6.1
django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

это дает вам последнюю стабильную версию для Django и его Rest framework.

надеюсь, это поможет.

как вам ответили другие, если вы создаете новый проект, вы можете отделить frontend и backend и использовать любой плагин django rest для создания REST api для вашего приложения frontend. Это в идеальном мире.

если у вас уже есть проект с шаблоном django, вы должны загрузить рендеринг react dom на странице, которую хотите загрузить приложение. В моем случае я уже django-трубопровод и я только что добавил расширение browserify. (https://github.com/j0hnsmith/django-pipeline-browserify)

как и в примере, я загрузил приложение с помощью django-pipeline:

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

код "точки входа.browserify.js " может быть файл ES6, который загружает ваше приложение react в шаблоне:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app.js';
import "babel-polyfill";

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import reducers from './reducers/index.js';

const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App/>
  </Provider>
  , document.getElementById('my-react-app')
);

в шаблоне django теперь вы можете легко загрузить приложение:

{% load pipeline %}

{% comment %} 
`browserify` is a PIPELINE key setup in the settings for django 
 pipeline. See the example above
{% endcomment %}

{% javascript 'browserify' %}

{% comment %} 
the app will be loaded here thanks to the entry point you created 
in PIPELINE settings. The key is the `entry-point.browserify.js` 
responsable to inject with ReactDOM.render() you react app in the div 
below
{% endcomment %}
<div id="my-react-app"></div>

преимущество использования django-pipeline заключается в том, что статика обрабатывается во время collectstatic.

первый подход-создание отдельных приложений Django и React. Django будет отвечать за обслуживание API, построенного с помощью Django Rest framework, и React будет использовать эти API, используя клиент Axios или API выборки браузера. вам нужно будет иметь два сервера, как в разработке, так и в производстве, один для Django(REST API), а другой для React (для обслуживания статических файлов).

второй подход-разные frontend и backend приложений быть в сочетании. В основном вы будете использовать Django как для обслуживания интерфейса React, так и для предоставления REST API. Поэтому вам нужно будет интегрировать React и Webpack с Django, это шаги, которые вы можете выполнить, чтобы сделать это

сначала создайте свой проект Django, а затем внутри этого каталога проекта создайте приложение React с помощью React CLI

для установки проекта Django django-webpack-загрузчик с Pip:

pip install django-webpack-loader

далее добавить приложение для установленных приложений и настроить его в settings.py добавив следующий объект

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

затем добавьте шаблон Django, который будет использоваться для монтирования приложения React и будет обслуживаться Django

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React </title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

затем добавьте URL в urls.py для обслуживания этого шаблона

from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [

    url(r'^', TemplateView.as_view(template_name="main.html")),

]

если вы запустите оба сервера Django и React в этот момент, Вы получите ошибку Django, сказав webpack-stats.json не существует. Так что теперь вам нужно сделать вашу реакцию приложение, способное генерировать файл статистики.

идите вперед и перейдите в приложение React, а затем установите webpack-bundle-tracker

npm install webpack-bundle-tracker --save

затем извлеките конфигурацию Webpack и перейдите в config/webpack.config.dev.js затем добавить

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

добавить BundleTracker плагин для Webpack и проинструктировать его генерировать webpack-stats.json в родительской папке.

убедитесь, также сделать то же самое в config/webpack.config.prod.js для производства.

теперь, если вы запустите ваш Сервер React webpack-stats.json будет сгенерирован, и Django сможет использовать его, чтобы найти информацию о пакетах Webpack, сгенерированных сервером React dev.

есть некоторые другие вещи. Вы можете найти более подробную информацию из этого учебник.

Примечание Для тех, кто приходит из бэкэнда или Django на основе роли и пытается работать с ReactJS: никто не удается настроить среду ReactJS успешно в первой попытке:)

есть блог от Owais Lone, который доступен из http://owaislone.org/blog/webpack-plus-reactjs-and-django/; однако синтаксис конфигурации Webpack устарел.

Я предлагаю вам выполнить шаги, упомянутые в блоге, и заменить webpack файл конфигурации с содержимым ниже. Однако, если вы новичок в Django и React, жуйте по одному из-за кривой обучения, вы, вероятно, будете разочарованы.

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};