Comment faire fonctionner Django et ReactJS ensemble?


138

Nouveau sur Django et encore plus récent sur ReactJS. J'ai étudié AngularJS et ReactJS, mais j'ai choisi ReactJS. Il semblait qu'il était en train de devancer AngularJS en termes de popularité malgré qu'AngularJS ait plus de part de marché, et ReactJS serait plus rapide à récupérer.

Tout cela mis à part, j'ai commencé à suivre un cours sur Udemy et après quelques vidéos, il m'a semblé important de voir à quel point il s'intègre bien à Django. C'est à ce moment-là que je heurte inévitablement un mur juste pour le faire fonctionner, quel genre de documentation existe-t-il pour que je ne fasse pas tourner les roues pendant plusieurs heures et nuits.

Il n'y a vraiment pas de didacticiels ou de pippackages complets que j'ai rencontrés. Les rares que j'ai rencontrés ne fonctionnaient pas ou étaient datés, pyreactpar exemple.

Une pensée que j'avais était juste de traiter ReactJS complètement séparé, mais en tenant compte des classes et des ID dans lesquels je veux que les composants ReactJS soient rendus. Une fois que les composants ReactJS séparés sont compilés dans un seul fichier ES5, importez simplement ce fichier unique dans Django modèle.

Je pense que cela s'effondrera rapidement lorsque j'arriverai au rendu à partir de modèles Django, bien que Django Rest Framework semble impliqué. Pas même assez loin pour voir comment Redux affecte tout cela.

Quoi qu'il en soit, quelqu'un a une façon claire d'utiliser Django et ReactJS qu'il souhaite partager?

Quoi qu'il en soit, la documentation et les didacticiels sont abondants pour AngularJS et Django, il est donc tentant de suivre cette voie pour démarrer avec n'importe quel framework frontal ... Ce n'est pas la meilleure raison.


2
J'avais des curiosités similaires et j'ai configuré un exemple d' application pour react + webpack + django - le repo propose également des liens vers des outils et des articles connexes qui pourraient être utiles.
danwild

Réponses:


142

Je n'ai pas d'expérience avec Django mais les concepts du front-end au back-end et du framework front-end au framework sont les mêmes.

  1. React consommera votre API REST Django . Les frontaux et les back-ends ne sont en aucun cas connectés. React fera des requêtes HTTP à votre API REST afin de récupérer et de définir des données.
  2. React, avec l'aide de Webpack (module bundler) et Babel (transpiler) , regroupera et transpilera votre Javascript en un ou plusieurs fichiers qui seront placés dans la page HTML d'entrée. Apprenez Webpack, Babel, Javascript et React et Redux (un conteneur d'état) . Je pense que vous n'utiliserez pas le modèle Django, mais autoriserez plutôt React à rendre le front-end.
  3. Au fur et à mesure du rendu de cette page, React utilisera l'API pour récupérer les données afin que React puisse les rendre. Votre compréhension des requêtes HTTP, Javascript (ES6), Promises, Middleware et React est ici essentielle.

Voici quelques éléments que j'ai trouvés sur le Web qui devraient vous aider (sur la base d'une recherche rapide sur Google):

J'espère que cela vous orientera dans la bonne direction! Bonne chance! J'espère que d'autres spécialistes de Django pourront ajouter à ma réponse.


Je vais consulter le didacticiel YouTube. J'ai déjà parcouru ces deux didacticiels. L'article 1 n'a pas fonctionné bien que je l'ai suivi de près. (Copié et collé la plupart du code). C'est sur un projet existant, mais j'essaierai un nouveau. L'article 2 utilisait des packages obsolètes et n'avait pas été mis à jour récemment. Quoi qu'il en soit, en lisant plus sur AngularJS et Django, il semble que l'API Django REST est toujours utilisée. Je suppose que je cherchais une solution sans ajouter cette dimension, mais cela semble inévitable.
eox.dev

Ok, j'ai mis à jour un peu ma réponse en supprimant l'article obsolète. Il a plus de 2 ans, il fallait donc absolument l'enlever. Les puces numérotées aident-elles? Qu'est-ce que vous avez du mal à comprendre?
KA01 du

1
Après avoir essayé le deuxième lien plusieurs fois sur des projets existants et de nouveaux projets, je les ai au moins fait parler. La ligne {% render_bundle 'main' %}est fausse et devrait l'être {% render_bundle "main" %}.
eox.dev

1
Le deuxième lien ne fonctionne pas. Veuillez mettre à jour le lien.
Aditya Mishra

1
Je remplacerais ce 2ème lien mort par cet article, j'ai suivi cela et cela fonctionne principalement .. medium.com/labcodes/configuring-django-with-react-4c599d1eae63
Doug F

36

Je ressens votre douleur alors que moi aussi je commence à faire travailler Django et React.js ensemble. J'ai fait quelques projets Django, et je pense que React.js est un excellent match pour Django. Cependant, il peut être intimidant de commencer. Nous nous tenons sur les épaules de géants ici;)

Voici comment je pense, tout fonctionne ensemble (vue d'ensemble, veuillez me corriger si je me trompe).

  • Django et sa base de données (je préfère Postgres) d'un côté (backend)
  • Django Rest-framework fournissant l'interface avec le monde extérieur (c'est-à-dire les applications mobiles et React et autres)
  • Reactjs, Nodejs, Webpack, Redux (ou peut-être MobX?) De l'autre côté (frontend)

La communication entre Django et «le frontend» se fait via le framework Rest. Assurez-vous d'avoir votre autorisation et vos autorisations pour le cadre Rest en place.

J'ai trouvé un bon modèle de chaudière pour exactement ce scénario et cela fonctionne hors de la boîte. Suivez simplement le readme https://github.com/scottwoodall/django-react-template et une fois que vous avez terminé, vous avez un joli projet Django Reactjs en cours d'exécution. Ce n'est en aucun cas destiné à la production, mais plutôt comme un moyen pour vous de creuser et de voir comment les choses sont connectées et fonctionnent!

Un petit changement que je voudrais suggérer est le suivant: Suivez les instructions de configuration MAIS avant d'arriver à la 2ème étape pour configurer le backend (Django ici https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ), modifiez le fichier des exigences pour l'installation.

Vous trouverez le fichier dans votre projet à /backend/requirements/common.pip Remplacez son contenu par ceci

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

cela vous donne la dernière version stable pour Django et son framework Rest.

J'espère que cela aide.


4
Un an plus tard, je suis passé à VUE.js ( vuejs.org ). Je l'ai fait fonctionner avec les templates Django et il communiquera à la base de données via le Django Rest Framework. C'est rapide et léger (~ 20kb)
imolitor

17

Comme d'autres vous ont répondu, si vous créez un nouveau projet, vous pouvez séparer le frontend et le backend et utiliser n'importe quel plugin django rest pour créer une API de repos pour votre application frontend. C'est dans le monde idéal.

Si vous avez un projet avec le modèle django déjà en place, vous devez charger votre rendu react dom dans la page que vous souhaitez charger l'application. Dans mon cas, j'avais déjà django-pipeline et je viens d'ajouter l'extension browserify. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Comme dans l'exemple, j'ai chargé l'application en utilisant django-pipeline:

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

Votre " entry-point.browserify.js " peut être un fichier ES6 qui charge votre application react dans le modèle:

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

Dans votre modèle django, vous pouvez maintenant charger facilement votre application:

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

L'avantage d'utiliser django-pipeline est que la statique est traitée pendant le collectstatic.


10

La première approche consiste à créer des applications Django et React séparées. Django sera chargé de servir l'API construite à l'aide du framework Django REST et React consommera ces API à l'aide du client Axios ou de l'API fetch du navigateur. Vous aurez besoin de deux serveurs, à la fois en développement et en production, un pour Django (API REST) ​​et l'autre pour React (pour servir les fichiers statiques) .

La deuxième approche est différente, les applications frontales et backend seront couplées . En gros, vous utiliserez Django à la fois pour servir le frontend React et pour exposer l'API REST. Vous devrez donc intégrer React et Webpack avec Django, voici les étapes que vous pouvez suivre pour le faire

Générez d'abord votre projet Django puis dans ce répertoire de projet générez votre application React en utilisant la CLI React

Pour le projet Django, installez django-webpack-loader avec pip:

pip install django-webpack-loader

Ensuite, ajoutez l'application aux applications installées et configurez-la en settings.pyajoutant l'objet suivant

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

Ajoutez ensuite un template Django qui sera utilisé pour monter l'application React et sera servi par 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>

Ajoutez ensuite une URL urls.pypour diffuser ce modèle

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

]

Si vous démarrez les serveurs Django et React à ce stade, vous obtiendrez une erreur Django indiquant que le fichier webpack-stats.jsonn'existe pas. Vous devez donc ensuite rendre votre application React capable de générer le fichier de statistiques.

Allez-y et naviguez dans votre application React puis installez webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Puis éjectez votre configuration Webpack et allez à config/webpack.config.dev.jspuis ajoutez

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

module.exports = {

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

Cela ajoute le plugin BundleTracker à Webpack et lui demande de générer webpack-stats.jsondans le dossier parent.

Assurez-vous également de faire de même config/webpack.config.prod.jspour la production.

Maintenant, si vous relancez votre serveur React, le webpack-stats.jsonsera généré et Django pourra le consommer pour trouver des informations sur les bundles Webpack générés par le serveur de développement React.

Il y a d'autres choses à faire. Vous pouvez trouver plus d'informations dans ce tutoriel .


Avez-vous besoin d'un serveur webpack-dev-server fonctionnant dans une approche couplée? Parce que dans le tutoriel, il l'exécute. D'après ce que je comprends, il doit être exécuté car il est utilisé par django pour maintenir les bundles à jour. Est-ce correct? Si tel est le cas, comment cela fonctionnerait-il en production, c'est-à-dire aurais-je encore besoin de deux serveurs?
pavlee

1
En développement, vous aurez besoin à la fois du serveur de développement Django et du serveur de développement React / Webpack en cours d'exécution. En production, vous n'avez besoin que d'un serveur (Django) en cours d'exécution car Django se chargera de servir les fichiers construits générés parnpm run build
Ahmed Bouchefra

Merci pour la clarification.
pavlee

Pouvez-vous élaborer sur la première approche? D'après ce que je comprends, il contiendrait un expressserveur en cours d'exécution qui servira des fichiers JS statiques React et que les fichiers JS feraient une requête ajax pour récupérer les données du serveur Django. Le navigateur frappe d'abord le expressserveur, il n'a aucune idée de celui de Django. Ai-je raison? Est-ce que quelque chose comme le rendu côté serveur est faisable avec cette approche?
yadav_vi

Vous pouvez simplement utiliser un hôte statique et un CDN pour vos fichiers statiques. Par exemple, vous pouvez utiliser les pages GitHub pour héberger l'application React et CloudFlare en tant que CDN. Pour le rendu côté serveur, vous avez besoin d'une autre configuration comme l'utilisation d'un serveur Express MAIS il existe également des services d'hébergement statique qui offrent un rendu côté serveur comme Netlify.
Ahmed Bouchefra

10

Une note pour toute personne venant d'un rôle backend ou basé sur Django et essayant de travailler avec ReactJS: Personne ne parvient à configurer l'environnement ReactJS avec succès du premier coup :)

Il existe un blog d'Owais Lone disponible sur http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; cependant, la syntaxe de la configuration de Webpack est bien dépassée.

Je vous suggère de suivre les étapes mentionnées dans le blog et de remplacer le fichier de configuration du webpack par le contenu ci-dessous. Cependant, si vous êtes nouveau à la fois dans Django et React, mâchez un à la fois à cause de la courbe d'apprentissage, vous serez probablement frustré.

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 note au début est vraiment encourageante!
Mohammed Shareef C

7

La réponse acceptée me porte à croire que le découplage du backend Django et de React Frontend est la bonne façon de procéder quoi qu'il arrive. En fait, il existe des approches dans lesquelles React et Django sont couplés, ce qui peut être mieux adapté dans des situations particulières.

Ce tutoriel explique bien cela. En particulier:

Je vois les modèles suivants (qui sont communs à presque tous les frameworks Web):

-Réagir dans sa propre application Django «frontend»: charger un seul template HTML et laisser React gérer le frontend (difficulté: moyenne)

-Django REST en tant qu'API autonome + React en tant que SPA autonome (difficulté: difficile, il implique JWT pour l'authentification)

-Mixer et faire correspondre: mini-applications React dans les modèles Django (difficulté: simple)



1

Je sais que c'est quelques années de retard, mais je le mets là-bas pour la prochaine personne de ce voyage.

GraphQL a été utile et beaucoup plus facile par rapport à DjangoRESTFramework. Il est également plus flexible en termes de réponses que vous obtenez. Vous obtenez ce que vous demandez et vous n'avez pas à filtrer la réponse pour obtenir ce que vous voulez.

Vous pouvez utiliser Graphene Django côté serveur et React + Apollo / Relay ... Vous pouvez vous pencher dessus car ce n'est pas votre question.


Graphene et React + Apollo est un excellent stack! Un peu plus de Python à écrire que de DRF, mais une énorme réduction du code JS, d'autant plus qu'Apollo élimine le besoin de redux.
John Ottenlips le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.