Como Construir um Aplicativo Web Moderno para Gerenciar Informações de Clientes com Django e React no Ubuntu 18.04

O autor selecionou a Open Sourcing Mental Illness Ltd para receber uma doação como parte do programa Write for DOnations.

Introdução

As pessoas usam tipos diferentes de dispositivos para se conectar à internet e navegar pela Web. Por isso, os aplicativos precisam ser acessíveis de uma variedade de locais. Para sites tradicionais, ter uma interface responsiva geralmente é o suficiente, mas aplicativos mais complexos requerem muitas vezes o uso de outras técnicas e arquiteturas. Essas incluem ter aplicativos (separados) REST com back-end e front-end - que podem ser implementados como aplicativos Web do lado do cliente, Progressive Web Applications (PWAs - Aplicativos Progressivos para Web) ou aplicativos móveis nativos.

Algumas ferramentas que você pode usar ao construir aplicativos mais complexos incluem:

• O React, um framework JavaScript que permite que os desenvolvedores construam front-ends para Web e nativos para seus back-ends de API REST.
• O Django, um framework Web gratuito e de código aberto, escrito em Python, que segue o padrão arquitetônico de software Model View Controller (MVC) [Modelo-Visão-Controle].
• Framework Django REST, um kit de ferramentas eficaz e flexível para a criação de APIs REST no Django.

Neste tutorial, você irá construir um aplicativo Web moderno com uma API REST separada com back-end e front-end, usando React, Django e o Django REST Framework. Ao usar o React com o Django, você conseguirá se beneficiar dos últimos avanços em JavaScript e desenvolvimento front-end. Em vez de construir um aplicativo Django que utilize um mecanismo de template interno, você usará o React como uma biblioteca de UI, beneficiando-se de sua abordagem informativa virtual Modelo de Documento por Objetos (do inglês Document Object Model - DOM) e de componentes que processam rapidamente alterações nos dados.

O aplicativo Web que você construirá armazena registros sobre os clientes em um banco de dados, e você pode usá-lo como um ponto de partida para um aplicativo CRM. Quando você terminar, você conseguirá criar, ler, atualizar e excluir registros usando uma interface React estilizada com o Bootstrap 4.

Pré-requisitos

Para completar este tutorial, você precisará de:

• Uma máquina de desenvolvimento com o Ubuntu 18.04.
• Python 3, pip e venv instalados em sua máquina, seguindo os Passos 1 e 2 de Como Instalar o Python 3 e Configurar um Ambiente Local de Programação no Ubuntu 18.04.
• Node.js 6+ e npm 5.2 ou superior instalados em sua máquina. Você pode instalar ambos, seguindo as instruções em Como Instalar o Node.js no Ubuntu 18.04, ao instalar a partir de um PPA (Personal Package Archive [Arquivo de Pacotes Pessoais].

Passo 1 — Criando um Ambiente Virtual em Python e Instalando Dependências

Neste passo, vamos criar um ambiente virtual e instalar as dependências necessárias para nosso aplicativo, incluindo o Django, o Django REST framework, e o django-cors-headers.

Nosso aplicativo usará dois servidores diferentes para o Django e o React. Eles executarão em portas diferentes e funcionarão como dois domínios separados. Por isso, precisamos habilitar o compartilhamento de recursos com origens diferentes (CORS) para enviar pedidos HTTP do React para o Django sem sermos bloqueado pelo navegador.

Navegue até seu diretório principal (home) e crie um ambiente virtual usando o módulo do Python 3 venv:

cd ~
python3 -m venv ./env

Ative o ambiente virtual criado usando source:

source env/bin/activate

A seguir, instale as dependências do projeto com o pip. Essas incluem:

• Django: o framework Web para o projeto.
• Framework Django REST: um aplicativo de terceiros que constrói APIs REST com o Django.
• django-cors-headers: um pacote que habilita o CORS.

Instale o framework Django:

pip install django djangorestframework django-cors-headers

Com as dependências do projeto instaladas, você pode criar o projeto Django e o front-end do React.

Passo 2 — Criando o Projeto Django

Neste passo, vamos gerar o projeto Django usando os comandos e utilitários a seguir:

• **django-admin startproject project-name**: django-admin é um utilitário de linha de comando usado para realizar tarefas com o Django. O comando startproject cria um novo projeto Django.

• **python manage.py startapp myapp**: manage.py é um script utilitário, adicionado automaticamente a cada projeto Django, que executa uma série de tarefas administrativas: criar novos aplicativos, migrar o banco de dados e atender ao projeto Django localmente. Seu comando startapp cria um aplicativo Django dentro do projeto Django. No Django, o termo aplicativo descreve um pacote Python que fornece alguns recursos em um projeto.

Para começar, crie o projeto Django com django-admin startproject. Vamos chamar nosso projeto de djangoreactproject:

django-admin startproject djangoreactproject 

Antes de continuar, vamos ver a estrutura do diretório do nosso projeto Django usando o comando tree.

sudo apt-get install tree

Navegue até a pasta djangoreactproject na raiz do seu projeto e execute o comando tree:

cd ~/djangoreactproject
tree

Você verá o seguinte resultado:

Output
├── djangoreactproject
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

A pasta ~/djangoreactproject é a raiz do projeto. Dentro dessa pasta, há vários arquivos que serão importantes para seu trabalho:

• manage.py: o script utilitário que faz uma série de tarefas administrativas.
• settings.py: o arquivo de configuração principal para o projeto Django onde você pode modificar as configurações do projeto. Essas configurações incluem variáveis como INSTALLED_APPS, uma lista de strings que designam os aplicativos habilitados para seu projeto. A documentação do Django tem mais informações sobre as configurações disponíveis.
• urls.py: este arquivo contém uma lista de padrões de URL e visualizações relacionadas. Cada padrão mapeia uma conexão entre um URL e a função que deve ser chamada para aquele URL. Para obter mais informações sobre URLs e visualizações, consulte nosso tutorial em Como Criar Visualizações no Django.

Nosso primeiro passo no desenvolvimento do projeto será configurar os pacotes que instalamos no passo anterior, incluindo o Django REST framework e o pacote Django CORS, adicionando-os às settings.py. Abra o arquivo com o nano ou com o seu editor favorito:

nano ~/djangoreactproject/djangoreactproject/settings.py

Navegue até a configuração INSTALLED_APPS e adicione os aplicativos rest_framework e corsheaders no final da lista:

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders'
]

A seguir, adicione o middleware corsheaders.middleware.CorsMiddleware do pacote CORS previamente instalado para a configuração do MIDDLEWARE. Esta configuração é uma lista de middlewares, uma classe Python que contém códigos processados cada vez que seu aplicativo Web lida com uma solicitação ou resposta:

...

MIDDLEWARE = [
...
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware'
]

A seguir, você pode habilitar o CORS. A configuração CORS_ORIGIN_ALLOW_ALL especifica se você quer ou não permitir o CORS para todos os domínios e aCORS_ORIGIN_WHITELISTé uma tupla Python que contém URLs permitidos. No nosso caso, uma vez que o servidor de desenvolvimento para React estará executando em http://lochhost:3000, vamos adicionar as novas configurações CORS_ORIGIN_ALLOW_ALL = False e CORS_ORIGIN_WHHELIST('localhost:3000',) ao nosso arquivo settings.py. Adicione essas configurações em qualquer lugar do arquivo:

...
CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
       'localhost:3000',
)
...

Você pode encontrar mais opções de configuração nos django-cors-headers docs.

Salve o arquivo e saia do editor quando você terminar.

Ainda no diretório ~/djangoreactproject, faça um novo aplicativo Django chamado customers:

python manage.py startapp customers

Isso irá conter os modelos e exibições para gerenciar clientes. Modelos (models) definem os campos e comportamentos dos dados do aplicativo, enquanto exibições (views) habilitam nosso aplicativo para lidar corretamente com solicitações Web e retornar as respostas necessárias.

A seguir, adicione este aplicativo na lista de aplicativos instalados no arquivo do seu projeto settings.py para que o Django o reconheça como parte do projeto. Abra as settings.py novamente:

nano ~/djangoreactproject/djangoreactproject/settings.py

Adicione o aplicativo customers:

...
INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
	'customers'
]
...

A seguir, migre o banco de dados e inicie o servidor local de desenvolvimento. Migrações consistem no modo que o Django tem de propagar as alterações que você faz nos modelos do esquema do seu banco de dados. Essas alterações podem incluir coisas como adicionar um campo ou excluir um modelo, por exemplo. Para saber mais sobre modelos e migrações, consulte o tópico Como Criar Modelos do Django.

Migre o banco de dados:

python manage.py migrate

Inicie o servidor local de desenvolvimento:

python manage.py runserver

Você verá um resultado similar ao seguinte:

Output
Performing system checks...

System check identified no issues (0 silenced).
October 22, 2018 - 15:14:50
Django version 2.1.2, using settings 'djangoreactproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Seu aplicativo Web estará executando do endereço http://127.0.0.1:8000. Se você navegar até este endereço no seu navegador Web você verá a seguinte página:

Neste ponto, deixe o aplicativo funcionando e abra um novo terminal para continuar desenvolvendo o projeto.

Passo 3 — Criando a Front-end React

Nesta seção, vamos criar o aplicativo com front-end do nosso projeto usando o React.

O React tem um utilitário oficial que permite que você crie rapidamente projetos React sem ter que configurar o Webpack diretamente. Webpack é um empacotador de módulos usado para empacotar ativos Web como o código JavaScript, CSS e imagens. Normalmente, antes de poder usar o Webpack você precisa definir várias opções de configuração, mas graças ao utilitário create-react-app você não precisa lidar com o Webpack diretamente até decidir que você precisa de mais controle. Para executar o create-react-app você pode usar o npx, uma ferramenta que executa pacotes npm binários.

No seu segundo terminal, certifique-se de estar em seu diretório de projeto:

cd ~/djangoreactproject

Crie um projeto React chamado frontend usando o create-react-app e o npx:

npx create-react-app frontend

A seguir, navegue dentro do seu aplicativo React e inicie o servidor de desenvolvimento:

cd ~/djangoreactproject/frontend
npm start

Seu aplicativo estará executando a partir do endereço http://localhost:3000/:

Deixe o servidor React de desenvolvimento funcionando e abra outra janela do terminal para prosseguir.

Para ver a estrutura do diretório do projeto inteiro até o momento, navegue até a pasta raiz e execute novamente o tree:

cd ~/djangoreactproject
tree

Você verá uma estrutura como essa:

Output
├── customers
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── djangoreactproject
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   └── manifest.json
│   ├── README.md
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── logo.svg
│   │   └── registerServiceWorker.js
│   └── yarn.lock
└── manage.py

Nosso aplicativo usará o Bootstrap 4 para estilizar a interface do React. Assim,nós o incluiremos no arquivo frontend/src/App.css, que gerencia nossas configurações CSS. Abra o arquivo:

nano ~/djangoreactproject/frontend/src/App.css

Adicione o seguinte import ao início do arquivo. Você pode excluir o conteúdo do arquivo existente, embora isso não seja necessário:

@import  'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

Aqui, @import é uma instrução CSS que é usada para importar regras de estilo de outras folhas de estilo.

Agora que criamos os aplicativos com back-end e front-end, vamos criar o modelo Customer e alguns dados demonstrativos.

Passo 4 — Criando o Modelo de Cliente e Dados Iniciais

Após criar o aplicativo Django e o front-end React, nosso próximo passo será criar o modelo Customer, que representa a tabela do banco de dados que irá reter informações sobre os clientes. Você não precisa de nenhuma SQL (Structured Query Language, ou Linguagem de Consulta Estruturada), uma vez que o Object Relational Mapper (ORM) [Mapeamento Objeto-Relacional] do Django gerenciará as operações de banco de dados, mapeando as classes e variáveis em Python até as tabelas e colunas em SQL. Desta forma, o ORM do Django separa as interações em SQL com o banco de dados através de uma interface em Python.

Ative seu ambiente virtual novamente:

cd ~
source env/bin/activate

Vá até o diretório customers e abra o models.py, um arquivo Python que possui os modelos do seu aplicativo:

cd ~/djangoreactproject/customers/
nano models.py

O arquivo terá o seguinte conteúdo:

from django.db import models
# Create your models here.

A API do modelo Customer já foi importada para o arquivo, graças à declaração de importação from django.db import models. Agora, você adicionará a classe Customer, que estende models.Model. Cada modelo no Django é uma classe em Python que estende o django.db.models.Model.

O modelo Customer terá esses campos de banco de dados:

• first_name — O primeiro nome do cliente.
• last_name — O sobrenome do cliente.
• email — O endereço de e-mail do cliente.
• phone — O número de telefone do cliente.
• address — O endereço do cliente.
• description — A descrição do cliente.
• createdAt — A data em que o cliente é adicionado.

Também adicionaremos a função __str__(), que define como o modelo será exibido. No nosso caso, ela estará com o primeiro nome do cliente. Para saber mais sobre a construção de classes e definição de objetos, consulte o tópico pelo link How To Construct Classes and Define Objects in Python 3.

Adicione o código a seguir ao arquivo:

from django.db import models

class Customer(models.Model):
	first_name = models.CharField("First name", max_length=255)
	last_name = models.CharField("Last name", max_length=255)
	email = models.EmailField()
	phone = models.CharField(max_length=20)
	address =  models.TextField(blank=True, null=True)
	description = models.TextField(blank=True, null=True)
	createdAt = models.DateTimeField("Created At", auto_now_add=True)
	
	def __str__(self):
		return self.first_name

A seguir, migre o banco de dados para criar as tabelas de banco de dados. O comando makemigrations cria os arquivos de migração onde as alterações do modelo serão adicionadas e o comando migrate aplica as alterações feitas nos arquivos de migrações ao banco de dados.

Navegue novamente para a pasta raiz do projeto:

cd ~/djangoreactproject

Execute o que vem a seguir para criar os arquivos de migração:

python manage.py makemigrations

Você receberá um resultado que se parece com este:

Output
customers/migrations/0001_initial.py
    - Create model Customer

Aplique essas alterações ao banco de dados:

python manage.py migrate

Você verá o resultado indicando uma migração bem-sucedida:

Output
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
  Applying customers.0001_initial... OK

Depois, você usará um arquivo de migração de dados para criar os dados iniciais do cliente. Um arquivo de migração de dados é uma migração que adiciona ou altera dados no banco de dados. Crie um arquivo de migração de dados vazio para o aplicativo customers:

python manage.py makemigrations --empty --name customers customers

Você verá a seguinte confirmação com o nome do seu arquivo de migração:

Output
Migrations for 'customers':
  customers/migrations/0002_customers.py

Note que o nome do seu arquivo de migração é 0002_customers.py.

Na sequência, navegue dentro da pasta de migração do aplicativo customers:

cd ~/djangoreactproject/customers/migrations

Abra o arquivo de migração criado:

nano 0002_customers.py

Este é o conteúdo inicial do arquivo:

from django.db import migrations

class Migration(migrations.Migration):
    dependencies = [
        ('customers', '0001_initial'),
    ]
    operations = [
    ]        

A instrução de importação importa a API migrations, uma API Django para criação de migrações, do django.db, um pacote integrado que contém classes para trabalhar com bancos de dados.

A classe Migration é uma classe em Python que descreve as operações que são executadas durante a migração de bancos de dados. Esta classe estende migrations.Migration e tem duas listas:

• dependencies: contém as migrações dependentes.
• operations: contém as operações que serão executadas quando aplicarmos a migração.

Na sequência, adicione um method para criar os dados de cliente da demonstração. Adicione o seguinte método antes da definição da classe Migration:

...
def create_data(apps, schema_editor):
    Customer = apps.get_model('customers', 'Customer')
    Customer(first_name="Customer 001", last_name="Customer 001", email="customer001@email.com", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()

...

Neste método, estamos pegando a classe Customer do nosso app customers e criando um cliente de demonstração para inserir no banco de dados.

Para obter a classe Customer, que irá habilitar a criação de novos clientes, usamos o método get_model() do objeto apps. O objeto apps representa o registry dos aplicativos instalados e seus modelos de banco de dados.

O objeto apps passará do método RunPython() quando o usamos para executar o create_data(). Adicione o método migrations.RunPython() à lista operations vazia:

...
    operations = [
        migrations.RunPython(create_data),
    ]  

O RunPython() faz parte da API com Migrations que permite que você execute códigos em Python personalizados em uma migração. Nossa lista operations especifica que este método será executado quando aplicarmos a migração.

Este é o arquivo completo:

from django.db import migrations

def create_data(apps, schema_editor):
    Customer = apps.get_model('customers', 'Customer')
    Customer(first_name="Customer 001", last_name="Customer 001", email="customer001@email.com", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()

class Migration(migrations.Migration):
    dependencies = [
        ('customers', '0001_initial'),
    ]
    operations = [
        migrations.RunPython(create_data),
    ]        

Para obter mais informações sobre a migração de dados, consulte a documentação sobre migrações de dados no Django.

Para migrar seu banco de dados, navegue primeiro de volta para a pasta raiz do seu projeto:

cd ~/djangoreactproject

Migre o seu banco de dados para criar os dados para demonstração:

python manage.py migrate

Você verá o resultado que confirma a migração:

Output
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
  Applying customers.0002_customers... OK

Para obter mais detalhes sobre este processo, volte para o link How To Create Django Models.

Com o modelo Customer e dados de demonstração criados, podemos continuar para a construção da API REST.

Passo 5 — Criando a API REST

Neste passo, vamos criar a API REST utilizando o Django REST Framework. Vamos criar várias *visualizações da API *diferentes. Uma visualização de API é uma função que lida com um pedido ou chamada de API, enquanto um *ponto de extremidade de API *é um URL único que representa um ponto de contato com o sistema REST. Por exemplo, quando o usuário envia um pedido GET para um ponto de extremidade de API, o Django chama a função correspondente ou a visualização de API para lidar com o pedido e retornar quaisquer resultados possíveis.

Também vamos usar os serializers. Um serializador no Django REST Framework permite que as instâncias de modelos complexas e o QuerySets sejam convertidos em formato JSON para consumo de API. A classe de serializadores também pode funcionar na outra direção, fornecendo mecanismos para processar e desserializar dados em modelos Django e QuerySets.

Nossos pontos de extremidade de API irão incluir:

• api/customers: este ponto de extremidade é usado para criar clientes e retorna conjuntos de clientes paginados.
• api/customers/<pk>: este ponto de extremidade é usado para obter, atualizar e excluir clientes únicos por chave ou ID primária.

Também vamos criar URLs no arquivo urls.py do projeto para os pontos de extremidade correspondentes (ou seja, api/customers e <pk>).

Vamos começar criando a classe de serializadores para nosso modelo Customer.

Adicionando a Classe de Serializadores

Criar uma classe de serializadores para nosso modelo Customer é necessário para transformar as instâncias de cliente e os QuerySets de e para JSON. Para criar a classe de serializadores, faça primeiro um arquivo serializers.py dentro do aplicativo customers:

cd ~/djangoreactproject/customers/
nano serializers.py

Adicione o seguinte código para importar o API do serializador e o modelo Customer:

from rest_framework import serializers
from .models import Customer

A seguir, crie uma classe de serializadores que estende serializers.ModelSerializer e especifica os campos que serão serializados:

...
class CustomerSerializer(serializers.ModelSerializer):

    class Meta:
        model = Customer 
        fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')

A classe Meta especifica o modelo e os campos para serializar: pk, first_name, last_name, email, phone, address, description.

Este é o conteúdo completo do arquivo:

from rest_framework import serializers
from .models import Customer

class CustomerSerializer(serializers.ModelSerializer):

    class Meta:
        model = Customer 
        fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')

Agora que criamos nossa classe de serializadores, podemos adicionar as visualizações da API.

Adicionando as Visualizações da API

Nesta seção, vamos criar as visualizações da API para nosso aplicativo que serão chamadas pelo Django quando o usuário visitar o ponto de extremidade correspondente à função da visualização.

Abra ~/djangoreactproject/customers/views.py:

nano ~/djangoreactproject/customers/views.py

Exclua o que estiver ali e adicione as seguintes importações:

from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import Customer 
from .serializers import *

Estamos importando o serializador que criamos, junto com o modelo Customer e as APIs com o Django e o Django REST Framework.

Em seguida, adicione a visualização para processar os pedidos do POST e GET HTTP:

...

@api_view(['GET', 'POST'])
def customers_list(request):
    """
 List  customers, or create a new customer.
 """
    if request.method == 'GET':
        data = []
        nextPage = 1
        previousPage = 1
        customers = Customer.objects.all()
        page = request.GET.get('page', 1)
        paginator = Paginator(customers, 10)
        try:
            data = paginator.page(page)
        except PageNotAnInteger:
            data = paginator.page(1)
        except EmptyPage:
            data = paginator.page(paginator.num_pages)

        serializer = CustomerSerializer(data,context={'request': request} ,many=True)
        if data.has_next():
            nextPage = data.next_page_number()
        if data.has_previous():
            previousPage = data.previous_page_number()
        
        return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})

    elif request.method == 'POST':
        serializer = CustomerSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Primeiramente, usamos o decorador @api_view(['GET', 'POST']) para criar uma visualização de API que possa aceitar solicitações GET e POST. Um decorator é uma função que assume outra função e a amplia de maneira dinâmica.

No corpo do método, utilizamos a variável request.method para verificar o método HTTP atual e executar a lógica correspondente, dependendo do tipo de solicitação:

• Se for uma solicitação GET, o método pagina os dados utilizando o Paginator do Django e retorna a primeira página de dados após a serialização, a contagem de clientes disponíveis, o número de páginas disponíveis, e os links para as páginas anteriores e as páginas posteriores. O Paginator é uma classe integrada do Django que organiza uma lista de dados em páginas e proporciona métodos para acessar os itens de cada página.
• Se for uma solicitação POST, o método serializa os dados recebidos do cliente e chama então o método save() do objeto serializador. Então, ele retorna um objeto de Resposta, uma instância do HttpResponse, com um código de status 201. Cada visualização que você cria é responsável por retornar um objeto HttpResponse. O método save() salva os dados serializados no banco de dados.

Para saber mais sobre HttpResponse e visualizações, leia esta discussão: creating view functions.

Agora, adicione a visualização de API que será responsável por processar os pedidos GET, PUT e DELETE para obter, atualizar e excluir clientes por pk (chave primária):

...
@api_view(['GET', 'PUT', 'DELETE'])
def customers_detail(request, pk):
 """
 Retrieve, update or delete a customer by id/pk.
 """
    try:
        customer = Customer.objects.get(pk=pk)
    except Customer.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)

    if request.method == 'GET':
        serializer = CustomerSerializer(customer,context={'request': request})
        return Response(serializer.data)

    elif request.method == 'PUT':
        serializer = CustomerSerializer(customer, data=request.data,context={'request': request})
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    elif request.method == 'DELETE':
        customer.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

O método é decorado com @api_view(['GET', 'PUT', 'DELETE']) para indicara que se trata de uma visualização de API que pode aceitar solicitações GET, PUT e DELETE.

A checagem no campo request.method verifica o método de solicitação e, dependendo do seu valor, chama a lógica correta:

• Se for um pedido GET, os dados do cliente são serializados e enviados utilizando um objeto de Resposta.
• Se for um pedido PUT, o método cria um serializador para novos dados do cliente. Em seguida, ele chama o método save() do objeto serializador criado. Finalmente, ele envia um objeto de Resposta com o cliente atualizado.
• Se for um pedido DELETE, o método chama o método delete() do objeto cliente a excluir; depois, retorna um objeto de Resposta sem dados.

O arquivo final se parece com este:

from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import Customer 
from .serializers import *


@api_view(['GET', 'POST'])
def customers_list(request):
    """
 List  customers, or create a new customer.
 """
    if request.method == 'GET':
        data = []
        nextPage = 1
        previousPage = 1
        customers = Customer.objects.all()
        page = request.GET.get('page', 1)
        paginator = Paginator(customers, 5)
        try:
            data = paginator.page(page)
        except PageNotAnInteger:
            data = paginator.page(1)
        except EmptyPage:
            data = paginator.page(paginator.num_pages)

        serializer = CustomerSerializer(data,context={'request': request} ,many=True)
        if data.has_next():
            nextPage = data.next_page_number()
        if data.has_previous():
            previousPage = data.previous_page_number()
        
        return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})

    elif request.method == 'POST':
        serializer = CustomerSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

@api_view(['GET', 'PUT', 'DELETE'])
def customers_detail(request, pk):
    """
 Retrieve, update or delete a customer by id/pk.
 """
    try:
        customer = Customer.objects.get(pk=pk)
    except Customer.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)

    if request.method == 'GET':
        serializer = CustomerSerializer(customer,context={'request': request})
        return Response(serializer.data)

    elif request.method == 'PUT':
        serializer = CustomerSerializer(customer, data=request.data,context={'request': request})
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    elif request.method == 'DELETE':
        customer.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

Agora, podemos seguir em frente para criar nossos pontos de extremidade.

Adicionando Pontos de extremidade de API

Agora, vamos criar os pontos de extremidade de API: api/customers/, para consultar e criar clientes e api/customers/<pk>, para obter, atualizar ou excluir clientes únicos por pk.

Abra ~/djangoreactproject/djangoreactproject/urls.py:

nano ~/djangoreactproject/djangoreactproject/urls.py

Deixe o que está lá, mas adicione a importação às visualizações do customers no topo do arquivo:

from django.contrib import admin
from django.urls import path
from customers import views
from django.conf.urls import url

Em seguida, adicione os URLs api/customers/ e api/customers/<pk> à lista urlpatterns que contém os URLs do aplicativo:

...

urlpatterns = [
	path('admin/', admin.site.urls),
	url(r'^api/customers/$', views.customers_list),
	url(r'^api/customers/(?P<pk>[0-9]+)$', views.customers_detail),
]

Com nossos pontos de extremidade de REST criados, vamos ver como podemos consumi-los.

Passo 6 — Consumindo a API REST com o Axios

Neste passo, vamos instalar o Axios, o cliente HTTP que vamos usar para fazer chamadas de API. Também vamos criar uma classe para consumir os pontos de extremidade da API que criamos.

Primeiramente, desative o seu ambiente virtual:

deactivate

Em seguida, navegue até sua pasta frontend:

cd ~/djangoreactproject/frontend

Instale o axios a partir do npm utilizando:

npm install axios --save

A opção --save adiciona a dependência do axios ao arquivo package.json do seu aplicativo.

Em seguida, crie um arquivo JavaScript chamado CustomersService.js, que irá conter o código para chamar as APIs REST. Vamos fazer isso dentro da pasta src, onde o código do aplicativo para nosso projeto irá viver:

cd src
nano CustomersService.js

Adicione o seguinte código, que contém métodos para se conectar à API REST do Django:

import axios from 'axios';
const API_URL = 'http://localhost:8000';

export default class CustomersService{
	
	constructor(){}
	
	
	getCustomers() {
		const url = `${API_URL}/api/customers/`;
		return axios.get(url).then(response => response.data);
	}  
	getCustomersByURL(link){
		const url = `${API_URL}${link}`;
		return axios.get(url).then(response => response.data);
	}
	getCustomer(pk) {
		const url = `${API_URL}/api/customers/${pk}`;
		return axios.get(url).then(response => response.data);
	}
	deleteCustomer(customer){
		const url = `${API_URL}/api/customers/${customer.pk}`;
		return axios.delete(url);
	}
	createCustomer(customer){
		const url = `${API_URL}/api/customers/`;
		return axios.post(url,customer);
	}
	updateCustomer(customer){
		const url = `${API_URL}/api/customers/${customer.pk}`;
		return axios.put(url,customer);
	}
}

A classe CustomersService irá chamar os seguintes métodos do Axios:

• getCustomers(): obtém a primeira página de clientes.
• getCustomersByURL(): obtém clientes por URL. Isso possibilita obter-se as próximas páginas de clientes, atravessando-se links do tipo /api/customers/?page=2.
• getCustomer(): obtém um cliente pela chave primária.
• createCustomer(): cria um cliente.
• updateCustomer(): atualiza um cliente.
• deleteCustomer(): exclui um cliente.

Agora, podemos exibir os dados de nossa API na nossa interface com a UI React criando um componente CustomersList.

Passo 7 — Exibindo Dados da API no Aplicativo React

Neste passo, vamos criar o componente do aplicativo React chamado CustomersList. Um componente do React representa uma parte da UI; ele também permite que você divida a UI em pedaços independentes e reutilizáveis.

Inicie criando o CustomersList.js em frontend/src:

nano ~/djangoreactproject/frontend/src/CustomersList.js

Inicie importando o React e o Component para criar um componente do React:

import  React, { Component } from  'react';

Em seguida, importe e crie a instância do módulo CustomersService que você criou no passo anterior, que proporciona métodos que interagem com o back-end da API REST:

...
import  CustomersService  from  './CustomersService';

const  customersService  =  new  CustomersService();

Em seguida, crie um componente CustomersList que estende o Component para chamar a API REST. Um componente React deve estender ou subclassificar a classe Component. Para saber mais sobre as classes E6 e herança, consulte nossos tutorial Understanding Classes in JavaScript.

Adicione o seguinte código para criar um componente do React que estende o react.Component:

...
class  CustomersList  extends  Component {

	constructor(props) {
		super(props);
		this.state  = {
			customers: [],
			nextPageURL:  ''
		};
		this.nextPage  =  this.nextPage.bind(this);
		this.handleDelete  =  this.handleDelete.bind(this);
	}
}
export  default  CustomersList;

Dentro do construtor, estamos inicializando o objeto de ](https://reactjs.org/docs/react-component.html#state)estado[. Isso mantém as variáveis de estado do nosso componente utilizando uma matriz de clientes vazia. Esta matriz conterá os clientes e um nextPageURL que irá reter o URL da próxima página a ser recuperada do back-end da API. Também estamos ligando os métodos nextPage() e o handleDelete() a este para que eles fiquem acessíveis a partir do código HTML.

Em seguida, adicione o método componentDidMount() e uma chamada para o getCustomers() dentro da classe CustomersList, antes da chave de fechamento.

O método componentDidMount() é um método de ciclo de vida do componente que é chamado quando o componente é criado e inserido no DOM. O getCustomers() chama o objeto Customers Service para obter a primeira página de dados e o link da página seguinte a partir do back-end do Django:

...
componentDidMount() {
	var  self  =  this;
	customersService.getCustomers().then(function (result) {
		self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
	});
}

Agora, adicione o método handleDelete() que lida com a exclusão de um cliente, abaixo do componentDidMount():

...
handleDelete(e,pk){
	var  self  =  this;
	customersService.deleteCustomer({pk :  pk}).then(()=>{
		var  newArr  =  self.state.customers.filter(function(obj) {
			return  obj.pk  !==  pk;
		});
		self.setState({customers:  newArr})
	});
}

O método handleDelete() chama o método deleteCustomer() para excluir um cliente utilizando sua pk (chave primária). Se a operação for bem-sucedida, a matriz de customers é filtrada em relação ao cliente removido.

Em seguida, adicione um método nextPage() para obter os dados da próxima página e atualize o próximo link da página:

...
nextPage(){
	var  self  =  this;
	customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
		self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
	});
}

O método nextPage() chama um método getCustomersByURL(), que recebe o próximo URL da página do objeto de estado, this.state.nextPageURL​​​ e atualiza a matriz de customers com os dados retornados.

Finalmente, adicione o método render() do componente, que renderiza uma tabela de clientes a partir do estado do componente:

...
render() {

	return (
	<div  className="customers--list">
		<table  className="table">
			<thead  key="thead">
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Phone</th>
				<th>Email</th>
				<th>Address</th>
				<th>Description</th>
				<th>Actions</th>
			</tr>
			</thead>
			<tbody>
				{this.state.customers.map( c  =>
				<tr  key={c.pk}>
					<td>{c.pk}  </td>
					<td>{c.first_name}</td>
					<td>{c.last_name}</td>
					<td>{c.phone}</td>
					<td>{c.email}</td>
					<td>{c.address}</td>
					<td>{c.description}</td>
					<td>
					<button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>
					<a  href={"/customer/" + c.pk}> Update</a>
					</td>
				</tr>)}
			</tbody>
		</table>
		<button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>
	</div>
	);
}

Este é o conteúdo completo do arquivo:

import  React, { Component } from  'react';
import  CustomersService  from  './CustomersService';

const  customersService  =  new  CustomersService();

class  CustomersList  extends  Component {

constructor(props) {
	super(props);
	this.state  = {
		customers: [],
		nextPageURL:  ''
	};
	this.nextPage  =  this.nextPage.bind(this);
	this.handleDelete  =  this.handleDelete.bind(this);
}

componentDidMount() {
	var  self  =  this;
	customersService.getCustomers().then(function (result) {
		console.log(result);
		self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
	});
}
handleDelete(e,pk){
	var  self  =  this;
	customersService.deleteCustomer({pk :  pk}).then(()=>{
		var  newArr  =  self.state.customers.filter(function(obj) {
			return  obj.pk  !==  pk;
		});
		
		self.setState({customers:  newArr})
	});
}

nextPage(){
	var  self  =  this;
	console.log(this.state.nextPageURL);		
	customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
		self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
	});
}
render() {

	return (
		<div  className="customers--list">
			<table  className="table">
			<thead  key="thead">
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Phone</th>
				<th>Email</th>
				<th>Address</th>
				<th>Description</th>
				<th>Actions</th>
			</tr>
			</thead>
			<tbody>
			{this.state.customers.map( c  =>
				<tr  key={c.pk}>
				<td>{c.pk}  </td>
				<td>{c.first_name}</td>
				<td>{c.last_name}</td>
				<td>{c.phone}</td>
				<td>{c.email}</td>
				<td>{c.address}</td>
				<td>{c.description}</td>
				<td>
				<button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>
				<a  href={"/customer/" + c.pk}> Update</a>
				</td>
			</tr>)}
			</tbody>
			</table>
			<button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>
		</div>
		);
  }
}
export  default  CustomersList;

Agora que criamos o componente CustomersList para exibir a lista de clientes, podemos adicionar o componente que lida com a criação e as atualizações do cliente.

Passo 8 — Adicionando os Componentes Customer Create e Update do React

Neste passo, vamos criar o componente CustomerCreateUpdate que irá lidar com a criação e atualização dos clientes. Ele irá fazer isso fornecendo um formulário que os usuários podem usar para digitar dados sobre um novo cliente ou atualizar um item existente.

No frontend/src, crie um arquivo CustomerCreateUpdate.js:

nano ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

Adicione o seguinte código para criar um componente do React, import o React e o Component:

import  React, { Component } from  'react';

Além disso, podemos importar e instanciar a classe CustomersService que criamos no passo anterior, a qual proporciona métodos que interagem com o back-end da API REST:

...
import  CustomersService  from  './CustomersService';

const  customersService  =  new  CustomersService();

Em seguida, crie um componente CustomerCreateUpdate que estende o Component para criar e atualizar os clientes:

...
class  CustomerCreateUpdate  extends  Component {
	
	constructor(props) {
		super(props);
	}

}
export default CustomerCreateUpdate;

Dentro da definição da classe, adicione o método render() do componente, que renderiza uma forma HTML que recebe informações sobre o cliente:

...
render() {
        return (
          <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>
              First Name:</label>
              <input className="form-control" type="text" ref='firstName' />
            
            <label>
              Last Name:</label>
              <input className="form-control" type="text" ref='lastName'/>
            
            <label>
              Phone:</label>
              <input className="form-control" type="text" ref='phone' />
            
            <label>
              Email:</label>
              <input className="form-control" type="text" ref='email' />
            
            <label>
              Address:</label>
              <input className="form-control" type="text" ref='address' />
            
            <label>
              Description:</label>
              <textarea className="form-control" ref='description' ></textarea>
              

            <input className="btn btn-primary" type="submit" value="Submit" />
            </div>
          </form>
        );
  }

Para cada elemento form input, o método adiciona uma propriedade ref para acessar e definir o valor do elemento do formulário.

Em seguida, acima do método render(), defina um método handleSubmit(event) para que você tenha a funcionalidade apropriada quando um usuário clicar no botão para enviar:

...
handleSubmit(event) {
	const { match: { params } } =  this.props;
	if(params  &&  params.pk){
		this.handleUpdate(params.pk);
	}
	else
	{
		this.handleCreate();
	}
	event.preventDefault();
}

...

O método handleSubmit(event) cuida do envio do formulário e, dependendo da rota, chama o método handleUpdate(pk) para atualizar o cliente com o método pk aprovado ou o método handleCreate() para criar um novo cliente. Vamos definir esses métodos em breve.

De volta ao construtor do componente, conecte o método handleSubmit() recém-adicionado a este, para que você possa acessá-lo em seu formulário:

...
class CustomerCreateUpdate extends Component {

constructor(props) {
	super(props);
	this.handleSubmit = this.handleSubmit.bind(this);
}
...

Em seguida, defina o método handleCreate() para criar um cliente a partir dos dados do formulário. Acima do método handleSubmit(event) adicione o seguinte código:

...
handleCreate(){
	customersService.createCustomer(
		{
		"first_name":  this.refs.firstName.value,
		"last_name":  this.refs.lastName.value,
		"email":  this.refs.email.value,
		"phone":  this.refs.phone.value,
		"address":  this.refs.address.value,
		"description":  this.refs.description.value
		}).then((result)=>{
				alert("Customer created!");
		}).catch(()=>{
				alert('There was an error! Please re-check your form.');
		});
}

...

O método handleCreate() será usado para criar um cliente a partir dos dados inseridos. Ele chama o método CustomersService.createCustomer() correspondente que faz a API real chamar o back-end para criar um cliente.

Depois, abaixo do método handleCreate(), defina o método handleUpdate(pk) para implementar as atualizações:

...
handleUpdate(pk){
customersService.updateCustomer(
	{
	"pk":  pk,
	"first_name":  this.refs.firstName.value,
	"last_name":  this.refs.lastName.value,
	"email":  this.refs.email.value,
	"phone":  this.refs.phone.value,
	"address":  this.refs.address.value,
	"description":  this.refs.description.value
	}
	).then((result)=>{
		
		alert("Customer updated!");
	}).catch(()=>{
		alert('There was an error! Please re-check your form.');
	});
}

O método updateCustomer() irá atualizar um cliente através da pk utilizando as novas informações do formulário de informações do cliente. Ele chama o método customersService.updateCustomer().

Em seguida, adicione um método componentDidMount(). Se o usuário visitar uma rota customer/:pk, queremos preencher o formulário com informações relacionadas ao cliente, utilizando a chave primária do URL. Para fazer isso, podemos adicionar o método getCustomer(pk) após o componente ser montado no evento do ciclo de vida do componentDidMount(). Adicione o seguinte código abaixo do construtor do componente para adicionar este método:

...
componentDidMount(){
	const { match: { params } } =  this.props;
	if(params  &&  params.pk)
	{
		customersService.getCustomer(params.pk).then((c)=>{
			this.refs.firstName.value  =  c.first_name;
			this.refs.lastName.value  =  c.last_name;
			this.refs.email.value  =  c.email;
			this.refs.phone.value  =  c.phone;
			this.refs.address.value  =  c.address;
			this.refs.description.value  =  c.description;
		})
	}
}

Este é o conteúdo completo do arquivo:

import React, { Component } from 'react';
import CustomersService from './CustomersService';

const customersService = new CustomersService();

class CustomerCreateUpdate extends Component {
    constructor(props) {
        super(props);
    
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      componentDidMount(){
        const { match: { params } } = this.props;
        if(params && params.pk)
        {
          customersService.getCustomer(params.pk).then((c)=>{
            this.refs.firstName.value = c.first_name;
            this.refs.lastName.value = c.last_name;
            this.refs.email.value = c.email;
            this.refs.phone.value = c.phone;
            this.refs.address.value = c.address;
            this.refs.description.value = c.description;
          })
        }
      }

      handleCreate(){
        customersService.createCustomer(
          {
            "first_name": this.refs.firstName.value,
            "last_name": this.refs.lastName.value,
            "email": this.refs.email.value,
            "phone": this.refs.phone.value,
            "address": this.refs.address.value,
            "description": this.refs.description.value
        }          
        ).then((result)=>{
          alert("Customer created!");
        }).catch(()=>{
          alert('There was an error! Please re-check your form.');
        });
      }
      handleUpdate(pk){
        customersService.updateCustomer(
          {
            "pk": pk,
            "first_name": this.refs.firstName.value,
            "last_name": this.refs.lastName.value,
            "email": this.refs.email.value,
            "phone": this.refs.phone.value,
            "address": this.refs.address.value,
            "description": this.refs.description.value
        }          
        ).then((result)=>{
          console.log(result);
          alert("Customer updated!");
        }).catch(()=>{
          alert('There was an error! Please re-check your form.');
        });
      }
      handleSubmit(event) {
        const { match: { params } } = this.props;

        if(params && params.pk){
          this.handleUpdate(params.pk);
        }
        else
        {
          this.handleCreate();
        }

        event.preventDefault();
      }
    
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>
              First Name:</label>
              <input className="form-control" type="text" ref='firstName' />
            
            <label>
              Last Name:</label>
              <input className="form-control" type="text" ref='lastName'/>
            
            <label>
              Phone:</label>
              <input className="form-control" type="text" ref='phone' />
            
            <label>
              Email:</label>
              <input className="form-control" type="text" ref='email' />
            
            <label>
              Address:</label>
              <input className="form-control" type="text" ref='address' />
            
            <label>
              Description:</label>
              <textarea className="form-control" ref='description' ></textarea>
              

            <input className="btn btn-primary" type="submit" value="Submit" />
            </div>
          </form>
        );
      }  
}

export default CustomerCreateUpdate;

Com o componente CustomerCreateUpdate criado, podemos atualizar o componente principal do App para adicionar links aos diferentes componentes que criamos.

Passo 9 — Atualizando o Componente Principal do App

Nesta seção, atualizaremos o componente App do nosso aplicativo para criar links para os componentes que criamos nos passos anteriores.

A partir da pasta frontend, execute o seguinte comando para instalar o React Router, que permite que você adicione roteamento e navegação entre vários componentes do React:

cd ~/djangoreactproject/frontend
npm install --save react-router-dom

Em seguida, abra ~/djangoreactproject/frontend/src/App.js:

nano ~/djangoreactproject/frontend/src/App.js

Exclua tudo o que está lá e adicione o seguinte código para importar as classes necessárias para adicionar roteamentos. Esses incluem o BrowserRouter, que cria um componente Router e o Route, que cria um componente de rota:

import  React, { Component } from  'react';
import { BrowserRouter } from  'react-router-dom'
import { Route, Link } from  'react-router-dom'
import  CustomersList  from  './CustomersList'
import  CustomerCreateUpdate  from  './CustomerCreateUpdate'
import  './App.css';

O BrowserRoutermantém a UI em sincronia com o URL utilizando a API de histórico HTML5.

Na sequência, crie um layout básico que fornece o componente base a ser encapsulado pelo componente BrowserRouter:

...

const  BaseLayout  = () => (
<div  className="container-fluid">
	<nav  className="navbar navbar-expand-lg navbar-light bg-light">
		<a  className="navbar-brand"  href="#">Django React Demo</a>
		<button  className="navbar-toggler"  type="button"  data-toggle="collapse"  data-target="#navbarNavAltMarkup"  aria-controls="navbarNavAltMarkup"  aria-expanded="false"  aria-label="Toggle navigation">
		<span  className="navbar-toggler-icon"></span>
	</button>
	<div  className="collapse navbar-collapse"  id="navbarNavAltMarkup">
		<div  className="navbar-nav">
			<a  className="nav-item nav-link"  href="/">CUSTOMERS</a>
			<a  className="nav-item nav-link"  href="/customer">CREATE CUSTOMER</a>
		</div>
	</div>
	</nav>
	<div  className="content">
		<Route  path="/"  exact  component={CustomersList}  />
		<Route  path="/customer/:pk"  component={CustomerCreateUpdate}  />
		<Route  path="/customer/"  exact  component={CustomerCreateUpdate}  />
	</div>
</div>
)

Usamos o componente Route para definir as rotas do nosso aplicativo; o componente que o roteador deve carregar tão logo encontre um que seja compatível. Cada rota precisa de um path para especificar o caminho compatível e de um component para especificar o componente a carregar. A propriedade exact diz ao roteador para corresponder ao caminho exato.

Finalmente, crie o componente App, o componente root ou o componente de nível superior do nosso aplicativo React:

...

class  App  extends  Component {

render() {
	return (
	<BrowserRouter>
		<BaseLayout/>
	</BrowserRouter>
	);
}
}
export  default  App;

Nós juntamos o componente BaseLayout ao componente BrowserRouter, uma vez que o nosso app deverá ser executado no navegador.

O arquivo final se parece com este:

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom'
import { Route, Link } from 'react-router-dom'

import  CustomersList from './CustomersList'
import  CustomerCreateUpdate  from './CustomerCreateUpdate'
import './App.css';

const BaseLayout = () => (
  <div className="container-fluid">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <a className="navbar-brand" href="#">Django React Demo</a>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div className="navbar-nav">
      <a className="nav-item nav-link" href="/">CUSTOMERS</a>
      <a className="nav-item nav-link" href="/customer">CREATE CUSTOMER</a>
      
    </div>
  </div>
</nav>  

    <div className="content">
      <Route path="/" exact component={CustomersList} />
      <Route path="/customer/:pk"  component={CustomerCreateUpdate} />
      <Route path="/customer/" exact component={CustomerCreateUpdate} />

    </div>

  </div>
)

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <BaseLayout/>
      </BrowserRouter>
    );
  }
}

export default App;

Após adicionar o roteamento ao nosso aplicativo, estamos agora prontos para testar o aplicativo. Navegue até o endereço http://localhost:3000. Você deve ver a primeira página do aplicativo:

Com este aplicativo em funcionamento, agora você tem a base de um aplicativo de CRM.

Conclusão

Neste tutorial, você criou um aplicativo de demonstração utilizando o Django e o React. Você usou Django REST framework para construir a API REST, o Axios para consumir a API, e o Bootstrap 4 para estilizar o seu CSS. Você pode encontrar o código-fonte deste projeto neste repositório do GitHub.

Esta configuração de tutorial usou apps separados de front-end e back-end. Para obter uma abordagem diferente para integrar o React ao Django, verifique este tutorial e este tutorial.

Para saber mais sobre a construção de um aplicativo com o Django, você pode seguir as séries de desenvolvimento do Django. Você também pode considerar os documentos oficiais do Django.