Reagieren Sie mit Django - echte Nutzung

74

Ich habe ein bisschen mit React rumgespielt und es gefällt mir sehr gut. Es ist viel ausführlicher als Angular (ng-repeat mit | filter ist von unschätzbarem Wert), aber in Ordnung.

Die Sache, die mich nervt, ist, wie ich React with Django Templates verwenden soll. Sollte ich das gesamte Javascript zusammen mit dem "HTML" -Markup in Vorlagen einfügen?

Die Implementierung von Angular verlief reibungslos. Ich habe nur einige Attribute in die Template / Django-Formularklasse eingefügt und dann Javascript in eine separate Datei geschrieben. Fügen Sie diese Datei hinzu und fertig.

Wie "verwenden" reagieren? Was ist der richtige Weg?

Danke im Voraus!

n1_
quelle
3
Direkt aus dem Maul des Pferdes: facebook.github.io/react/blog/2013/08/19/…
rnevius
Vielen Dank, aber ich verstehe immer noch nicht, wie ich meinen App-Code trennen soll.
n1_
4
Wir verwenden Django mit Reagieren auf dem Frontend. Wir verwenden nur Django für unsere Rest-API und ein Frontend mit allen Reaktionen.
Zackify
Nun, das ist der einzige Weg, den ich mir jetzt vorstellen kann
n1_

Antworten:

83

Da Sie React zusammen mit Django-Vorlagen verwenden möchten, gehe ich davon aus, dass der React-Code nur bestimmte Teile Ihrer Seite betrifft. Die folgenden Erklärungen basieren auf dieser Annahme.

Zunächst müssen Sie nicht den gesamten JS-Code in die Vorlage einfügen - das wäre in der Tat ein Chaos.

Sie können mit Webpack einen separaten JS-basierten Erstellungsprozess erstellen ( siehe dieses Howto ). Dadurch werden die Funktionen Ihres clientseitigen Codes verbessert, sodass Sie CommonJS-Module im Browser verwenden können, die Sie direkt von npm abrufen können, einschließlich React .

Webpack generiert wiederum ein Bundle (oder mehrere Bundles, abhängig von der Art Ihrer Anwendung und der Webpack-Konfiguration), die Sie <script>wie gewohnt über Tags in Ihre Django-Vorlagen aufnehmen müssen .

Jetzt müssen Sie den React.render()Aufruf tätigen , um Ihre React-Anwendung irgendwo im vorhandenen Seitenlayout zu rendern. Sie müssen ein leeres HTML-Element mit einer bestimmten ID / einem bestimmten Klassennamen als Einhängepunkt für die Anwendung verwenden.

Aber hier kommt die Einschränkung: Sie können nicht direkt über den Browser oder Django-Vorlagen auf CommonJS-Module zugreifen. Also entweder du,

  • aussetzen Reactund Ihre App dem windowObjekt aussetzen , oder
  • Erstellen Sie ein Modul mit Klebercode, um die App-Initialisierung durchzuführen, und stellen Sie diese Methode dem windowObjekt zur Verfügung.

In jedem Fall müssen Sie den Initialisierungscode direkt aus den Vorlagen aufrufen (siehe Beispiel für Klebercode und Aufruf der App-Initialisierung ).

Mit diesem Initialisierungsschritt können Sie auch in Django-Vorlagen verfügbare Variablen an den JS-Code übergeben.

Die endgültige Django-Vorlage sieht ungefähr so ​​aus:

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

Und der Klebercode:

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

Ich weiß, dass all dies am Anfang überwältigend klingen mag (noch mehr im Vergleich zu den wenigen Schritten, die Sie mit Angular gemacht haben), aber glauben Sie mir, es zahlt sich auf lange Sicht aus.

Also zusammenfassend:

  1. Schreiben Sie den React-Code in separate JS-Dateien
  2. Verwenden Sie Webpack (mit CommonJS-Modulen), um Ihren React-Code zu bündeln
  3. Fügen Sie das Bundle in Ihre Django-Vorlagen ein
  4. Rendern Sie den Reaktionscode mithilfe des Klebercodes in Django-Vorlagen
julen
quelle
1
Im Grunde genommen endet die Geschichte, in der Django Komponenten wie Form oder Gitter rendert, mit Reagieren?
n1_
1
Django-Vorlagen wissen nichts über die Komponenten, die Sie mit React rendern, und das Gleiche gilt umgekehrt. So kann beispielsweise React ein Formular, über das Sie rendern {{ form.as_p }}, nicht verstehen , selbst wenn Sie wie in Angular Attribute in die Felder einfügen. In diesem Zusammenhang dient ein Django-Formular nur zur Validierung der Datenserverseite.
Julen
Wie zackify schrieb, ist Django in diesem Fall ein reines Backend, das Daten liefert. Die gesamte Vorlagen- und Renderlogik ist nutzlos, da sich der gesamte HTML-Code in JS (React-Komponenten) befindet. Recht?
n1_
1
Es liegt an Ihnen, aber es ist nicht erforderlich, 100% React-Code für Ihre Django-App zu haben. Dies hängt hauptsächlich davon ab, welche Benutzeroberfläche und Interaktionen Sie auf der Clientseite erstellen möchten. Wie oben gezeigt, können sowohl Django-Vorlagen als auch React-Code nebeneinander angezeigt werden.
Julen
1
Das klingt so, als ob der Verweis auf das globale Objekt nicht korrekt ( window.MyAppoder ähnlich) ist. Stellen Sie sicher, dass Sie es richtig eingegeben haben. Auch Ihre Skriptdatei, die den Klebercode definiert, muss vor dem Aufrufen enthalten sein.
Julen
9

Was wäre, wenn Sie das Frontend und das Backend als zwei verschiedene, unabhängige Einheiten betrachten würden? Ich meine folgendes:

  1. Django sollte nur eine API sein und mit JSON-Daten antworten
  2. Das Frontend sollte nur aus statischen Dateien bestehen, die von nginx bereitgestellt werden
  3. Möglicherweise müssen Sie sich mit CORS befassen , um die Kommunikation zwischen beiden zu ermöglichen. Eine Möglichkeit besteht darin, Preflight-Anforderungen von Ihrem Frontend zuzulassen, und die andere darin, einen Nginx-Proxy einzurichten. Dies ist ein separates Problem, und Sie sollten danach suchen, wenn Sie weitere Details benötigen.

Ich denke, diese Architektur ermöglicht es Ihnen, Dinge getrennt zu halten und sich nicht mit ihrer Integration zu befassen. Die Dinge im Frontend / React-Ökosystem sind bereits zu kompliziert, daher denke ich, dass die Einfachheit der Konfiguration berücksichtigt werden muss.

Mich würde auch interessieren, wie ein Bereitstellungsprozess für diese Architektur aussehen würde (welche Tools sollen verwendet werden?). Fügen Sie daher bitte Kommentare hinzu, wenn Sie Vorschläge haben, und ich werde die Antwort entsprechend aktualisieren, um nützliche Informationen für zukünftige Leser bereitzustellen.

Tiberiu Maxim
quelle
4

Ich habe etwas Ähnliches implementiert, wie Sie es verlangen. Mein Frontend besteht ausschließlich aus Reactjs, die mit Webpack kompiliert werden und meine Vorlagen werden in Django erstellt.

Also mache ich folgendes: -

  1. Verwenden Sie den React-Router und reagieren Sie, um .jsx / .js-Code zu erstellen.
  2. Kompilieren Sie mit Webpack.
  3. Verwenden Sie Django-Webpack

Das Django-Webpack funktioniert also sehr gut und hilft Ihnen dabei, Ihre Kompilierung außerhalb von Django zu isolieren, damit Ihre Gedanken auf eine schöne und skalierbare Weise funktionieren.

Harkirat Saluja
quelle
Was meinst du mit "Frontend ist komplett auf Reaktionen", aber "Vorlagen werden in Django erstellt"? Wenn das Frontend vollständig auf Reaktionen ausgerichtet ist, verwenden Sie überhaupt Django-Vorlagen? (Ich habe einige Formulare von Django gerendert und versuche jetzt, DRF zu verwenden, um das Rendering auf React zu verschieben. Ich versuche, die Dinge mit den begrenzten Informationen / Dokumenten herauszufinden, die online verfügbar sind - daher frage ich. Danke)
Anupam
Ich hatte einige Vorlagen in Django, als ich mein Projekt startete, aber dann bewegte ich langsam das gesamte Frontend, um mit Django Rest als Backend zu reagieren. Jetzt verwende ich Vorlagen nur für das serverseitige Rendern für SEO-Zwecke. Wenn Sie Hilfe in Bezug auf Migrationen benötigen, würden Sie gerne helfen :)
Harkirat Saluja
Vielen Dank - kennen Sie gute Beispiele, die das Rendern von Django-Formularen über DRF und React demonstrieren? Ich habe viel Zeit damit verbracht, dies herauszufinden, aber ein echtes Beispiel würde wirklich dazu beitragen, mein Verständnis zu bestätigen. Es gibt einige DRF + React-Beispiele, aber ich suche speziell eines, das Formulardaten über DRF sendet und React wiederum ein Formular mit den Daten rendert.
Anupam
Ich habe nicht versucht, Django-Formulare mit React zu verwenden, da ich fand, dass Redux-Formulare für mein Projekt wirklich erstaunlich und skalierbar sind. Ich würde dringend empfehlen, Redux in das Bild einzubringen und Ihr gesamtes Frontend auf React-Redux zu verschieben
React
1
Django-Vorlagen helfen bei SSR nicht. Dafür brauchen Sie Node. Es gibt wirklich keinen Vorteil, überhaupt Django-Vorlagen zu verwenden. Sie können ein vollständig isoliertes ReactJS-Frontend erstellen und Daten einfach über REST-APIs zu / von DRF füllen.
James