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 pip
Pakete, auf die ich gestoßen bin. Die wenigen, denen ich begegnet bin, haben pyreact
zum 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.
Antworten:
Ich habe keine Erfahrung mit Django, aber die Konzepte von Front-End zu Back-End und Front-End-Framework zu Framework sind dieselben.
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.
quelle
{% render_bundle 'main' %}
ist falsch und sollte sein{% render_bundle "main" %}
.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).
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
Dadurch erhalten Sie die neueste stabile Version für Django und sein Rest-Framework.
Ich hoffe das hilft.
quelle
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:
Ihre " entry-point.browserify.js " kann eine ES6-Datei sein, die Ihre Reaktions-App in die Vorlage lädt:
In Ihrer Django-Vorlage können Sie Ihre App jetzt einfach laden:
Der Vorteil der Verwendung der Django-Pipeline besteht darin, dass die Statik während des Vorgangs verarbeitet wird
collectstatic
.quelle
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:
Fügen Sie als Nächstes die App zu installierten Apps hinzu und konfigurieren Sie sie,
settings.py
indem Sie das folgende Objekt hinzufügenFügen Sie dann eine Django-Vorlage hinzu, die zum Mounten der React-Anwendung verwendet wird und von Django bereitgestellt wird
Fügen Sie dann eine URL hinzu
urls.py
, um diese Vorlage bereitzustellenWenn Sie zu diesem Zeitpunkt sowohl den Django- als auch den React-Server starten, wird ein Django-Fehler angezeigt, der
webpack-stats.json
besagt, 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
Werfen Sie dann Ihre Webpack-Konfiguration aus und gehen Sie zu
config/webpack.config.dev.js
HinzufügenDadurch wird das BundleTracker- Plugin zu Webpack hinzugefügt und angewiesen, es
webpack-stats.json
im übergeordneten Ordner zu generieren .Stellen Sie sicher, dass Sie dies auch
config/webpack.config.prod.js
für die Produktion tun .Wenn Sie nun Ihren React-Server erneut ausführen,
webpack-stats.json
wird 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 .
quelle
npm run build
express
Server 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 denexpress
Server, er hat keine Ahnung von dem Django. Hab ich recht? Ist so etwas wie serverseitiges Rendern mit diesem Ansatz machbar?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.
quelle
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:
quelle
Sie können das folgende Tutorial ausprobieren, es kann Ihnen helfen, vorwärts zu kommen:
React und Django zusammen servieren
quelle
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.
quelle