Django+React Configuración de desarrollo de pila completa usando Dact

Cuando trabajamos en un proyecto que tiene Django como back-end y tiene un potente front-end usando React , la configuración de desarrollo toma una cantidad significativa de tiempo para configurar: configurar Babel, Webpack, URL, vistas, etc. Solíamos configurar hasta esto antes para comenzar con ReactJS antes de que llegara npx create-react-app .

El comando npx create-react-app nos permite trabajar en reaccionar sin pensar en todo Babel, Webpack, etc. Se convierte en un problema cuando intentamos usar npx create-react-app en nuestra aplicación Django . Entonces, en este artículo, vamos a usar una aplicación CLI de Python o Package- Dact. Dact nos permite configurar una configuración de desarrollo de React-Django con solo un comando . Es de código abierto y su código está disponible en GitHub . 

Note: Make sure you have Python, pip and npm installed in your system.

Siga los pasos a continuación para configurar con éxito un proyecto React-Django en su sistema:

Paso 1: Primero necesitamos instalar Dact usando pip como se muestra a continuación:

pip install dact

Paso 2: compruebe si DACT se instaló correctamente escribiendo «DACT» en su terminal.

dact 

Paso 3: para iniciar un proyecto de desarrollo de pila completa de Django-React, simplemente escriba- 

dact {your_project_name}

Crea un proyecto Django con el nombre que proporcionaste y una aplicación frontend llamada «reactfrontend». También puede configurar el proyecto usando su nombre de aplicación front-end personalizado usando

dact {your_project_name} {react_front_end_app_name}

Paso 4: Introduzca el Proyecto 

cd my_project

Paso 5: Ejecute el servidor Django 

python manage.py runserver

Su página de bienvenida sirve en localhost:8000

Paso 6: observe los cambios en el archivo React. 

Abra una terminal diferente y escriba 

dact-watch

Note: Make sure you are in the same directory as manage.py.

Deje que dact-watch se ejecute en segundo plano mientras trabaja en su interfaz.

Paso 7: Edite su React Front-end. Para editar el archivo React, debe ir a: 

reactfrontend > static > src > App.js

Escribamos Hello GeeksForGeeks. 

Haz los cambios. Asegúrese de que Dact-Watch se esté ejecutando en segundo plano. Actualice su página de bienvenida. 

Ahora puede crear su propia aplicación Django para el back-end y desarrollar el proyecto de sus sueños usando React y Django con la ayuda de Dact .