0
300
Vistas¿Cómo hacer que Django y ReactJS trabajen juntos?
Nuevo en Django e incluso más nuevo en ReactJS. Estuve 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 captar.
Aparte de toda esa basura, comencé a tomar un curso en Udemy y después de algunos videos me pareció importante ver qué tan bien se integra con Django. Ahí es cuando inevitablemente me topé con una pared al ponerlo en marcha y ponerlo en marcha, qué tipo de documentación hay disponible para no estar girando mis ruedas durante varias horas y noches.
Realmente no hay tutoriales completos o paquetes pip , encontré. Los pocos con los que me encontré no funcionaban o estaban anticuados, por ejemplo, pyreact .
Una idea que tuve fue simplemente tratar a ReactJS por separado, pero teniendo en cuenta las clases y los ID en los que quiero que se rendericen los componentes de ReactJS. modelo.
Creo que se descompondrá rápidamente cuando llegue a renderizar desde los modelos de Django, aunque parece que Django Rest Framework está involucrado. Ni siquiera lo suficientemente lejos como para ver cómo Redux afecta todo esto.
De todos modos, ¿alguien tiene una forma clara de usar Django y ReactJS que quieran 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 trabajo front-end... No es la mejor razón.
3 Respuestas
Responde la pregunta0
No tengo experiencia con Django, pero los conceptos de front-end a back-end y de front-end de framework a framework son los mismos.
- 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.
- React, con la ayuda de Webpack (compilador de módulos) y Babel (transpilador) , 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 de estado) . Creo que no usará las plantillas de Django, sino que permitirá que React represente el front-end.
- 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), Promises, Middleware y React es esencial aquí.
Aquí hay algunas cosas que he encontrado en la web que deberían ayudar (basado en una búsqueda rápida en Google):
- Tutorial de Youtube de la API de Django y React
- Configuración de Django con React (reemplazó el enlace roto con el enlace archive.org)
- Busque otros recursos utilizando los términos en negrita anteriores. Pruebe "Django React Webpack" primero.
¡Espero que esto te lleve en la dirección correcta! ¡Buena suerte! Con suerte, otros que se especializan en Django pueden agregar a mi respuesta.
0
Siento su dolor ya que yo también estoy comenzando 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, puede ser intimidante comenzar. Estamos parados sobre los hombros de gigantes aquí;)
Así es como pienso, todo funciona en conjunto (panorama general, por favor que alguien me corrija si me equivoco).
- Django y su base de datos (prefiero Postgres) por un lado (backend)
- Django Rest-framework que proporciona la interfaz con el 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 Léame https://github.com/scottwoodall/django-react-template y una vez que haya terminado, tendrá un proyecto Django Reactjs bastante agradable 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 instalación.
Encontrará el archivo en su proyecto en /backend/requirements/common.pip Reemplace su contenido con este
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.1esto le brinda la última versión estable de Django y su marco Rest.
Espero que eso ayude.
0
Con la esperanza de proporcionar una respuesta más matizada que cualquiera de las aquí, especialmente porque algunas cosas han cambiado desde que esto se preguntó originalmente hace aproximadamente 4 años, y porque muchas de las respuestas más votadas afirman que debe configurar esto como dos separados. Las aplicaciones no son precisas.
Tiene dos opciones principales de arquitectura:
- Un enfoque cliente/servidor completamente desacoplado usando algo como create-react-app y Django REST Framework
- 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 ser algo como esto:
Opción 1 (Arquitectura Cliente/Servidor):
Opción 2 (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 tiene mucha experiencia en JS, desea mantener separados a los desarrolladores front-end/back-end, o desea escribir toda su aplicación 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 quiere moverse rápidamente mientras usa React para algunas partes de su aplicación . Creo que es una opción particularmente buena para 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 .
Divulgación completa, soy el autor de esa serie.