Comprende el código bien antes de utilizarlo a tu trabajo y si ttienes algo que aportar puedes compartirlo con nosotros.
Solución:
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.
- Reaccionar, con la ayuda de Webpack (agrupador 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). I creer no utilizará 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. tu comprensión de Solicitudes HTTP, Javascript (ES6), Promises, Middleware y React es esencial aquí.
Aquí hay algunas cosas que he encontrado en la web que deberían ayuda (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.
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 buen proyecto de Django Reactjs 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.1
esto le brinda la última versión estable de Django y su marco Rest.
Espero que eso ayude.
Como otros le respondieron, si está creando un nuevo proyecto, puede separar el frontend y el backend y usar cualquier complemento de descanso de django para crear una API de descanso para su aplicación frontend. Esto es en el mundo ideal.
Si tiene un proyecto con la plantilla de django ya instalada, debe cargar su renderizado de react dom en la página en la que desea cargar la aplicación. en mi caso ya tenia canalización de Django 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',
,
Tu “punto de entrada.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(
, 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 %
La ventaja de usar django-pipeline es que las estáticas se procesan durante el collectstatic.