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!
Antworten:
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,
React
und Ihre App demwindow
Objekt aussetzen , oderwindow
Objekt 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:
quelle
{{ 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.window.MyApp
oder ähnlich) ist. Stellen Sie sicher, dass Sie es richtig eingegeben haben. Auch Ihre Skriptdatei, die den Klebercode definiert, muss vor dem Aufrufen enthalten sein.Was wäre, wenn Sie das Frontend und das Backend als zwei verschiedene, unabhängige Einheiten betrachten würden? Ich meine folgendes:
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.
quelle
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: -
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.
quelle