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

Новый для Django и еще более новый для ReactJS. Я изучал AngularJS и ReactJS, но остановился на ReactJS. Казалось, что это вытесняет AngularJS настолько, насколько популярна, несмотря на то, что AngularJS имеет большую долю рынка, и ReactJS, как говорят, быстрее пикапует.

Помимо всего этого хлама, я начал изучать Удеми, и после нескольких видео мне показалось важным увидеть, насколько хорошо он интегрируется с Django. Именно тогда я неизбежно врезаюсь в стену, просто заводя ее и работая, какая документация там, чтобы я не крутил свои колеса в течение нескольких часов и ночей.

На самом деле pipя не сталкивался с какими-либо всеобъемлющими учебниками или пакетами. pyreactНапример, те немногие, с которыми я сталкивался, не работали или были устаревшими .

Одна мысль, которая у меня была, заключалась в том, чтобы рассматривать ReactJS полностью отдельно, но с учетом классов и идентификаторов, которые я хочу отображать в компонентах ReactJS. После того, как отдельные компоненты ReactJS скомпилированы в один файл ES5, просто импортируйте этот единственный файл в Django. шаблон.

Я думаю, что это быстро сломается, когда я доберусь до рендеринга из моделей Django, хотя Django Rest Framework звучит так, будто он задействован. Даже недостаточно далеко, чтобы увидеть, как Redux влияет на все это.

В любом случае, у кого-нибудь есть четкий способ использования Django и ReactJS, которым они хотят поделиться?

В любом случае, документация и учебные пособия для AngularJS и Django многочисленны, поэтому заманчиво просто пойти по этому пути, чтобы начать работу с любой интерфейсной средой ... Не лучшая причина.

У меня нет опыта работы с Django, но концепции от front-end до back-end и от front-end framework до framework одинаковы.

1. React будет использовать ваш Django REST API . Фронт-энд и бэк-энд никак не связаны. React сделает HTTP-запросы к вашему REST API для получения и установки данных.
2. React, с помощью Webpack ( связка модулей) и Babel (транспортер) , соберет и перенесет ваш Javascript в один или несколько файлов, которые будут размещены на входной HTML-странице. Изучите Webpack, Babel, Javascript и React и Redux (контейнер состояния) . Я полагаю, что вы не будете использовать шаблоны Django, но вместо этого позволите React визуализировать интерфейс.
3. Когда эта страница отображается, React будет использовать API для извлечения данных, чтобы React мог ее отобразить. Ваше понимание HTTP-запросов, Javascript (ES6), Promises, Middleware и React имеет здесь важное значение.

Вот несколько вещей, которые я нашел в Интернете, которые должны помочь (на основе быстрого поиска в Google):

• Учебник по Django и React API Youtube
• Настройка Django с React (заменяет неработающую ссылку ссылкой на archive.org)
• Ищите другие ресурсы, используя термины, выделенные жирным шрифтом выше. Сначала попробуйте "Django React Webpack".

Надеюсь, это направит вас в правильном направлении! Удачи! Надеюсь, что другие, которые специализируются на Django, могут добавить к моему ответу.

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

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

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

Связь между Django и «внешним интерфейсом» осуществляется через структуру Rest. Убедитесь, что вы получили свои авторизацию и разрешения для структуры Rest на месте.

Я нашел хороший шаблон котла именно для этого сценария, и он работает из коробки. Просто следуйте инструкциям 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.pip Замените его содержимое этим

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.

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

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

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

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

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

Ваш " entry-point.browserify.js " может быть файлом ES6, который загружает ваше приложение реакции в шаблон:

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, и React будет использовать эти API с помощью клиента Axios или API выборки браузера. Вам понадобится два сервера, как для разработки, так и для производства: один для Django (REST API) и другой для React (для обслуживания статических файлов) .

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

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

Для проекта Django установите django-webpack-loader с помощью 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 способным генерировать файл статистики.

Перейдите в свое приложение 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 устарел.

Я предлагаю вам выполнить шаги, упомянутые в блоге, и заменить файл конфигурации веб-пакета следующим содержанием. Однако, если вы новичок в 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']
    }
};

Принятый ответ привел меня к мысли, что разделение бэкэнда Django и React Frontend - верный путь, несмотря ни на что. На самом деле существуют подходы, в которых React и Django связаны, что может лучше подходить в конкретных ситуациях.

Этот урок хорошо объясняет это. В частности:

Я вижу следующие шаблоны (которые являются общими почти для всех веб-фреймворков):

-React в своем собственном «внешнем» приложении Django: загрузите один HTML-шаблон и позвольте React управлять внешним интерфейсом (сложность: средняя)

-Django REST в качестве отдельного API + Реагировать в качестве отдельного SPA (сложность: сложная, для аутентификации используется JWT)

-Смешивать и сочетать: мини-приложения React в шаблонах Django (сложность: простая)

Вы можете попробовать следующее руководство, оно может помочь вам двигаться вперед:

Служим Реакту и Джанго вместе

Я знаю, что это на пару лет позже, но я выкладываю это для следующего человека в этом путешествии.

GraphQL полезен и намного проще по сравнению с DjangoRESTFramework. Это также более гибко с точки зрения ответов, которые вы получаете. Вы получаете то, что просите, и вам не нужно фильтровать ответ, чтобы получить то, что вы хотите.

Вы можете использовать Graphene Django на стороне сервера и React + Apollo / Relay ... Вы можете посмотреть на это, поскольку это не ваш вопрос.