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


138

Новый для 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 многочисленны, поэтому заманчиво просто пойти по этому пути, чтобы начать работу с любой интерфейсной средой ... Не лучшая причина.


2
У меня было похожее любопытство, и я установил пример приложения для response + webpack + django - репозиторий также содержит ссылки на некоторые связанные инструменты и статьи, которые могут быть полезны.
danwild

Ответы:


142

У меня нет опыта работы с 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, могут добавить к моему ответу.


Я проверю учебник YouTube. Я прошел оба этих урока ранее. Статья 1 не сработала, хотя я внимательно следил за ней. (Скопировал и вставил большую часть кода). Это уже существующий проект, но я попробую новый. Статья 2 использовала устаревшие пакеты и недавно не обновлялась. В любом случае, читая больше об AngularJS и Django, похоже, что Django REST API все еще используется. Думаю, я искал решение без добавления этого измерения, но, похоже, это неизбежно.
eox.dev

Хорошо, я немного обновил свой ответ, вынув устаревшую статью. Ему более 2 лет, поэтому его обязательно нужно удалить. Поможет ли пронумерованный патрон? Что у вас есть проблемы с пониманием?
KA01

1
Попробовав вторую ссылку еще несколько раз на существующих и совершенно новых проектах, я, по крайней мере, поговорил с ними. Линия {% render_bundle 'main' %}неверна и должна быть {% render_bundle "main" %}.
eox.dev

1
Вторая ссылка не работает. Пожалуйста, обновите ссылку.
Адитья Мишра

1
Я хотел бы заменить эту мертвую 2 - ой ссылку ж / эту статью, я вслед за этим и в основном работает .. medium.com/labcodes/configuring-django-with-react-4c599d1eae63
Дуг F

36

Я чувствую твою боль, когда начинаю работать вместе над 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.

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


4
Год спустя я перешел на VUE.js ( vuejs.org ). Я заставил его работать с шаблонами Django, и он будет связываться с базой данных через Django Rest Framework. Это быстро и легко (~ 20kb)
imolitor

17

Как вам ответили другие, если вы создаете новый проект, вы можете разделить интерфейс и бэкэнд и использовать любой плагин 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.


10

Первый подход заключается в создании отдельных приложений 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.

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


Вам нужен webpack-dev-server, работающий в парном подходе? Потому что в уроке он работает. Насколько я понимаю, его нужно запускать, потому что он используется django для обновления пакетов. Это правильно? Если это так, как это будет работать в производстве, то есть мне все еще нужны два сервера?
Павли

1
В процессе разработки вам понадобятся как сервер разработки Django, так и сервер разработки React / Webpack. В производстве вам нужен только один сервер (Django), потому что Django позаботится о том, чтобы обслуживать созданные файлы, сгенерированныеnpm run build
Ahmed Bouchefra

Спасибо за разъяснение.
Павли

Можете ли вы уточнить первый подход? Насколько я понимаю, он будет содержать expressзапущенный сервер, который будет обслуживать статические JS-файлы React, а JS-файлы будут выполнять запрос ajax для получения данных с сервера Django. Браузер сначала попадает на expressсервер, он не имеет никакого представления о Django. Я прав? Возможно ли что-то вроде рендеринга на стороне сервера с этим подходом?
yadav_vi

Вы можете просто использовать статический хост и CDN для ваших статических файлов. Например, вы можете использовать GitHub Pages для размещения приложения React и CloudFlare в качестве CDN. Для рендеринга на стороне сервера вам нужна другая настройка, например, использование сервера Express, НО также существуют статические хостинговые сервисы, которые предлагают рендеринг на стороне сервера, такие как Netlify.
Ахмед Бушефра

10

Примечание для тех, кто работает в бэкэнде или на основе 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']
    }
};

Примечание в начале действительно обнадеживает!
Мохаммед Шариф C

7

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

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

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

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

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

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



1

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

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

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


Графен и Реакт + Аполлон - отличный стек! Чуть больше Python для написания, чем DRF, но огромное сокращение JS-кода, тем более что Apollo убивает необходимость в избыточности.
Джон Оттенлипс
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.