reactify - Agregando React dentro de un proyecto Django

reactify django

Question

Soy un desarrollador de Django que acabo de comenzar con la adición de React a una página de mi aplicación, y realmente lo disfruto hasta ahora. (Es una aplicación normal de Django con una página de inicio, una página acerca de, etc., pero también una página de "gráficos" con un gráfico interactivo, y quiero construir la parte interactiva en React).

El problema es que comencé con el kit de inicio React descargable y no estoy seguro de cómo hacer las cosas de la manera correcta, y es complicado usar Django para servir a mi proyecto (todos los tutoriales parecen asumir que usando el nodo, que no soy).

Ahora mismo solo tengo esto en mi plantilla de 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>

Y myapp.js tiene todo el código React. Soy consciente de que esta no es realmente la forma moderna de hacer las cosas de JS.

Ahora quiero usar React Bootstrap , pero parece que la única forma sensata de hacerlo es con npm . Así que es hora de hacer el cambio, pero no estoy completamente seguro de cómo.

He ejecutado npm install react y npm install react-bootstrap desde dentro de mi directorio static/js en Django. Esto ha creado una carpeta node_modules con varios archivos dentro.

Así que tres preguntas de un novato confundido:

1. ¿Dónde debo poner mi código React para trabajar con estos módulos npm (debo usar var React = require(''react'') ?
2. ¿Necesito compilar este código de alguna manera (usando webpack ?)
3. ¿Cómo luego integro esto con Django? ¿Debería compilarlo todo en myapp.js y simplemente incluirlo en mi plantilla HTML?

Answer 1

El código ReactJS sigue siendo el código JS. A pesar de que requiere / importa / otra sintaxis basada en módulos al codificar, en el navegador todavía cargará el código JS mediante una etiqueta de script.

El problema es cómo dejar que el script generado por webpack (bundle.js) funcione con otro script ''VanillaJS''. Por ejemplo, si solo escribe un componente individual usando React, como una tabla pequeña. Y sus datos (props / estado) dependerán de otro elemento / evento escrito en VanillaJS, por ejemplo, un detector de clics en un botón renderizado por plantilla django. Entonces la pregunta es, cómo se comunican entre sí.

Hasta ahora, la solución que conozco es:

cuando escribe el código React, en lugar de llamar a ReactDOM.render explícitamente con props / estado predefinidos, puede almacenar que en una función global, los argumentos podrían ser los props. Primero carga este script, luego el otro script puede usar esta función global para desencadenar el Componente de renderización React.

Answer 2

También estoy haciendo lo mismo en este momento: alejarme de las etiquetas de secuencia de comandos HTML incrustadas para require tierra. Aquí está el tutorial que estoy siguiendo , y aquí está mi sistema de archivos hasta ahora. Lo estoy haciendo en Nodo, pero no debería ser tan diferente para un proyecto de Django, ya que el código de interfaz de React se desacopla de cualquier otro servidor que no sea la URL de API.

Su carpeta node_modules contiene react-bootstrap . En su myapp.js , use el require(''react-bootstrap'') para cargar la biblioteca que está contenida en su carpeta node_modules .

1. ¿Dónde debo poner mi código React para trabajar con estos módulos npm (debo usar var React = require (''reaccionar'')?

Puedes poner el código en cualquier lugar. Si su sistema de archivos se ve así:

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

Entonces simplemente puedes hacer var React = require(''react''); en myapp.js .

2. ¿Necesito compilar este código de alguna manera (usando webpack?)

Sí, consultaría el tutorial del paquete web que vinculé anteriormente, debería explicar cómo compilar todo su código React en un solo bundle.js . Here también hay otro buen tutorial. Este archivo bundle.js contiene todo el código fuente de sus requires . Así que si tu myapp.js ve algo como

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

entonces el bundle.js ahora contiene todo el código javascript React y react-bootstrap, junto con el código fuente myapp.js .

3. ¿Cómo luego integro esto con Django? ¿Debería compilarlo todo en myapp.js y simplemente incluirlo en mi plantilla HTML?

Solo he trabajado en Nodejs, pero mi código React hasta ahora no ha tocado ningún código de Node, y no creo que toque ningún código de Django (de nuevo, nunca he hecho Django, así que podría estar equivocado). Todo lo que necesita hacer es compilar con el paquete web, que escupe un bundle.js . bundle.js ese bundle.js en tu HTML y cargará myapp.js .