Como integrar frameworks frontend como React com Django

Hoje em dia, é comum trabalhar com uma aplicação que separa o frontend do backend. E para isso, dois grandes nomes aparecem: Django no backend e React no frontend.

Django é um framework poderoso que oferece uma robusta estrutura de backend, enquanto React é amplamente utilizado para construir interfaces dinâmicas e reativas no frontend.

A pergunta é: como fazer esses dois mundos conversarem bem? Afinal, enquanto o Django se preocupa com bancos de dados, autenticação e regras de negócio, o React está mais interessado em manipular DOM e interações rápidas com o usuário.

Neste artigo, vamos explorar o processo de integrar o React como frontend e o Django como backend. Vamos ver desde a configuração de um ambiente básico até a criação de uma API REST com Django e seu consumo por meio de uma aplicação React.

Tudo isso com detalhes, exemplos de código e boas práticas que vão te ajudar a construir uma aplicação que tire o melhor dos dois frameworks.

Arquiteturas de Integração: Monolito vs. Aplicações Separadas

Quando pensamos em integrar React com Django, existem duas abordagens principais:

1. Monolítica: O Django controla tudo, incluindo a entrega do frontend. Nesse caso, o React pode ser usado de forma mais limitada, talvez para melhorar a interatividade de alguns componentes específicos no frontend, mas sem ser uma SPA (Single Page Application) completa.
2. Desacoplada (SPA): Aqui, o Django fica totalmente focado no backend, sendo responsável por fornecer uma API RESTful (usando Django REST Framework, por exemplo), enquanto o React lida exclusivamente com o frontend. Essa é a abordagem típica quando estamos falando de Single Page Applications (SPA).

Qual escolher?

A escolha entre essas duas arquiteturas depende do tipo de projeto que você está construindo:

• Monolítica: Ótima para aplicações menores ou quando você deseja integrar interações mais simples, mantendo o poder dos templates Django.
• Desacoplada (SPA): Ideal para aplicações mais complexas, onde o frontend precisa ser muito dinâmico e interativo. React pode cuidar das interações e renderizações do lado do cliente, enquanto Django gerencia as regras de negócio e a API.

Como vamos tratar de uma integração mais completa, focaremos na segunda abordagem, criando uma aplicação desacoplada, onde o Django serve uma API REST e o React consome essa API para exibir dados no frontend.

Configurando o Ambiente para Integração

Agora que entendemos a arquitetura, vamos configurar o ambiente para integrar React e Django.

Passo 1: Configurando o Django

Primeiro, vamos criar um projeto Django. No terminal, execute o seguinte comando:

django-admin startproject meu_projeto
cd meu_projeto

Agora, vamos criar um app para lidar com nossa API, usando o Django REST Framework. Instale o Django REST Framework:

pip install djangorestframework

Depois, no arquivo settings.py, adicione o rest_framework aos apps instalados:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'meu_app',  # Seu app para a API
]

Agora, configure o Django REST Framework:

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

Passo 2: Configurando o React

Vamos agora configurar o React. No diretório raiz do projeto (fora do diretório do Django), crie o projeto React:

npx create-react-app frontend

Isso vai criar uma estrutura de projeto React. Esse diretório frontend será onde você irá desenvolver todo o frontend da aplicação, completamente separado do Django.

Criando a API no Django

Agora que temos o Django configurado, vamos construir uma API RESTful para servir os dados que o React vai consumir.

Passo 1: Criando um Modelo Simples

Vamos criar um modelo simples de Produto para exemplo. No arquivo models.py do seu app, adicione o seguinte:

from django.db import models

class Produto(models.Model):
    nome = models.CharField(max_length=100)
    preco = models.DecimalField(max_digits=10, decimal_places=2)
    descricao = models.TextField()

    def __str__(self):
        return self.nome

Após isso, execute as migrações:

python manage.py makemigrations
python manage.py migrate

Passo 2: Criando a API com Django REST Framework

Agora, vamos criar um serializer para nosso modelo. Crie um arquivo serializers.py e adicione:

from rest_framework import serializers
from .models import Produto

class ProdutoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Produto
        fields = '__all__'

Depois disso, crie a view para a API no views.py:

from rest_framework import viewsets
from .models import Produto
from .serializers import ProdutoSerializer

class ProdutoViewSet(viewsets.ModelViewSet):
    queryset = Produto.objects.all()
    serializer_class = ProdutoSerializer

Por fim, adicione as rotas da API no urls.py do app:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ProdutoViewSet

router = DefaultRouter()
router.register(r'produtos', ProdutoViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Passo 3: Configurando o django-cors-headers

Quando integramos React e Django, especialmente em uma arquitetura desacoplada, onde o backend Django e o frontend React estão em servidores ou portas diferentes, precisamos habilitar o CORS (Cross-Origin Resource Sharing).

Isso é necessário porque, por padrão, os navegadores bloqueiam requisições feitas de uma origem diferente daquela de onde o frontend foi carregado (uma medida de segurança chamada Same-Origin Policy).

O que é CORS?

CORS (Cross-Origin Resource Sharing) é um mecanismo que permite que uma aplicação frontend (por exemplo, React) faça requisições a um servidor backend (Django) que está em um domínio diferente.

No nosso caso, o frontend React rodaria em uma origem como http://localhost:3000, enquanto o backend Django estaria em http://localhost:8000. Isso normalmente resultaria em um erro de CORS policy, bloqueando as requisições.

Solução: Usando django-cors-headers

Para permitir que o frontend React se comunique com o backend Django, precisamos instalar e configurar o pacote django-cors-headers. Ele adiciona os cabeçalhos necessários para que as requisições entre diferentes origens sejam permitidas.

Passo 3.1: Instalando o django-cors-headers

Primeiro, vamos instalar o pacote:

pip install django-cors-headers

Passo 3.2: Configurando o django-cors-headers

Agora, precisamos configurar o Django para usar o django-cors-headers. No arquivo settings.py, siga os seguintes passos:

1. Adicione corsheaders na lista de INSTALLED_APPS:

INSTALLED_APPS = [
    # Outros apps...
    'corsheaders', # <-- Aqui
    'rest_framework',
    'meu_app',
]

2. Adicione o middleware do corsheaders antes do CommonMiddleware:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # Outros middlewares...
]

3. Defina os domínios permitidos para fazer requisições à API Django. No caso do desenvolvimento, permitimos que o React rodando em localhost:3000 faça requisições:

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

Com essa configuração, permitimos que qualquer requisição vinda do React (no endereço http://localhost:3000) seja aceita pelo Django.

Agora, sua API está pronta para ser consumida pelo React. Se você rodar o servidor Django (python manage.py runserver), pode acessar os produtos em http://localhost:8000/api/produtos/.

Integração com React

Agora que a API está pronta, vamos conectar o React a ela.

Passo 1: Consumindo a API no React

No projeto React, vamos usar o axios para fazer requisições à API Django. Primeiro, instale o axios:

npm install axios

Agora, crie um componente para listar os produtos. No diretório src, crie um arquivo Produtos.js:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Produtos = () => {
  const [produtos, setProdutos] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8000/api/produtos/')
      .then(res => {
        setProdutos(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <h1>Lista de Produtos</h1>
      <ul>
        {produtos.map(produto => (
          <li key={produto.id}>{produto.nome} - R${produto.preco}</li>
        ))}
      </ul>
    </div>
  );
};

export default Produtos;

Esse componente faz uma requisição à API Django e exibe a lista de produtos. Agora, basta adicionar o componente Produtos ao App.js do React:

import React from 'react';
import Produtos from './Produtos';

function App() {
  return (
    <div className="App">
      <Produtos />
    </div>
  );
}

export default App;

Rodando o projeto React (npm start), você verá a lista de produtos sendo exibida, consumida diretamente da API Django.

Autenticação e Autorização

Agora que a API está funcionando, você pode querer proteger certos endpoints. Vamos implementar autenticação com JWT (JSON Web Token).

Passo 1: Instalando o Django REST Framework JWT

Instale a biblioteca de autenticação JWT:

pip install djangorestframework-simplejwt

Adicione as configurações no settings.py:

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ],
}

Adicione as rotas de autenticação JWT no urls.py do projeto:

from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
)

urlpatterns = [
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

Agora, você pode fazer login via POST na rota /api/token/ e obter o token JWT. Esse token deve ser enviado nas requisições seguintes, no header Authorization: Bearer <token>.

Passo 2: Consumindo APIs Autenticadas no React

No React, modifique o código de requisição para enviar o token JWT:

axios.get('http://localhost:8000/api/produtos/', {
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
})
.then(res => setProdutos(res.data))
.catch(err => console.log(err));

Servindo o React com Django (caso você queira)

Quando for para produção, você pode servir o build do React diretamente no Django. Para isso, rode o comando npm run build no diretório React, que criará uma pasta build.

No Django, crie uma view simples para servir o React:

from django.shortcuts import render

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

No urls.py do projeto Django, adicione:

from django.urls import path
from .views import index

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

Coloque os arquivos de build do React dentro de uma pasta templates no Django. Isso permitirá que o Django sirva o frontend React em produção.

Melhores Práticas para Integração Django + React

Algumas boas práticas incluem:

1. Mantenha o frontend e o backend bem separados: Evite misturar lógica de backend no frontend e vice-versa. Isso facilita a manutenção e evolução do projeto.
2. Use ferramentas de build automatizado: Ferramentas como Webpack podem ajudar a automatizar o processo de build e minificação do React.
3. Autenticação segura: Sempre valide os tokens JWT e use HTTPS em produção para garantir a segurança da aplicação.
4. Versionamento da API: Quando sua aplicação crescer, versionar a API garantirá que as mudanças não quebrem o frontend.

Conclusão

Integrar React com Django permite que você tire proveito do poder de cada framework. O Django lida com o backend e a lógica de negócios, enquanto o React garante uma interface de usuário rápida e responsiva.

Ao seguir as práticas mostradas aqui, você pode criar uma aplicação escalável e bem organizada, que aproveita o melhor dos dois mundos.

Ao final, React e Django, quando bem integrados, funcionam em harmonia, oferecendo uma experiência robusta tanto para o desenvolvedor quanto para o usuário final. Afinal, a verdadeira mágica acontece quando frontend e backend trabalham juntos para entregar uma aplicação completa.