Aggiunta di React all'interno di un progetto Django

Question

Sono uno sviluppatore Django appena iniziato ad aggiungere React a una pagina della mia app e mi sto godendo fino ad ora. (È una normale app Django con una pagina iniziale, una pagina, ecc., Ma anche una pagina "grafico" con un grafico interattivo, e voglio costruire la parte interattiva in React.)

Il problema è che io Ho iniziato con lo downloadable React starter kit e non sono sicuro di come fare le cose nel modo giusto, ed è complicato usare Django per servire il mio progetto (tutti i tutorial sembrano presupporre che stai usando il nodo, che non sono).

In questo momento devo solo questo nel mio modello di 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> 

E myapp.js ha tutto il codice reagire. Sono consapevole che questo non è davvero il modo di fare JS moderno e adulto.

Ora voglio usare React Bootstrap, ma sembra che l'unico modo ragionevole per farlo sia con npm. Quindi è il momento di fare il passaggio, ma non sono completamente sicuro di come.

Ho eseguito npm install react e npm install react-bootstrap dall'interno della directory static/js di Django. Questo ha creato una cartella node_modules con vari file all'interno.

Così tre domande da un newbie confuso:

1. Dove devo mettere il mio Reagire codice per lavorare con questi moduli NPM (dovrei usare var React = require('react')
2. Devo compilare il codice in qualche modo (usando? webpack?)
3. Come faccio poi integrare questo con Django? devo compilare tutti a myapp.js e sufficiente includere che nel mio modello HTML?

Answer 1

Sto anche facendo la stessa cosa in questo momento - spostandomi dai tag di script HTML incorporati nel terreno require. Here is the tutorial I am following, e qui è il mio file system finora. Lo sto facendo in Nodo, ma non dovrebbe essere così diverso per un progetto Django in quanto il codice di frontend React è disaccoppiato da qualsiasi back-end diverso dagli URL dell'API.

La cartella node_modules contiene react-bootstrap. Nel numero myapp.js, utilizzare require('react-bootstrap') per caricare la libreria contenuta nella cartella node_modules.

1. Dove devo inserire il mio codice Reagire a lavorare con questi moduli NPM (dovrei usare var React = require ('reagire')?

È possibile inserire il codice da nessuna parte. Se il file system è simile al seguente:

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

allora si può solo fare var React = require('react'); in myapp.js

.

2. Ho bisogno di compilare questo codice in qualche modo (usando il webpack?)

Sì, vorrei consultare il tutorial webpack ho collegato in precedenza, si dovrebbe spiegare come compilare tutti i tuoi Reagire codice in un unico bundle.js. Here è anche un altro buon tutorial. Questo file bundle.js contiene tutto il codice sorgente del tuo requires. Così, se il myapp.js sembra qualcosa di simile

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

poi il bundle.js ora contiene tutte le reagire e reagire-bootstrap codice javascript, insieme al codice sorgente di myapp.js.

3. Come si integra quindi con Django? Dovrei compilarlo tutto su myapp.js e includerlo nel mio template HTML?

Ho fatto solo il lavoro sul Nodejs, ma il mio Reagire codice finora non ha toccato alcun codice Node, e non credo che toccherà qualsiasi codice Django (ancora una volta non ho mai fatto Django quindi potrei sbagliarmi). Tutto quello che devi fare è compilare con il webpack, che sparge uno bundle.js. Lo metti bundle.js nel tuo codice HTML e verrà caricato su myapp.js.

Answer 2

Il codice ReactJS è ancora codice JS. Anche se si richiede/import/altra sintassi basata su moduli durante la codifica, nel browser si carica ancora il codice JS con un tag script.

Il problema è come consentire allo script generato da webpack (bundle.js) di funzionare con altri script 'VanillaJS'. Ad esempio, se scrivi solo un singolo componente usando React, come un tavolino. E i suoi dati (oggetti di scena/stato) dipenderanno da un altro elemento/evento scritto in VanillaJS, ad esempio un listener di clic su un pulsante di rendering da template django. Quindi la domanda è: come comunicano tra loro.

Finora, la soluzione di quello che so è:

quando si scrive Reagire codice, invece di chiamare ReactDOM.render esplicitamente con i puntelli preimpostati/stato, è possibile memorizzare che in una funzione globale, gli argomenti potrebbero essere gli oggetti di scena. Prima si carica questo script, poi l'altro script può utilizzare questa funzione globale per attivare il componente React.