Comment faire fonctionner Django et ReactJS ensemble?

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.

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

• Tutoriel Youtube Django et React API
• Configurer Django avec React (remplacement du lien cassé par le lien archive.org)
• Recherchez d'autres ressources en utilisant les termes en gras ci-dessus. Essayez d'abord "Django React Webpack".

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 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.

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.

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 .

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

Vous pouvez essayer le didacticiel suivant, il peut vous aider à avancer:

Servir React et Django ensemble

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.