Como configurar um aplicativo da Web Django + React usando o Webpack

Jan 19 2023

Procurando uma maneira de criar um aplicativo da Web com um front-end robusto do React e um poderoso back-end do Django? Não procure mais! Este guia ajudará você a configurar seu aplicativo da Web em menos de alguns minutos. Django é um framework web Python de alto nível, gratuito e de código aberto que incentiva o desenvolvimento rápido e o design pragmático e limpo.

Procurando uma maneira de criar um aplicativo da Web com um front-end robusto do React e um poderoso back-end do Django? Não procure mais! Este guia ajudará você a configurar seu aplicativo da Web em menos de alguns minutos.

Django é um framework web Python de alto nível, gratuito e de código aberto que incentiva o desenvolvimento rápido e o design pragmático e limpo. O React é uma biblioteca JavaScript de front-end gratuita e de código aberto para criar interfaces de usuário com base em componentes de interface do usuário, facilitando o desenvolvimento de interfaces de usuário interativas. Ao combinar as duas tecnologias com a ajuda de uma ferramenta de empacotamento chamada Webpack , podemos criar um aplicativo da Web sólido sem esforço. Vamos começar!

Pré-requisitos

Não há muitas coisas que você precisa saber com antecedência para este guia, mas definitivamente seria útil ter uma compreensão básica de Python e JavaScript antes de iniciar este projeto.

Instale Python, Virtualenv e Django

Como o Django é uma estrutura da Web baseada em Python, precisamos garantir que o Python esteja instalado em nosso dispositivo antes de prosseguir. Aqui estão alguns artigos para ajudá-lo a instalar o Python em sua respectiva plataforma, caso ainda não o tenha: Mac , Windows , Linux

Usaremos uma ferramenta Python chamada virtualenvpara nos ajudar a rastrear e gerenciar as dependências de nosso projeto Django em um ambiente virtual. Você pode aprender mais sobre isso aqui . Podemos instalá-lo executando pip install virtualenvem uma janela de terminal. Vamos também instalar o Django executando pip install djangoem uma janela de terminal.

Configurar Ambiente Virtual e Criar Projeto Django

Correrdjango-admin startproject djangoreact

Correrpython -m virtualenv <path-to-env>

Execute source <path-to-env>/bin/activateem um Mac ou <path-to-env>/Scripts/activateno Windows

Você pode executar deactivatepara desativar o ambiente virtual a qualquer momento no futuro.

Correrpip install django

Criar e configurar o front-end

No djangoreactdiretório raiz, executedjango-admin startapp frontend

Abra o djangoreact/djangoreact/settings.pyarquivo e adicione 'frontend'ao INSTALLED_APPSarray

Modifique djangoreact/djangoreact/urls.pyo arquivo para se parecer com o seguinte:

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

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

Dentro do djangoreact/frontend/templates/frontenddiretório, crie um index.htmlarquivo e cole o seguinte nele:

<!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.pyo arquivo e altere a STATIC_URLvariável de /static/para/frontend/static/
Modifique djangoreact/frontend/views.pypara se parecer com o seguinte:

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 executar o React e o Webpack, precisamos instalar o Node em nosso dispositivo. Você pode consultar o site oficial aqui para saber mais sobre como instalá-lo no seu tipo de dispositivo.

Instalar e configurar o React

Crie um srcdiretório dentro do djangoreact/frontenddiretório e um componentsdiretório dentro deste djangoreact/frontend/srcdiretório

Para as etapas a seguir, verifique se você está trabalhando no djangoreact/frontenddiretório

Inicialize um projeto npm comnpm init -y
Instale todas as dependências do nosso frontend React com os seguintes 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 até o djangoreactdiretório raiz e execute:

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

Em uma nova janela de terminal, navegue até o djangoreact/frontenddiretório e executenpm run dev
Abra um navegador da web e visite http://localhost:8000e você verá “Django React Setup Works”

Você também pode adicionar outro aplicativo usando um comando como django-admin startapp apie modificar a INSTALLED_APPSmatriz para criar um aplicativo Django para a parte de back-end do aplicativo da web. Os detalhes disso estão, no entanto, fora do escopo deste tutorial e você pode consultar outro tutorial on-line do Django para ajudá-lo a conseguir isso.