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:
- 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.
- 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_projetoAgora, vamos criar um app para lidar com nossa API, usando o Django REST Framework. Instale o Django REST Framework:
pip install djangorestframeworkDepois, 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 frontendIsso 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.nomeApós isso, execute as migrações:
python manage.py makemigrations
python manage.py migratePasso 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 = ProdutoSerializerPor 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-headersPasso 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:
- Adicione
corsheadersna lista deINSTALLED_APPS:
INSTALLED_APPS = [
# Outros apps...
'corsheaders', # <-- Aqui
'rest_framework',
'meu_app',
]- Adicione o middleware do
corsheadersantes doCommonMiddleware:
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
# Outros middlewares...
]- Defina os domínios permitidos para fazer requisições à API Django. No caso do desenvolvimento, permitimos que o React rodando em
localhost:3000faç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 axiosAgora, 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 Produtosh1>
<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-simplejwtAdicione 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 .
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:
- 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.
- Use ferramentas de build automatizado: Ferramentas como Webpack podem ajudar a automatizar o processo de build e minificação do React.
- Autenticação segura: Sempre valide os tokens JWT e use HTTPS em produção para garantir a segurança da aplicação.
- 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.
