web-dev-qa-db-fra.com

Ajout de React dans un projet Django

Je suis un développeur Django qui commence à peine à ajouter React à une page de mon application et à en profiter au maximum. (C'est une application Django normale avec une page d'accueil, une page de sujet, etc., mais aussi une page "graphique" avec un graphique interactif, et je souhaite construire la partie interactive dans React.)

Le problème, c’est que j’ai commencé avec le le kit de démarrage React téléchargeable et je ne sais pas comment faire les choses de la bonne façon, et c’est compliqué d’utiliser Django pour servir mon projet (tous les tutoriels semblent supposons que vous utilisez noeud, ce que je ne suis pas). 

Pour l'instant, j'ai juste ceci dans mon modèle Django:

<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>

Et myapp.js a tout le code de réaction. Je suis conscient que ce n'est pas vraiment la façon moderne de faire les choses JS adulte. 

Maintenant, je veux utiliser React Bootstrap , mais il semble que le seul moyen sensé de le faire est avec npm. Il est donc temps de passer à l'action, mais je ne sais pas trop comment. 

J'ai exécuté npm install react et npm install react-bootstrap à partir de mon répertoire static/js dans Django. Cela a créé un dossier node_modules avec divers fichiers à l'intérieur. 

Donc, trois questions d'un débutant confus: 

  1. Où dois-je mettre mon code React pour fonctionner avec ces modules npm (dois-je utiliser var React = require('react')?
  2. Dois-je compiler ce code d'une manière ou d'une autre (en utilisant webpack?)
  3. Comment puis-je intégrer cela avec Django? Devrais-je tout compiler en myapp.js et l'inclure simplement dans mon modèle HTML?
djangoreactjs
23
Richard

Je suis également en train de faire la même chose en ce moment: abandonner les balises de script HTML incorporées pour créer require land. Voici le tutoriel que je suis en train de suivre , et voici mon système de fichiers jusqu'à présent. Je le fais dans Node, mais cela ne devrait pas être si différent pour un projet Django, car le code de l'interface React est découplé de tout système autre que les URL de l'API.

Votre dossier node_modules contient react-bootstrap. Dans votre myapp.js, utilisez la require('react-bootstrap') pour charger la bibliothèque contenue dans votre dossier node_modules.

  1. Où dois-je mettre mon code React pour qu'il fonctionne avec ces modules npm (dois-je utiliser var React = require ('react')?

Vous pouvez mettre le code n'importe où. Si votre système de fichiers ressemble à ceci:

project/
  react/
    myapp.js
  node_modules/
    react source code
    react bootstrap stuff

Ensuite, vous pouvez simplement faire var React = require('react'); dans myapp.js.

  1. Dois-je compiler ce code d'une manière ou d'une autre (en utilisant webpack?)

Oui, je consulterais le didacticiel Webpack que j'ai lié plus tôt. Il devrait expliquer comment compiler tout votre code React en un seul bundle.js. Here est également un autre bon tutoriel. Ce fichier bundle.js contient tout le code source de votre requires. Donc, si votre myapp.js ressemble à quelque chose comme

var React = require('react');
var ReactBootstrap = require('react-bootstrap');

alors le bundle.js contient maintenant tout le code javascript de React et react-bootstrap, ainsi que le code source myapp.js.

  1. Comment puis-je intégrer cela avec Django? Devrais-je tout compiler dans myapp.js et l'inclure simplement dans mon modèle HTML?

Je n'ai travaillé que sur Nodejs, mais mon code React n'a jusqu'à présent touché aucun code Node, et je ne pense pas qu'il touchera aucun code Django (encore une fois, je n'ai jamais fait Django et je peux donc me tromper). Tout ce que vous avez à faire est de compiler avec webpack, qui crache un bundle.js. Vous mettez ce bundle.js dans votre code HTML et il va charger myapp.js.

11
Keith Yong

Le code ReactJS est toujours le code JS. Même si vous avez besoin de la syntaxe basée sur/import/other module lors du codage, dans le navigateur, vous chargerez toujours le code JS avec une balise de script. 

Le problème est de savoir comment laisser le script généré par webpack (bundle.js) fonctionner avec un autre script 'VanillaJS'. Par exemple, si vous écrivez uniquement un composant individuel à l'aide de React, comme une petite table. Et ses données (props/state) dépendront d'un autre élément/événement écrit dans VanillaJS, par exemple un écouteur de clic sur un bouton rendu par un modèle Django. Ensuite, la question est de savoir comment ils communiquent entre eux.

Jusqu'à présent, la solution que je connais est la suivante:

lorsque vous écrivez le code de réaction, au lieu d'appeler explicitement ReactDOM.render avec les propriétés/l'état prédéfinis, vous pouvez la stocker dans une fonction globale, les arguments pouvant être les propriétés. Vous chargez ce script en premier, puis l'autre script peut utiliser cette fonction globale pour déclencher le composant de rendu React.

0
Kj Huang