django reactjs

ReactJS con Django-uso real

Question

Estaba jugando un poco con React y me gusta bastante. Es mucho más detallado que angular (ng-repeat with | filter no tiene precio) pero está bien.

Lo que me molesta es cómo se supone que debo usar React con las plantillas de Django. ¿Debo poner todo el JavaScript en las plantillas junto con el marcado "HTML".

Implementar Angular fue bastante sencillo. Solo puse algunos atributos en la clase de formulario template / django y luego escribí javascript en un archivo separado. Incluya ese archivo y ya está.

¿Cómo "usar" reaccionar? ¿Cuál es la manera correcta?

¡Gracias por adelantado!

Answer 1

¿Qué pasaría si consideraras el frontend y el backend como dos entidades diferentes e independientes? Me refiero a lo siguiente:

1. Django solo debe ser una API y responder con datos json
2. El frontend debe ser solo archivos estáticos servidos por nginx
3. Puede que tenga que lidiar con CORS para permitir la comunicación entre los dos. Una opción sería permitir las solicitudes de verificación previa de su interfaz y la otra opción sería configurar un proxy nginx. Este es un tema separado y debe buscarlo si necesita más detalles.

Creo que esta arquitectura te permite mantener las cosas separadas y no lidiar con su integración. Las cosas ya son demasiado complicadas en el ecosistema frontend / React, por lo que creo que se debe tener en cuenta la simplicidad de la configuración.

También me interesaría saber cómo se vería un proceso de implementación para esta arquitectura (¿qué herramientas usar?), Así que agregue comentarios si tiene sugerencias y actualizaré la respuesta en consecuencia para proporcionar información útil para futuros lectores.

Answer 2

Implementé algo similar a lo que estás preguntando. Mi front end está completamente en reactjs, que se compila usando webpack y mis plantillas se crean en django.

Entonces hago lo siguiente: -

1. Use react-router y reaccione para crear código .jsx / .js.
2. Compilar usando webpack.
3. Utilice django-webpack

Entonces django-webpack funciona muy bien y te ayuda a aislar tu compilación fuera de django para que tus pensamientos funcionen de una manera agradable y escalable.

Answer 3

Como desea usar React junto con las plantillas de Django, supongo que el código React solo afectará partes específicas de su página. Las siguientes explicaciones están escritas en base a esa suposición.

En primer lugar, no tiene que poner todo el código JS en la plantilla; de hecho, eso sería un desastre.

Puede crear un proceso de compilación basado en JS por separado utilizando Webpack ( consulte este tutorial ). Eso mejora las capacidades de su código del lado del cliente, permitiéndole usar módulos CommonJS en el navegador, que puede extraer directamente de npm, incluido React .

Webpack a su vez generará un paquete (o paquetes múltiples, dependiendo de la naturaleza de su aplicación y la configuración de Webpack) que deberá incluir en sus plantillas de Django a través de etiquetas <script> como de costumbre.

Ahora debe realizar la llamada React.render() para representar su aplicación React en algún lugar del diseño de página existente. Deberá usar un elemento HTML vacío con un nombre de identificación / clase específico como punto de montaje para la aplicación.

Pero aquí viene la advertencia: no puede acceder a los módulos CommonJS directamente desde el navegador o las plantillas de Django. Entonces tú,

• exponga React y su aplicación al objeto de window , o
• cree un módulo con código de pegamento para manejar la inicialización de la aplicación y exponga ese método al objeto de la window .

En cualquiera de los casos, deberá llamar al código de inicialización directamente desde las plantillas (consulte un ejemplo de código de pegamento y la llamada a la inicialización de la aplicación ).

Este paso de inicialización también le permite pasar variables disponibles en las plantillas de Django al código JS.

La plantilla final de Django se verá así:

{% 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 %}

Y el código de pegamento:

var React = require(''react'');

var MyAppComponent = require(''MyAppComponent'');


window.MyApp = {

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

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

};

Sé que todo esto puede sonar abrumador al principio (incluso más en comparación con los pocos pasos que dio con Angular), pero créanme que a la larga vale la pena.

Entonces resumiendo:

1. Escribir código de reacción en archivos JS separados
2. Use Webpack (aprovechando los módulos CommonJS) para agrupar su código React
3. Incluya el paquete en sus plantillas de Django
4. Renderice el código React usando el código de pegamento en las plantillas de Django