Wie können Django und ReactJS zusammenarbeiten?

138

Neu bei Django und noch neuer bei ReactJS. Ich habe mich mit AngularJS und ReactJS befasst, mich aber für ReactJS entschieden. Es schien, als würde AngularJS an Popularität verlieren, obwohl AngularJS einen größeren Marktanteil hatte, und ReactJS soll schneller zu erlernen sein.

Abgesehen von all dem Müll habe ich angefangen, einen Kurs über Udemy zu belegen, und nach ein paar Videos schien es wichtig zu sehen, wie gut es sich in Django integriert. Dann stoße ich unweigerlich gegen eine Wand, um sie zum Laufen zu bringen. Welche Art von Dokumentation gibt es, damit ich mehrere Stunden und Nächte lang nicht mit den Rädern drehe?

Es gibt wirklich keine umfassenden Tutorials oder pipPakete, auf die ich gestoßen bin. Die wenigen, denen ich begegnet bin, haben pyreactzum Beispiel nicht funktioniert oder waren veraltet .

Ein Gedanke, den ich hatte, war, ReactJS nur vollständig getrennt zu behandeln, aber die Klassen und IDs zu berücksichtigen, in denen die ReactJS-Komponenten gerendert werden sollen. Nachdem die separaten ReactJS-Komponenten in eine einzelne ES5-Datei kompiliert wurden, importieren Sie einfach diese einzelne Datei in den Django Vorlage.

Ich denke, das wird schnell zusammenbrechen, wenn ich mit dem Rendern von Django-Modellen anfange, obwohl das Django Rest Framework so klingt, als wäre es involviert. Nicht einmal weit genug, um zu sehen, wie Redux all dies beeinflusst.

Wie auch immer, hat jemand eine klare Art und Weise, wie er Django und ReactJS verwendet, die er gerne teilt?

In jedem Fall sind die Dokumentationen und Tutorials für AngularJS und Django reichlich vorhanden, daher ist es verlockend, einfach diesen Weg zu gehen, um mit einem Front-End-Framework zu beginnen ... Nicht der beste Grund.

eox.dev
quelle
2
Ich hatte ähnliche Kuriositäten und richtete eine Beispiel- App für React + Webpack + Django ein - das Repo enthält auch Links zu verwandten Tools und Artikeln, die nützlich sein könnten.
Danwild

Antworten:

142

Ich habe keine Erfahrung mit Django, aber die Konzepte von Front-End zu Back-End und Front-End-Framework zu Framework sind dieselben.

  1. React verbraucht Ihre Django REST API . Frontends und Backends sind in keiner Weise miteinander verbunden. React sendet HTTP-Anforderungen an Ihre REST-API, um Daten abzurufen und festzulegen.
  2. React bündelt und transpiliert Ihr Javascript mithilfe von Webpack (Modulbündler) und Babel (Transpiler) in einzelne oder mehrere Dateien, die auf der HTML-Eintragsseite abgelegt werden. Lernen Sie Webpack, Babel, Javascript und React and Redux (einen Statuscontainer) . Ich glaube, Sie werden keine Django-Vorlagen verwenden, sondern React erlauben, das Front-End zu rendern.
  3. Beim Rendern dieser Seite verwendet React die API, um Daten abzurufen, damit React sie rendern kann. Ihr Verständnis von HTTP-Anfragen, Javascript (ES6), Promises, Middleware und React ist hier von entscheidender Bedeutung.

Hier sind einige Dinge, die ich im Web gefunden habe und die helfen sollten (basierend auf einer schnellen Google-Suche):

Hoffe das lenkt dich in die richtige Richtung! Viel Glück! Hoffentlich können andere, die sich auf Django spezialisiert haben, meine Antwort ergänzen.

KA01
quelle
Ich werde mir das YouTube-Tutorial ansehen. Ich habe diese beiden Tutorials zuvor durchgesehen. Artikel 1 hat nicht funktioniert, obwohl ich ihn genau verfolgt habe. (Kopiert und eingefügt den größten Teil des Codes). Das ist ein bestehendes Projekt, aber ich werde ein neues ausprobieren. Artikel 2 verwendete veraltete Pakete und wurde kürzlich nicht aktualisiert. Wenn Sie mehr über AngularJS und Django lesen, scheint die Django REST-API weiterhin verwendet zu werden. Ich glaube, ich habe nach einer Lösung gesucht, ohne diese Dimension hinzuzufügen, aber es klingt so, als wäre sie unvermeidlich.
eox.dev
Ok, ich habe meine Antwort ein wenig aktualisiert, indem ich den veralteten Artikel herausgenommen habe. Es ist über 2 Jahre alt und musste unbedingt entfernt werden. Helfen die nummerierten Kugeln? Was haben Sie Probleme zu verstehen?
KA01
1
Nachdem ich den zweiten Link mehrmals bei bestehenden Projekten und brandneuen Projekten ausprobiert hatte, brachte ich sie zumindest zum Reden. Die Linie {% render_bundle 'main' %}ist falsch und sollte sein {% render_bundle "main" %}.
eox.dev
1
Der zweite Link funktioniert nicht. Bitte aktualisieren Sie den Link.
Aditya Mishra
1
Ich würde diesen toten 2. Link mit diesem Artikel ersetzen, ich folgte diesem und es funktioniert meistens .. medium.com/labcodes/configuring-django-with-react-4c599d1eae63
Doug F
36

Ich fühle deinen Schmerz, als auch ich anfange, Django und React.js zusammenzuarbeiten. Hat ein paar Django-Projekte gemacht und ich denke, React.js passt hervorragend zu Django. Es kann jedoch einschüchternd sein, loszulegen. Wir stehen hier auf den Schultern von Riesen;)

So denke ich, es funktioniert alles zusammen (großes Bild, bitte korrigiert mich jemand, wenn ich falsch liege).

  • Django und seine Datenbank (ich bevorzuge Postgres) auf einer Seite (Backend)
  • Django Rest-Framework, das die Schnittstelle zur Außenwelt bereitstellt (dh Mobile Apps und React und dergleichen)
  • Reactjs, Nodejs, Webpack, Redux (oder vielleicht MobX?) Auf der anderen Seite (Frontend)

Die Kommunikation zwischen Django und dem Frontend erfolgt über das Rest-Framework. Stellen Sie sicher, dass Sie Ihre Berechtigungen und Berechtigungen für das Rest-Framework erhalten.

Ich habe eine gute Kesselvorlage für genau dieses Szenario gefunden und sie funktioniert sofort. Folgen Sie einfach der Readme- Datei https://github.com/scottwoodall/django-react-template und sobald Sie fertig sind, läuft ein hübsches Django Reactjs-Projekt. Dies ist keineswegs für die Produktion gedacht, sondern vielmehr als eine Möglichkeit, sich zu vertiefen und zu sehen, wie die Dinge miteinander verbunden sind und funktionieren!

Eine kleine Änderung, die ich vorschlagen möchte, ist folgende: Befolgen Sie die Anweisungen zum Einrichten, ABER bevor Sie zum zweiten Schritt zum Einrichten des Backends gelangen (Django hier https://github.com/scottwoodall/django-react-template/blob/master) /backend/README.md ), ändern Sie die Anforderungsdatei für das Setup.

Sie finden die Datei in Ihrem Projekt unter /backend/requirements/common.pip. Ersetzen Sie den Inhalt durch diese

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

Dadurch erhalten Sie die neueste stabile Version für Django und sein Rest-Framework.

Ich hoffe das hilft.

Imolitor
quelle
4
Ein Jahr später wechselte ich zu VUE.js ( vuejs.org ). Ich habe dafür gesorgt, dass es mit den Django-Vorlagen funktioniert, und es wird über das Django Rest Framework mit der Datenbank kommunizieren. Es ist schnell und leicht (~ 20kb)
Imolitor
17

Wie andere Ihnen geantwortet haben, können Sie beim Erstellen eines neuen Projekts Frontend und Backend trennen und mit einem beliebigen Django-Rest-Plugin eine Rest-API für Ihre Frontend-Anwendung erstellen. Dies ist in der idealen Welt.

Wenn Sie ein Projekt haben, in dem die Django-Vorlage bereits vorhanden ist, müssen Sie Ihr React Dom-Rendering auf der Seite laden, auf der Sie die Anwendung laden möchten. In meinem Fall hatte ich bereits eine Django-Pipeline und habe gerade die browserify-Erweiterung hinzugefügt. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Wie im Beispiel habe ich die App mit der Django-Pipeline geladen:

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

Ihre " entry-point.browserify.js " kann eine ES6-Datei sein, die Ihre Reaktions-App in die Vorlage lädt:

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')
);

In Ihrer Django-Vorlage können Sie Ihre App jetzt einfach laden:

{% 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>

Der Vorteil der Verwendung der Django-Pipeline besteht darin, dass die Statik während des Vorgangs verarbeitet wird collectstatic.

Karim N Gorjux
quelle
10

Der erste Ansatz besteht darin, separate Django- und React-Apps zu erstellen. Django ist für die Bereitstellung der API verantwortlich, die mit dem Django REST-Framework erstellt wurde, und React verwendet diese APIs mithilfe des Axios-Clients oder der Abruf-API des Browsers. Sie benötigen zwei Server in Entwicklung und Produktion, einen für Django (REST-API) und einen für React (um statische Dateien bereitzustellen) .

Der zweite Ansatz ist anders. Die Frontend- und Backend-Apps werden gekoppelt . Grundsätzlich verwenden Sie Django, um sowohl das React-Frontend zu bedienen als auch die REST-API verfügbar zu machen. Sie müssen also React und Webpack in Django integrieren. Dies sind die Schritte, die Sie ausführen können, um dies zu tun

Generieren Sie zuerst Ihr Django-Projekt und dann in diesem Projektverzeichnis Ihre React-Anwendung mithilfe der React-CLI

Installieren Sie für das Django-Projekt den django-webpack-loader mit pip:

pip install django-webpack-loader

Fügen Sie als Nächstes die App zu installierten Apps hinzu und konfigurieren Sie sie, settings.pyindem Sie das folgende Objekt hinzufügen

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

Fügen Sie dann eine Django-Vorlage hinzu, die zum Mounten der React-Anwendung verwendet wird und von Django bereitgestellt wird

{ % 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>

Fügen Sie dann eine URL hinzu urls.py, um diese Vorlage bereitzustellen

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")),

]

Wenn Sie zu diesem Zeitpunkt sowohl den Django- als auch den React-Server starten, wird ein Django-Fehler angezeigt, der webpack-stats.jsonbesagt, dass der Server nicht vorhanden ist. Als nächstes müssen Sie Ihre React-Anwendung in die Lage versetzen, die Statistikdatei zu generieren.

Navigieren Sie in Ihrer React-App und installieren Sie sie webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Werfen Sie dann Ihre Webpack-Konfiguration aus und gehen Sie zu config/webpack.config.dev.jsHinzufügen

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

module.exports = {

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

Dadurch wird das BundleTracker- Plugin zu Webpack hinzugefügt und angewiesen, es webpack-stats.jsonim übergeordneten Ordner zu generieren .

Stellen Sie sicher, dass Sie dies auch config/webpack.config.prod.jsfür die Produktion tun .

Wenn Sie nun Ihren React-Server erneut ausführen, webpack-stats.jsonwird der generiert und Django kann ihn verwenden, um Informationen zu den vom React-Dev-Server generierten Webpack-Bundles zu finden.

Es gibt noch einige andere Dinge zu tun. Weitere Informationen finden Sie in diesem Tutorial .

Ahmed Bouchefra
quelle
Benötigen Sie einen Webpack-Dev-Server, der gekoppelt ausgeführt wird? Weil er es im Tutorial ausführt. Nach meinem Verständnis muss es ausgeführt werden, da es von Django verwendet wird, um die Bundles auf dem neuesten Stand zu halten. Ist das richtig? Wenn es so wäre, würde dies in der Produktion funktionieren, dh würde ich noch zwei Server benötigen?
Pavlee
1
In der Entwicklung müssen sowohl der Django-Entwicklungsserver als auch der React / Webpack-Entwicklungsserver ausgeführt werden. In der Produktion müssen Sie nur einen Server (Django) ausgeführt , da Django die integrierten Dateien dienen , die durch kümmernnpm run build
Ahmed Bouchefra
Danke für die Klarstellung.
Pavlee
Können Sie den ersten Ansatz näher erläutern? Soweit ich weiß, würde es einen expressServer enthalten , der ausgeführt wird, um statische JS-Dateien zu reagieren, und JS-Dateien würden eine Ajax-Anforderung ausführen, um Daten vom Django-Server abzurufen. Der Browser trifft zuerst den expressServer, er hat keine Ahnung von dem Django. Hab ich recht? Ist so etwas wie serverseitiges Rendern mit diesem Ansatz machbar?
Yadav_vi
Sie können einfach einen statischen Host und ein CDN für Ihre statischen Dateien verwenden. Sie können beispielsweise GitHub Pages verwenden, um die React-Anwendung und CloudFlare als CDN zu hosten. Für das serverseitige Rendern benötigen Sie ein anderes Setup wie die Verwendung eines Express-Servers, ABER es gibt auch statische Hosting-Dienste, die serverseitiges Rendern wie Netlify anbieten.
Ahmed Bouchefra
10

Ein Hinweis für alle, die aus einem Backend oder einer Django-basierten Rolle kommen und versuchen, mit ReactJS zu arbeiten: Niemand schafft es, die ReactJS-Umgebung beim ersten Versuch erfolgreich einzurichten :)

Es gibt einen Blog von Owais Lone, der unter http://owaislone.org/blog/webpack-plus-reactjs-and-django/ verfügbar ist . Die Syntax für die Webpack-Konfiguration ist jedoch veraltet.

Ich schlage vor, dass Sie die im Blog genannten Schritte ausführen und die Webpack-Konfigurationsdatei durch den folgenden Inhalt ersetzen. Wenn Sie jedoch sowohl mit Django als auch mit React noch nicht vertraut sind, kauen Sie aufgrund der Lernkurve nacheinander. Sie werden wahrscheinlich frustriert sein.

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']
    }
};
IVI
quelle
Die Notiz am Anfang ist wirklich ermutigend!
Mohammed Shareef C
7

Die akzeptierte Antwort ließ mich glauben, dass die Entkopplung von Django-Backend und React-Frontend der richtige Weg ist, egal was passiert. Tatsächlich gibt es Ansätze, bei denen React und Django gekoppelt sind, was in bestimmten Situationen besser geeignet sein kann.

Dieses Tutorial erklärt dies gut. Bestimmtes:

Ich sehe die folgenden Muster (die fast jedem Webframework gemeinsam sind):

-React in seiner eigenen "Frontend" Django App: Laden Sie eine einzelne HTML-Vorlage und lassen Sie React das Frontend verwalten (Schwierigkeitsgrad: mittel)

-Django REST als eigenständige API + Reagiere als eigenständiges SPA (Schwierigkeit: schwer, es beinhaltet JWT zur Authentifizierung)

-Mix and Match: Mini Reagieren Sie Apps in Django-Vorlagen (Schwierigkeitsgrad: einfach)

Rexcirus
quelle
1

Ich weiß, dass dies ein paar Jahre zu spät ist, aber ich werde es für die nächste Person auf dieser Reise veröffentlichen.

GraphQL war hilfreich und viel einfacher als DjangoRESTFramework. Es ist auch flexibler in Bezug auf die Antworten, die Sie erhalten. Sie erhalten, wonach Sie fragen, und müssen nicht durch die Antwort filtern, um das zu erhalten, was Sie möchten.

Sie können Graphene Django auf der Serverseite und React + Apollo / Relay verwenden ... Sie können es untersuchen, da dies nicht Ihre Frage ist.

K_Wainaina
quelle
Graphen und React + Apollo ist ein ausgezeichneter Stapel! Etwas mehr Python zum Schreiben als DRF, aber eine enorme Reduzierung des JS-Codes, zumal Apollo die Notwendigkeit von Redux beseitigt.
John Ottenlips