web-dev-qa-db-fra.com

Comment faire pour que Django et ReactJS travaillent ensemble?

Nouveau sur Django et encore plus récent sur ReactJS. Je me suis penché sur AngularJS et ReactJS, mais je me suis décidé sur ReactJS. Il semblait que AngularJS devançait peu à peu sa popularité, alors qu’AngularJS détenait une plus grande part de marché et ReactJS serait plus rapide à acquérir.

Mis à part cette ordure, 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égrait bien à Django. C'est à ce moment-là que je me heurte inévitablement à un mur, quel genre de documentation existe pour que je ne fasse pas tourner mes roues avant plusieurs heures et plusieurs nuits.

Il n'y a pas vraiment de tutoriels complets, ni de packages pip que j'ai rencontrés. Les quelques personnes que je rencontrais ne fonctionnaient pas ou étaient datées, pyreact par exemple.

Je pensais juste que je devais traiter ReactJS de manière totalement distincte, tout en prenant en compte les classes et les identifiants pour lesquels les composants ReactJS devaient être rendus. Une fois que les composants ReactJS distincts ont été compilés dans un fichier ES5 unique, importez ce fichier unique dans le fichier _.Django modèle.

Je pense que cela va rapidement échouer lorsque j'arriverai à rendre les modèles Django, bien que le cadre Django Rest ressemble à un élément impliqué. Pas même assez loin pour voir comment Redux affecte tout cela.

Quoi qu'il en soit, tout le monde sait utiliser Django et ReactJS de manière claire.

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 se lancer dans n'importe quel framework front-end ... Ce n'est pas la meilleure des raisons.

djangoreactjs
120
sockpuppet

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 API Django REST _. Les frontaux et les arrières ne sont connectés d'aucune façon. React fera des requêtes HTTP à votre REST API afin de récupérer et de définir les données.
  2. React, à l’aide de Webpack (ensemble de modules) et de Babel (transpiler) , regroupera et transposera votre code 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 Django templating mais autoriserez plutôt React à rendre le frontal.
  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 restituer. Votre compréhension des requêtes HTTP, Javascript (ES6), Promises, Middleware et React est essentielle ici.

Voici quelques informations que j'ai trouvées sur le Web et que devrait aider (sur la base d'une recherche rapide dans Google):

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

118
KA01

Je ressens votre douleur alors que moi aussi je commence à faire travailler Django et React.js ensemble. A fait quelques Django projets, et je pense que React.js est un bon match pour 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 (grande image, s'il vous plaît quelqu'un corrige-moi 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 au monde extérieur (applications mobiles et React, etc.)
  • Reactjs, Nodejs, Webpack, Redux (ou peut-être MobX?) De l'autre côté (frontend)

La communication entre Django et 'l'interface' se fait via le cadre Rest. Assurez-vous d'obtenir votre autorisation et vos autorisations pour la structure Rest en place.

J'ai trouvé un bon modèle de chaudière pour ce scénario et il fonctionne immédiatement. Suivez simplement le readme https://github.com/scottwoodall/Django-react-template et une fois que vous avez terminé, vous avez un joli projet Nice Django Reactjs en cours d'exécution. En aucun cas, ceci est destiné à la production, mais plutôt à 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 2e étape pour configurer le backend (Django ici https://github.com/scottwoodall/Django-react-template /blob/master/backend/README.md ), modifiez le fichier de configuration requise pour l’installation.

Vous trouverez le fichier dans votre projet sous /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 ça aide.

33
imolitor

Si d'autres personnes vous ont répondu, si vous créez un nouveau projet, vous pouvez séparer frontend et backend et utiliser n'importe quel plugin Django rest pour créer une api restante pour votre application frontale. 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 de rendu dans la page où vous souhaitez charger l'application. Dans mon cas, j'avais déjà Django-pipeline et je venais d'ajouter l'extension browserify. ( https://github.com/j0hnsmith/Django-pipeline-browserify )

Comme dans l'exemple, j'ai chargé l'application à l'aide de 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 de réaction 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 d'utiliser Django-pipeline est que les statiques sont traitées pendant la collectstatic.

16
Karim N Gorjux

La première approche consiste à créer des applications Django et React distinctes. Django sera responsable du service de l'API construite à l'aide du framework Django REST et de React à l'aide du client Axios ou du navigateur. récupérer l'API. Vous aurez besoin de deux serveurs, tant en développement qu'en production, l'un pour Django (API REST) ​​et l'autre pour React (pour servir des fichiers statiques) .

La seconde approche est différente ; les applications frontend et backend seront couplées . En gros, vous utiliserez Django pour servir à la fois le React frontend et pour exposer l'API REST. Vous aurez donc besoin d'intégrer React et Webpack avec Django. Voici les étapes à suivre pour le faire.

Générez d’abord votre projet Django puis, à l’intérieur de ce répertoire de projet, générez votre application React à l’aide de la CLI React

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

pip install Django-webpack-loader

Ajoutez ensuite l'application aux applications installées et configurez-la 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 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 webpack-stats.json n'existe pas. Ensuite, vous devez 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 accédez à config/webpack.config.dev.js puis ajoutez

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

module.exports = {

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

Ceci ajoute le plug-in BundleTracker à Webpack et lui demande de générer webpack-stats.json dans le dossier parent.

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

Maintenant, si vous relancez votre serveur React, le webpack-stats.json sera généré et Django pourra le consommer pour trouver des informations sur les ensembles Webpack générés par React serveur dev.

Il y a d'autres choses à faire. Vous pouvez trouver plus d'informations à partir de ceci tutoriel .

10
Ahmed Bouchefra

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

Il y a un blog de Owais Lone qui est disponible sur http://owaislone.org/blog/webpack-plus-reactjs-and-Django/ ; Cependant, la syntaxe de la configuration Webpack est 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 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']
    }
};
8
IVI

Vous pouvez essayer le tutoriel suivant, cela peut vous aider à avancer:

Servir React et Django ensemble

0
Taohidul Islam

La réponse acceptée me porte à croire que le découplage Django backend et 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é à 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éagissez dans son propre "interface" Django app: chargez un seul modèle HTML et laissez React gérer l'interface (difficulté: moyenne)

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

-Mix et match: mini React applications dans Django modèles (difficulté: simple)

0
Rexcirus