web-dev-qa-db-fra.com

ReactJS avec Django - utilisation réelle

Je plaisantais un peu avec React et je l'aime bien. C'est beaucoup plus verbeux que Angular (ng-repeat avec | filter est inestimable) mais ok .

Le problème, c’est que je suis supposé utiliser React avec Django templates. Si je mets tout le javascript dans les templates, le Balisage "HTML".

L'implémentation Angular était assez transparente. Je viens d'insérer quelques attributs dans la classe de formulaire template/Django, puis d'écrire javascript dans un fichier séparé. Incluez ce fichier et c'est terminé.

Comment "utiliser" réagir? Quelle est la bonne façon?

Merci d'avance!

djangoangularjsreactjs
75
n1_

Puisque vous voulez utiliser les templates React avec Django, je suppose que le code React n'affectera que des parties spécifiques de votre page. Les explications suivantes sont écrites sur la base de cette hypothèse:

Tout d'abord, il n'est pas nécessaire de mettre tout le code JS dans le modèle - en fait, ce serait un gâchis.

Vous pouvez créer un processus de construction distinct basé sur JS à l'aide de Webpack ( consultez ce guide ). Cela améliore les capacités de votre code côté client, vous permettant d’utiliser des modules CommonJS dans le navigateur, que vous pouvez extraire directement de npm, y compris React .

Webpack générera à son tour un ensemble (ou plusieurs ensembles, selon la nature de votre application et la configuration de Webpack) que vous devrez inclure dans vos modèles Django via les balises <script> habituel.

Vous devez maintenant effectuer l'appel React.render() pour rendre votre application React quelque part dans la présentation de page existante. Vous devrez utiliser un élément HTML vide avec un identifiant/nom de classe spécifique en tant que point de montage de l'application.

Mais voici la mise en garde: vous ne pouvez pas accéder aux modules CommonJS directement à partir du navigateur ou des modèles Django. Alors soit vous,

  • exposer React et votre application à l'objet window, ou
  • créez un module avec du code collant pour gérer l'initialisation de l'application et exposez cette méthode à l'objet window.

Dans tous les cas, vous devrez appeler le code d'initialisation directement à partir des modèles (extraire n exemple de code de collage , et le appel à l'initialisation de l'application ).

Cette étape d'initialisation vous permet également de transmettre les variables disponibles dans Django modèles au code JS.

Le modèle final Django ressemblera à ceci:

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

Et le code de la colle:

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

Je sais que tout cela peut sembler écrasant au début (encore plus par rapport aux quelques étapes que vous avez eues avec Angular), mais croyez-moi, cela rapportera à long terme.

Donc, résumant:

  1. Écrire le code React dans des fichiers JS distincts
  2. Utilisez Webpack (en utilisant les modules CommonJS) pour regrouper votre code React
  3. Inclure le paquet dans vos modèles Django
  4. Rendez le code React à l'aide du code de collage dans les modèles Django
83
julen

Et si vous considériez le front-end et le back-end comme deux entités différentes et indépendantes? Je veux dire ce qui suit:

  1. Django ne devrait être qu'une API et répondre avec des données json
  2. l'interface ne doit contenir que des fichiers statiques servis par nginx
  3. Vous devrez peut-être faire face à CORS afin de permettre la communication entre les deux. Une option consisterait à autoriser les requêtes de contrôle en amont à partir de votre interface et l'autre option consisterait à configurer un proxy nginx. Il s’agit d’une question distincte et vous devriez la rechercher si vous avez besoin de plus de détails.

Je pense que cette architecture vous permet de garder les choses séparées et de ne pas gérer leur intégration. Les choses sont déjà trop compliquées sur l'écosystème front-end/React, je pense donc que la simplicité de la configuration doit être prise en compte.

Je serais également intéressé de savoir comment un processus de déploiement rechercherait cette architecture (quels outils utiliser?), Veuillez donc ajouter des commentaires si vous avez des suggestions et je mettrai à jour la réponse en conséquence pour fournir des informations utiles aux futurs lecteurs.

9
Tiberiu Maxim

J'ai mis en place quelque chose de similaire à ce que vous demandez. Mon front-end est entièrement sur reactjs qui est compilé avec webpack et mes modèles sont créés dans Django.

Donc je fais ce qui suit: -

  1. Utilisez react-router et réagissez pour créer du code .jsx/.js.
  2. Compiler en utilisant webpack.
  3. Utilisez Django-webpack

Donc, Django-webpack fonctionne vraiment bien et vous aide à isoler votre compilation en dehors de Django pour que vous puissiez travailler de manière agréable et évolutive.

4
Harkirat Saluja