Reagieren Sie mit Django - echte Nutzung

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!

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

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.

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.