Comment faire fonctionner Django et ReactJS ensemble ?

Question

Nouveau à Django et encore plus nouveau à ReactJS. J'ai étudié AngularJS et ReactJS, mais j'ai opté pour ReactJS. Il semble qu'AngularJS soit plus populaire que ReactJS, même si AngularJS a une plus grande part de marché, et ReactJS est réputé plus rapide à mettre en œuvre.

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

Il n'y a pas vraiment de tutoriels complets, ou pip paquets, je suis tombé sur. Les rares sur lesquels je suis tombé ne fonctionnaient pas ou dataient, pyreact par exemple.

Une idée que j'ai eue était de traiter ReactJS de manière complètement séparée, 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 en un seul fichier ES5, il suffit d'importer ce fichier unique dans le modèle Django.

Je pense que cela va rapidement s'effondrer lorsque j'arriverai au rendu à partir de modèles Django, bien que le Django Rest Framework semble être impliqué. Je ne suis même pas encore assez loin pour voir comment Redux affecte tout cela.

Quoi qu'il en soit, quelqu'un a-t-il 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, et il est donc tentant de suivre cette voie pour commencer à utiliser n'importe quel framework frontal... Ce n'est pas la meilleure raison.

Answer 1

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

1. React consommera votre Django REST API . Les front-ends et back-ends ne sont pas connectés de quelque manière que ce soit. React effectuera des requêtes HTTP vers votre API REST afin de récupérer et de définir des données.
2. React, avec l'aide de Webpack (module bundler) & Babel (transpiler) regroupera et transpilera votre Javascript en un ou plusieurs fichiers qui seront placés dans la page HTML d'entrée. Apprendre Webpack, Babel, Javascript, React et Redux (un conteneur d'état). . I croire vous n'utiliserez pas le templating de Django mais laisserez React rendre le front-end.
3. Lorsque cette page sera rendue, React utilisera l'API pour récupérer les données afin que React puisse les rendre. Votre compréhension de Demandes HTTP, Javascript (ES6), Promesses, Middleware et React est essentiel ici.

Voici quelques trucs que j'ai trouvés sur le web qui devrait aide (d'après une recherche rapide sur Google) :

• Tutoriel Youtube sur 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 guidera dans la bonne direction ! Bonne chance ! J'espère que d'autres spécialistes de Django pourront compléter ma réponse.

Answer 2

Je ressens votre douleur car moi aussi, je commence à faire fonctionner Django et React.js ensemble. J'ai réalisé quelques projets Django, et je pense que React.js est un excellent complément à Django. Cependant, il peut être intimidant de se lancer. Nous nous tenons sur les épaules de géants ici ;)

Voici comment je pense, tout fonctionne ensemble (image globale, s'il vous plaît quelqu'un 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, 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 mis en place les autorisations et permissions pour le framework Rest.

J'ai trouvé un bon modèle de chaudière pour exactement ce scénario et il fonctionne sans problème. Il suffit de suivre 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. Il ne s'agit en aucun cas d'un projet de production, mais plutôt d'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 d'installation 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 la configuration.

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

vous obtiendrez la dernière version stable de Django et de son cadre Rest.

J'espère que cela vous aidera.

Answer 3

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 rest pour votre application frontend. Ceci est dans un monde idéal.

Si vous avez un projet avec le templating django déjà en place, alors vous devez charger votre react dom render dans la page où vous voulez 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 " point d'entrée.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 votre application facilement :

{% 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 de l'utilisation de django-pipeline est que les statiques sont traitées au cours de l'exécution de l'opération. collectstatic .

Answer 4

La première approche consiste à construire des applications Django et React distinctes. Django sera chargé de servir l'API construite à l'aide du cadre REST de Django et React consommera ces API à l'aide du client Axios ou de l'API de récupération du navigateur. Vous devrez disposer de deux serveurs, en développement et en production, l'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 dorsales seront couplées. . En fait, vous utiliserez Django pour servir le frontend React et pour exposer l'API REST. Vous aurez donc besoin d'intégrer React et Webpack avec Django, voici les étapes que vous pouvez suivre pour faire cela

Tout d'abord, générez votre projet Django puis, à l'intérieur du répertoire du projet, générez votre application React en utilisant le React CLI.

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

pip install django-webpack-loader

Ensuite, ajouter l'application aux applications installées et la configurer dans settings.py en ajoutant l'objet suivant

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

Ajoutez ensuite un modèle Django qui sera utilisé pour monter l'application React et qui 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 dans urls.py pour servir 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.json n'existe pas. Vous devez donc ensuite faire en sorte que votre application React soit 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

Ensuite, éjectez votre configuration Webpack et allez à config/webpack.config.dev.js puis ajoutez

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

module.exports = {

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

Cet ajout BundleTracker au plugin Webpack et lui demander de générer webpack-stats.json dans le dossier parent.

Veillez également à faire de même dans config/webpack.config.prod.js pour la production.

Maintenant, si vous exécutez à nouveau votre serveur React, la fonction webpack-stats.json sera généré et Django pourra le consommer pour trouver des informations sur les bundles Webpack générés par le serveur React dev.

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

Answer 5

Une note pour tous ceux qui viennent d'un rôle backend ou basé sur Django et qui essaient de travailler avec ReactJS : personne ne parvient à configurer l'environnement ReactJS avec succès du premier coup :)

Il y a un blog d'Owais Lone qui est disponible à l'adresse suivante http://owaislone.org/blog/webpack-plus-reactjs-and-django/ Cependant, la syntaxe de la configuration de Webpack est largement dépassée.

Je vous suggère de suivre les étapes mentionnées dans le blog et de remplacer le fichier de configuration de webpack par le contenu ci-dessous. Cependant, si vous êtes nouveau à la fois à Django et à React, mâchez un à la fois en raison 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']
    }
};