Wie können Django und ReactJS zusammenarbeiten?

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.

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):

• Doutube- und React API Youtube-Tutorial
• Django mit React einrichten (defekter Link durch archive.org-Link ersetzt)
• Suchen Sie nach anderen Ressourcen mit den oben fettgedruckten Begriffen. Versuchen Sie zuerst "Django React Webpack".

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.

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.

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.

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 .

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']
    }
};

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)

Sie können das folgende Tutorial ausprobieren, es kann Ihnen helfen, vorwärts zu kommen:

React und Django zusammen servieren

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.