Cómo configurar una aplicación web Django + React usando Webpack

Jan 19 2023

¿Está buscando una manera de crear una aplicación web con una interfaz React robusta y un potente backend Django? ¡No busque más! Esta guía lo ayudará a configurar su aplicación web en menos de un par de minutos. Django es un marco web de Python de alto nivel, gratuito y de código abierto que fomenta el desarrollo rápido y el diseño limpio y pragmático.

¿Está buscando una manera de crear una aplicación web con una interfaz React robusta y un potente backend Django? ¡No busque más! Esta guía lo ayudará a configurar su aplicación web en menos de un par de minutos.

Django es un marco web de Python de alto nivel, gratuito y de código abierto que fomenta el desarrollo rápido y el diseño limpio y pragmático. React es una biblioteca JavaScript de interfaz de usuario gratuita y de código abierto para crear interfaces de usuario basadas en componentes de interfaz de usuario, lo que facilita el desarrollo de interfaces de usuario interactivas. Al combinar las dos tecnologías con la ayuda de una herramienta de agrupación llamada Webpack , podemos crear una aplicación web sólida sin esfuerzo. ¡Empecemos!

requisitos previos

No hay muchas cosas que deba saber de antemano para esta guía, pero definitivamente sería útil tener una comprensión básica de Python y JavaScript antes de comenzar este proyecto.

Instalar Python, Virtualenv y Django

Dado que Django es un marco web basado en Python, debemos asegurarnos de que Python esté instalado en nuestro dispositivo antes de continuar. Aquí hay algunos artículos para ayudarlo a instalar Python en su plataforma respectiva si aún no lo tiene: Mac , Windows , Linux

Usaremos una herramienta de Python llamada virtualenvpara ayudarnos a rastrear y administrar las dependencias de nuestro proyecto Django en un entorno virtual. Puede obtener más información al respecto aquí . Podemos instalarlo ejecutándolo pip install virtualenven una ventana de terminal. Instalemos también Django ejecutándolo pip install djangoen una ventana de terminal.

Configurar el entorno virtual y crear un proyecto Django

Correrdjango-admin startproject djangoreact

Correrpython -m virtualenv <path-to-env>

Ejecutar source <path-to-env>/bin/activateen una Mac o <path-to-env>/Scripts/activateen Windows

Puede ejecutar deactivatepara desactivar el entorno virtual en cualquier momento en el futuro.

Correrpip install django

Crear y configurar la interfaz

En el djangoreactdirectorio raíz, ejecutedjango-admin startapp frontend

Abra el djangoreact/djangoreact/settings.pyarchivo y agréguelo 'frontend'a la INSTALLED_APPSmatriz.

Modifique djangoreact/djangoreact/urls.pyel archivo para que se parezca a lo siguiente:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

Dentro del djangoreact/frontend/templates/frontenddirectorio, crea un index.htmlarchivo y pega lo siguiente en él:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django React</title>
    {% load static %}
  </head>
  <body>
    <div id="root"></div>
    <script src="{% static "js/main.js" %}"></script>
  </body>
</html>

Abra djangoreact/djangoreact/settings.pyel archivo y cambie la STATIC_URLvariable de /static/a/frontend/static/
Modifique djangoreact/frontend/views.pypara que se vea como lo siguiente:

from django.shortcuts import render

def index(request):
    return render(request, 'frontend/index.html')

from django.urls import path
from .views import index

urlpatterns = [
    path('', index),
]

Para poder ejecutar React y Webpack, necesitamos instalar Node en nuestro dispositivo. Puede consultar el sitio web oficial aquí para obtener más información sobre cómo puede instalarlo en su tipo de dispositivo.

Instalar y configurar reaccionar

Cree un srcdirectorio dentro del djangoreact/frontenddirectorio y un componentsdirectorio dentro de este djangoreact/frontend/srcdirectorio

Para los siguientes pasos, asegúrese de estar trabajando actualmente dentro del djangoreact/frontenddirectorio

Inicialice un proyecto npm connpm init -y
Instale todas las dependencias para nuestra interfaz React con los siguientes comandos:

npm install webpack webpack-cli --save-dev
npm install @babel/core babel-loader --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties
npm install react react-dom --save-dev

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/js"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production")
      }
    })
  ]
};

"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
 },

import React from "react";

const App = (props) => {
  return (
    <div className="App">
      <h1>Django React Setup Works</h1>
    </div>
  );
};

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App/App";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
);

Navegue al djangoreactdirectorio raíz y ejecute:

python manage.py migrate && python manage.py runserver

En una nueva ventana de terminal, navegue hasta el djangoreact/frontenddirectorio y ejecutenpm run dev
Abra un navegador web y visite http://localhost:8000y debería ver "Django React Setup Works"

También puede agregar otra aplicación usando un comando como django-admin startapp apiy modificar la INSTALLED_APPSmatriz para crear una aplicación Django para la parte de back-end de la aplicación web. Sin embargo, los detalles de eso están fuera del alcance de este tutorial y puede consultar otro tutorial en línea de Django para ayudarlo a lograrlo.