¿Cómo hacer que Django y ReactJS funcionen juntos?

160

Nuevo en Django e incluso más nuevo en ReactJS. He estado investigando AngularJS y ReactJS, pero me decidí por ReactJS. Parecía que estaba superando a AngularJS en cuanto a popularidad a pesar de que AngularJS tenía una mayor participación de mercado, y se dice que ReactJS es más rápido de recoger.

Dejando a un lado toda esa basura, comencé a tomar un curso sobre Udemy y después de algunos videos me pareció importante ver qué tan bien se integra con Django. Ahí es cuando inevitablemente choco contra una pared solo para ponerlo en funcionamiento, qué tipo de documentación hay para no hacer girar las ruedas durante varias horas y noches.

Realmente no hay tutoriales o pippaquetes completos , me encontré. Los pocos que encontré no trabajaban o estaban salidos, pyreactpor ejemplo.

Una idea que tuve fue tratar ReactJS completamente por separado, pero teniendo en cuenta las clases y los ID en los que quiero que se procesen los componentes de ReactJS. Después de que los componentes de ReactJS separados se compilen en un solo archivo ES5, simplemente importe ese único archivo a Django plantilla.

Creo que eso se romperá rápidamente cuando llegue a renderizar desde modelos de Django, aunque el Django Rest Framework parece que está involucrado. Ni siquiera lo suficientemente lejos para ver cómo Redux afecta todo esto.

De todos modos, ¿alguien tiene una forma clara de usar Django y ReactJS que les gustaría compartir?

En cualquier caso, la documentación y los tutoriales son abundantes para AngularJS y Django, por lo que es tentador seguir ese camino para comenzar con cualquier marco de interfaz de usuario ... No es la mejor razón.

1
  • 3
    Tenía curiosidades similares y configuré una aplicación de ejemplo para react + webpack + django: el repositorio también contiene enlaces a algunas herramientas y artículos relacionados que pueden ser útiles.
    danwild
    3 de enero de 2019 a las 1:57
165

No tengo experiencia con Django, pero los conceptos desde el front-end hasta el back-end y desde el marco del front-end hasta el marco son los mismos.

  1. React consumirá su API REST de Django . Los front-end y back-end no están conectados de ninguna manera. React realizará solicitudes HTTP a su API REST para obtener y configurar datos.
  2. React, con la ayuda de Webpack (paquete de módulos) y Babel (transpiler) , agrupará y transpilará su Javascript en uno o varios archivos que se colocarán en la página HTML de entrada. Aprenda Webpack, Babel, Javascript y React y Redux (un contenedor estatal) . Yo creo que no va a usar plantillas de Django, sino que permiten reaccionar para hacer que el front-end.
  3. A medida que se procesa esta página, React consumirá la API para obtener datos para que React pueda procesarlos. Su comprensión de las solicitudes HTTP, Javascript (ES6), Promesas, Middleware y React es esencial aquí.

Aquí hay algunas cosas que encontré en la web que deberían ayudar (según una búsqueda rápida en Google):

¡Espero que esto te lleve en la dirección correcta! ¡Buena suerte! Ojalá otros que se especializan en Django puedan contribuir a mi respuesta.

6
  • Revisaré el tutorial de YouTube. Pasé por ambos tutoriales anteriormente. El artículo 1 no funcionó aunque lo seguí de cerca. (Copió y pegó la mayor parte del código). Eso está en un proyecto existente, pero probaré uno nuevo. El artículo 2 utiliza paquetes obsoletos y no se ha actualizado recientemente. De todos modos, leyendo más sobre AngularJS y Django, parece que la API REST de Django todavía se usa. Supongo que estaba buscando una solución sin agregar esa dimensión, pero parece que es inevitable.
    cjones
    26 de ene. De 2017 a las 5:37
  • Ok, actualicé un poco mi respuesta sacando el artículo desactualizado. Tiene más de 2 años, por lo que definitivamente necesitaba ser eliminado. ¿Ayudan las balas numeradas? ¿Qué te cuesta entender?
    KA01
    26 de ene. De 2017 a las 5:46
  • 1
    Después de probar el segundo enlace varias veces más en proyectos existentes y proyectos nuevos, al menos conseguí que hablaran. La línea {% render_bundle 'main' %}es incorrecta y debería estarlo {% render_bundle "main" %}.
    cjones
    27 ene 2017 a las 16:52
  • 1
    El segundo enlace no funciona. Actualice el enlace. 12 feb 2019 a las 18:07
  • 1
    Reemplazaría ese segundo enlace muerto con este artículo, lo seguí y funciona principalmente ... medium.com/labcodes/configuring-django-with-react-4c599d1eae63
    Doug F
    26/08/19 a las 13:08
41

Siento tu dolor ya que yo también estoy empezando a hacer que Django y React.js trabajen juntos. Hice un par de proyectos de Django, y creo que React.js es una gran combinación para Django. Sin embargo, empezar puede resultar intimidante. Estamos parados sobre los hombros de gigantes aquí;)

Así es como pienso, todo funciona en conjunto (panorama general, por favor, alguien me corrija si me equivoco).

  • Django y su base de datos (prefiero Postgres) en un lado (backend)
  • Django Rest-framework que proporciona la interfaz al mundo exterior (es decir, aplicaciones móviles y React y demás)
  • Reactjs, Nodejs, Webpack, Redux (¿o tal vez MobX?) En el otro lado (frontend)

La comunicación entre Django y 'la interfaz' se realiza a través del marco Rest. Asegúrese de obtener su autorización y permisos para el marco Rest en su lugar.

Encontré una buena plantilla de caldera para exactamente este escenario y funciona de inmediato. Simplemente siga el archivo readme https://github.com/scottwoodall/django-react-template y una vez que haya terminado, tendrá un proyecto Django Reactjs bastante bueno en ejecución. De ninguna manera esto está destinado a la producción, sino más bien como una forma de profundizar y ver cómo las cosas están conectadas y funcionando.

Un pequeño cambio que me gustaría sugerir es este: siga las instrucciones de configuración PERO antes de llegar al segundo paso para configurar el backend (Django aquí https://github.com/scottwoodall/django-react-template/blob/master /backend/README.md ), cambie el archivo de requisitos para la configuración.

Encontrará el archivo en su proyecto en /backend/requirements/common.pip Reemplace su contenido con esto

appdirs==1.4.0
Django==1.10.5
django-autofixture==0.12.0
django-extensions==1.6.1
django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

esto le brinda la última versión estable para Django y su marco Rest.

Espero que eso ayude.

1
  • 4
    Un año después, me cambié a VUE.js ( vuejs.org ). Lo hice funcionar con las plantillas de Django y se comunicará con la base de datos a través de Django Rest Framework. Es rápido y ligero (~ 20kb) 9 de ene. De 2018 a las 17:32
19

Como otros le respondieron, si está creando un nuevo proyecto, puede separar el frontend y el backend y usar cualquier complemento de django rest para crear rest api para su aplicación de frontend. Este es el mundo ideal.

Si ya tiene un proyecto con la plantilla de django en su lugar, entonces debe cargar su render de react dom en la página en la que desea cargar la aplicación. En mi caso, ya tenía django-pipeline y acabo de agregar la extensión browserify. ( https://github.com/j0hnsmith/django-pipeline-browserify )

Como en el ejemplo, cargué la aplicación usando django-pipeline:

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

Su " entry-point.browserify.js " puede ser un archivo ES6 que carga su aplicación de reacción en la plantilla:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app.js';
import "babel-polyfill";

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import reducers from './reducers/index.js';

const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App/>
  </Provider>
  , document.getElementById('my-react-app')
);

En su plantilla de django, ahora puede cargar su aplicación fácilmente:

{% load pipeline %}

{% comment %} 
`browserify` is a PIPELINE key setup in the settings for django 
 pipeline. See the example above
{% endcomment %}

{% javascript 'browserify' %}

{% comment %} 
the app will be loaded here thanks to the entry point you created 
in PIPELINE settings. The key is the `entry-point.browserify.js` 
responsable to inject with ReactDOM.render() you react app in the div 
below
{% endcomment %}
<div id="my-react-app"></div>

La ventaja de usar django-pipeline es que las estáticas se procesan durante el collectstatic.

18

El primer enfoque es crear aplicaciones Django y React separadas. Django será responsable de servir la API construida con el marco REST de Django y React consumirá estas API utilizando el cliente Axios o la API de recuperación del navegador. Deberá tener dos servidores, tanto en desarrollo como en producción, uno para Django (API REST) ​​y el otro para React (para entregar archivos estáticos) .

El segundo enfoque es diferente, las aplicaciones frontend y backend estarán acopladas . Básicamente, usará Django tanto para servir la interfaz de React como para exponer la API REST. Entonces necesitará integrar React y Webpack con Django, estos son los pasos que puede seguir para hacerlo

Primero genere su proyecto Django y luego, dentro de este directorio del proyecto, genere su aplicación React usando la CLI de React

Para el proyecto Django, instale django-webpack-loader con pip:

pip install django-webpack-loader

A continuación, agregue la aplicación a las aplicaciones instaladas y configúrelo settings.pyagregando el siguiente objeto

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

Luego agregue una plantilla de Django que se usará para montar la aplicación React y será servida por Django

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React </title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

Luego agregue una URL urls.pypara publicar esta plantilla

from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView

urlpatterns = [

    url(r'^', TemplateView.as_view(template_name="main.html")),

]

Si inicia los servidores Django y React en este punto, obtendrá un error de Django que dice webpack-stats.jsonque no existe. Entonces, a continuación, debe hacer que su aplicación React pueda generar el archivo de estadísticas.

Continúe y navegue dentro de su aplicación React y luego instálela webpack-bundle-tracker

npm install webpack-bundle-tracker --save

Luego, expulse la configuración de Webpack y vaya a y config/webpack.config.dev.jsluego agregue

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

Esto agrega el complemento BundleTracker a Webpack y le indica que se genere webpack-stats.jsonen la carpeta principal.

Asegúrese también de hacer lo mismo en config/webpack.config.prod.jsproducción.

Ahora, si vuelve a ejecutar su servidor React webpack-stats.json, se generará y Django podrá consumirlo para encontrar información sobre los paquetes Webpack generados por el servidor de desarrollo React.

Hay algunas otras cosas para. Puede encontrar más información en este tutorial .

5
  • ¿Necesita que webpack-dev-server se ejecute en un enfoque acoplado? Porque en el tutorial lo está ejecutando. Según tengo entendido, debe ejecutarse porque django lo usa para mantener los paquetes actualizados. ¿Es esto correcto? Si es así, ¿cómo funcionaría esto en producción, es decir, todavía necesitaría dos servidores?
    pavlee
    5 de marzo de 2018 a las 12:17
  • 1
    En desarrollo, necesitará tanto el servidor de desarrollo Django como el servidor de desarrollo React / Webpack en ejecución. En producción, solo necesita un servidor (Django) en ejecución porque Django se encargará de servir los archivos generados pornpm run build 5 mar 18 a las 14:10
  • Gracias por la aclaración.
    pavlee
    5 mar 2018 a las 14:20
  • ¿Puede dar más detalles sobre el primer enfoque? Por lo que entiendo, contendría un expressservidor en ejecución que servirá archivos JS estáticos de React y que los archivos JS harían una solicitud ajax para obtener datos del servidor Django. El navegador primero llega al expressservidor, no tiene idea sobre el de Django. ¿Estoy en lo correcto? ¿Es factible algo como la representación del lado del servidor con este enfoque? 20/04/18 a las 12:34
  • Simplemente puede usar un host estático y un CDN para sus archivos estáticos. Por ejemplo, puede usar GitHub Pages para alojar la aplicación React y CloudFlare como CDN. Para la renderización del lado del servidor, necesita otra configuración, como usar un servidor Express, PERO también hay servicios de alojamiento estático que ofrecen renderización del lado del servidor como Netlify. 21/04/18 a las 1:37
13

Una nota para cualquiera que provenga de un backend o un rol basado en Django y trate de trabajar con ReactJS: nadie logra configurar el entorno de ReactJS con éxito en el primer intento :)

Hay un blog de Owais Lone que está disponible en http://owaislone.org/blog/webpack-plus-reactjs-and-django/ ; sin embargo, la sintaxis de la configuración de Webpack está muy desactualizada.

Le sugiero que siga los pasos mencionados en el blog y reemplace el archivo de configuración del paquete web con el contenido a continuación. Sin embargo, si es nuevo en Django y React, mastique uno a la vez debido a la curva de aprendizaje, probablemente se frustrará.

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};
1
  • 1
    ¡La nota al principio es realmente alentadora! 22/04/19 a las 13:05
12

La respuesta aceptada me lleva a creer que desacoplar Django backend y React Frontend es el camino correcto a seguir, pase lo que pase. De hecho, hay enfoques en los que React y Django están acoplados, que pueden ser más adecuados en situaciones particulares.

Este tutorial explica bien esto. En particular:

I see the following patterns (which are common to almost every web framework):

-React in its own “frontend” Django app: load a single HTML template and let React manage the frontend (difficulty: medium)

-Django REST as a standalone API + React as a standalone SPA (difficulty: hard, it involves JWT for authentication)

-Mix and match: mini React apps inside Django templates (difficulty: simple)

11

Con la esperanza de proporcionar una respuesta más matizada que cualquiera de las que se encuentran aquí, especialmente porque algunas cosas han cambiado desde que se preguntó originalmente hace ~ 4 años, y porque muchas de las respuestas más votadas afirman que debe configurar esto como dos las aplicaciones no son precisas.

Tiene dos opciones de arquitectura principales:

  1. Un enfoque cliente / servidor completamente desacoplado que utiliza algo como create-react-app y Django REST Framework
  2. Una arquitectura híbrida en la que configura una canalización de compilación de React (probablemente usando un paquete web ) y luego incluye los archivos compilados como archivos estáticos en sus plantillas de Django.

Estos podrían verse así:

Opción 1 (Arquitectura cliente / servidor):

Arquitectura cliente / servidor

Opción 2 (Arquitectura híbrida):

Arquitectura híbrida

La decisión entre estos dos dependerá de su experiencia o la de su equipo, así como de la complejidad de su interfaz de usuario. La primera opción es buena si tienes mucha experiencia en JS, quieres mantener separados a tus desarrolladores front-end / back-end, o quieres escribir tu aplicación completa como una aplicación de una sola página de React . La segunda opción es generalmente mejor si está más familiarizado con Django y desea moverse rápidamente mientras usa React para algunas partes de su aplicación . Encuentro que se adapta particularmente bien a los desarrolladores en solitario de pila completa.

Hay mucha más información en la serie " JavaScript moderno para desarrolladores de Django ", incluida la elección de su arquitectura , la integración de su compilación JS en un proyecto de Django y la creación de una aplicación React de una sola página .

Revelación completa, soy el autor de esa serie.

1
  • 2
    Esta serie es absolutamente fantástica. ¡Justo lo que necesitaba! 7 de febrero a las 19:13
2

Sé que esto es un par de años tarde, pero lo voy a publicar para la próxima persona en este viaje.

GraphQL ha sido útil y mucho más fácil en comparación con DjangoRESTFramework. También es más flexible en cuanto a las respuestas que recibe. Obtienes lo que pides y no tienes que filtrar la respuesta para obtener lo que deseas.

Puede usar Graphene Django en el lado del servidor y React + Apollo / Relay ... Puede investigarlo, ya que esa no es su pregunta.

1
  • ¡Graphene y React + Apollo son una pila excelente! Un poco más de Python para escribir que DRF, pero una enorme reducción en el código JS, especialmente porque Apollo elimina la necesidad de redux. 25 abr.20 a las 23:09
1

Puede probar el siguiente tutorial, puede ayudarlo a avanzar:

Sirviendo React y Django juntos