Come far lavorare insieme Django e ReactJS?

Nuovo per Django e ancora più recente per ReactJS. Ho esaminato AngularJS e ReactJS, ma ho deciso su ReactJS. Sembrava che stesse tagliando AngularJS per quanto riguarda la popolarità nonostante AngularJS avesse una quota di mercato maggiore, e si dice che ReactJS fosse più veloce nel raccogliere.

A parte quella spazzatura, ho iniziato a seguire un corso su Udemy e dopo alcuni video mi è sembrato importante vedere quanto bene si integri con Django. Questo è quando inevitabilmente ho colpito un muro semplicemente rimettendolo in funzione, che tipo di documentazione è là fuori in modo da non girare le ruote per diverse ore e notti.

Non c'è davvero nessun tutorial o pippacchetto completo , mi sono imbattuto. I pochi che ho incontrato non funzionavano o erano datati, pyreactper esempio.

Un pensiero che avevo era solo di trattare ReactJS completamente separato, ma tenendo in considerazione le classi e gli ID in cui volevo renderizzare i componenti ReactJS. Dopo che i componenti ReactJS separati sono stati compilati in un singolo file ES5, è sufficiente importare quel singolo file in Django modello.

Penso che si guasterà rapidamente quando arriverò al rendering dai modelli Django anche se il Django Rest Framework sembra coinvolto. Neanche abbastanza lontano per vedere come Redux influenza tutto questo.

Ad ogni modo, qualcuno ha un modo chiaro di usare Django e ReactJS che desidera condividere?

Ad ogni modo, la documentazione e le esercitazioni sono abbondanti per AngularJS e Django, quindi è allettante seguire questa strada per iniziare con qualsiasi framework front-end ... Non è il motivo migliore.

Non ho esperienza con Django ma i concetti da front-end a back-end e da front-end framework a framework sono gli stessi.

1. React consumerà la tua API REST di Django . I front-end e i back-end non sono collegati in alcun modo. React invierà richieste HTTP all'API REST per recuperare e impostare i dati.
2. React, con l'aiuto di Webpack (modulo bundler) e Babel (transpiler) , raggrupperà e traspilerà il tuo Javascript in file singoli o multipli che verranno inseriti nella pagina HTML di entrata. Scopri Webpack, Babel, Javascript e React e Redux (un contenitore di stato) . Io credo che non utilizzerà Django di template, ma invece permettono Reagire per rendere il front-end.
3. Durante il rendering di questa pagina, React utilizzerà l'API per recuperare i dati in modo che React possa visualizzarli. La tua comprensione delle richieste HTTP, Javascript (ES6), Promesse, Middleware e React è essenziale qui.

Ecco alcune cose che ho trovato sul Web che dovrebbero aiutare (sulla base di una rapida ricerca su Google):

• Tutorial Youtube di Django e React API
• Configurare Django con React (ha sostituito il collegamento non funzionante con il collegamento archive.org)
• Cerca altre risorse usando i termini in grassetto sopra. Prova prima "Django React Webpack".

Spero che questo ti guidi nella giusta direzione! In bocca al lupo! Spero che altri che siano specializzati in Django possano aggiungere alla mia risposta.

Sento il tuo dolore mentre anche io sto iniziando a far lavorare insieme Django e React.js. Ho fatto un paio di progetti Django e penso che React.js sia una grande partita per Django. Tuttavia, può essere intimidatorio iniziare. Siamo in piedi sulle spalle dei giganti qui;)

Ecco come penso, tutto funziona insieme (quadro generale, per favore qualcuno mi corregga se sbaglio).

• Django e il suo database (preferisco Postgres) su un lato (backend)
• Django Rest-framework che fornisce l'interfaccia al mondo esterno (ad es. App per dispositivi mobili, React e simili)
• Reactjs, Nodejs, Webpack, Redux (o forse MobX?) Dall'altro lato (frontend)

La comunicazione tra Django e "il frontend" avviene tramite il framework Rest. Assicurati di ottenere l'autorizzazione e le autorizzazioni per il framework Rest in atto.

Ho trovato un buon modello di caldaia esattamente per questo scenario e funziona immediatamente. Segui il readme https://github.com/scottwoodall/django-react-template e una volta terminato, hai un bel progetto Django Reactjs in esecuzione. Questo non è affatto destinato alla produzione, ma piuttosto come un modo per scavare e vedere come le cose sono collegate e funzionanti!

Un piccolo cambiamento che vorrei suggerire è questo: segui le istruzioni di installazione MA prima di arrivare al secondo passaggio per impostare il backend (Django qui https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ), modifica il file dei requisiti per l'installazione.

Troverai il file nel tuo progetto in /backend/requirements/common.pip Sostituisci il suo contenuto con questo

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

questo ti dà l'ultima versione stabile per Django e il suo framework Rest.

Spero che aiuti.

Come altri ti hanno risposto, se stai creando un nuovo progetto, puoi separare frontend e backend e utilizzare qualsiasi plug-in di riposo django per creare api di riposo per la tua applicazione di frontend. Questo è nel mondo ideale.

Se si dispone di un progetto con il modello di django già in atto, è necessario caricare il rendering di Rea Dom nella pagina in cui si desidera caricare l'applicazione. Nel mio caso avevo già django-pipeline e ho appena aggiunto l'estensione browserify. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Come nell'esempio, ho caricato l'app usando django-pipeline:

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

" Entry-point.browserify.js " può essere un file ES6 che carica l'app di reazione nel modello:

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')
);

Nel modello django, ora puoi caricare facilmente la tua app:

{% 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>

Il vantaggio dell'utilizzo di django-pipeline è che le statistiche vengono elaborate durante il collectstatic.

Il primo approccio è la creazione di app Django e React separate. Django sarà responsabile del servizio dell'API creata utilizzando il framework REST Django e React utilizzerà queste API utilizzando il client Axios o l'API di recupero del browser. Dovrai avere due server, sia in sviluppo che in produzione, uno per Django (API REST) ​​e l'altro per React (per servire file statici) .

Il secondo approccio è diverso in cui verranno accoppiate le app frontend e backend . Fondamentalmente userete Django sia per servire il frontend React sia per esporre l'API REST. Quindi dovrai integrare React e Webpack con Django, questi sono i passaggi che puoi seguire per farlo

Per prima cosa genera il tuo progetto Django, quindi all'interno di questa directory del progetto genera la tua applicazione React usando l'interfaccia della riga di comando React

Per il progetto Django installare django-webpack-loader con pip:

pip install django-webpack-loader

Quindi aggiungi l'app alle app installate e configurala settings.pyaggiungendo il seguente oggetto

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

Quindi aggiungi un modello Django che verrà utilizzato per montare l'applicazione React e sarà servito da Django

{ % 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>

Quindi aggiungi un URL urls.pyper pubblicare questo modello

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")),

]

Se avvii entrambi i server Django e React a questo punto, otterrai un errore Django che dice il webpack-stats.json che non esiste. Quindi è necessario rendere l'applicazione React in grado di generare il file stats.

Vai avanti e naviga all'interno della tua app React, quindi installa webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Quindi espelli la configurazione del tuo Webpack e vai su config/webpack.config.dev.jsAggiungi

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

Questo aggiunge il plug-in BundleTracker a Webpack e gli indica di generarewebpack-stats.json nella cartella principale.

Assicurati di fare lo stesso anche config/webpack.config.prod.jsper la produzione.

Ora, se riesegui il tuo server React, questo webpack-stats.jsonverrà generato e Django sarà in grado di consumarlo per trovare informazioni sui bundle Webpack generati dal server di sviluppo React.

Ci sono altre cose da fare. Puoi trovare ulteriori informazioni da questo tutorial .

Una nota per chiunque provenga da un backend o da un ruolo basato su Django e cerchi di lavorare con ReactJS: nessuno riesce a configurare l'ambiente ReactJS con successo al primo tentativo :)

C'è un blog di Owais Lone che è disponibile su http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; tuttavia la sintassi sulla configurazione di Webpack è obsoleta.

Ti suggerisco di seguire i passaggi indicati nel blog e sostituire il file di configurazione del webpack con il contenuto di seguito. Tuttavia, se non conosci Django e React, masticalo uno alla volta a causa della curva di apprendimento, probabilmente ti sentirai frustrato.

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

La risposta accettata mi porta a credere che il disaccoppiamento del backend Django e React Frontend sia la strada giusta da percorrere, qualunque cosa accada. In effetti ci sono approcci in cui React e Django sono accoppiati, che possono essere più adatti in situazioni particolari.

Questo tutorial spiega bene questo. In particolare:

Vedo i seguenti schemi (che sono comuni a quasi tutti i framework Web):

-React nella sua app Django "frontend": carica un singolo modello HTML e lascia che React gestisca il frontend (difficoltà: media)

-Django REST come API standalone + React come SPA standalone (difficoltà: difficile, implica JWT per l'autenticazione)

-Mescola e abbina: mini app React all'interno dei modelli Django (difficoltà: semplice)

Puoi provare il seguente tutorial, può aiutarti ad andare avanti:

Servire React e Django insieme

So che è in ritardo di un paio d'anni, ma lo sto lanciando per la prossima persona in questo viaggio.

GraphQL è stato utile e molto più semplice rispetto a DjangoRESTFramework. È anche più flessibile in termini di risposte che ricevi. Ottieni ciò che chiedi e non devi filtrare la risposta per ottenere ciò che desideri.

Puoi usare Graphene Django sul lato server e React + Apollo / Relay ... Puoi esaminarlo perché non è una tua domanda.