Dino App with React Typescript Django Tutorial

Este é um projeto com Django Rest Framework e React + Typescript para uma imersão em desenvolvimento web na UFTM.

Requisitos

• python 3.8
• Windows 10

Setup inicial

• Os comandos a seguir devem ser digitados no terminal:

mkdir dinopedia
cd dinopedia
python -m venv env
. env/Scripts/activate (Windows) ou
source env/bin/activate (Linux)
pip install django
pip install djangorestframework
pip install pillow
django-admin startproject core .

• Para testar digitar python manage.py runserver no terminal e, depois no navegador de internet, digitar http://localhost:8000

Criando o Models do app e adicionando ao admin

• Digitar no terminal python manage.py startapp dinosaurs
• Incluir 'rest_framework' e 'dinosaurs' em INSTALLED_APPS, no arquivo settings.py
• Criar o model do app em dinosaurs/models.py
• Liberar o model criado para o admin em dinousaurs/admin.py
• Fazer as migrations e executar as mesmas, em seguida criar o superuser. Para isso, no terminal:

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

• Para testar digitar python manage.py runserver no terminal e, depois no navegador de internet, digitar http://localhost:8000/admin
• Adicione 2 dinossauros para teste.

Criando views para a api

• Criar serializers em dinosaurs/serializers.py
• Criar view para Listar dinossauros (existe várias formas de fazer)
• Criar url em dinosaurs/urls.py para acessar a view criada
• Criar url em core/urls.py para redirecionar para url do passo anterior
• Para testar digitar python manage.py runserver no terminal e, depois no navegador de internet, digitar http://localhost:8000/api/dinosaurs

Renderizando arquivos estáticos em desenvolvimento

• No arquivo core/urls.py adicione:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

• No arquivo core/settings.py adicione:

import os

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), )
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

• Para testar digitar python manage.py runserver no terminal e, depois no navegador de internet, digitar http://localhost:8000/api/dinosaurs. Entre em alguma url apresentada no campo "photo". A imagem deve ser mostrada no navegador.

Setup do frontend com React

• No terminal: npx create-react-app frontend --template typescript
• Para testar digitar yarn startno terminal estando na pasta frontend e, depois, no navegador de internet, digitar http://localhost:3000.

Configurando o github

• Em dinopedia salve o arquivo .gitignore
• Delete .git de frontend
• Em dinopedia, no terminal:

pip freeze > requirements.txt
git init
git add .
git commit -m first commit

Criando a Home page de lista de dinossauors com React

Para os seguintes passos, crie todos estáticos.

• Crie o componente DinousaurCard em frontend/src/components/DinousaurCard/index.tsx
• Crie o componente DinousaurList em frontend/src/components/DinousaurList/index.tsx
• Cria a página Home em frontend/src/pages/Home/index.tsx
• Editar o arquivo frontend/src/App.tsx para renderizar Home

Não esqueça de testar se tudo está funcionando. Faça um novo commit!

Estilos com bootstrap

• No terminal: yarn add react-bootstrap bootstrap@5.1.3
• Em src/index.tsx: import 'bootstrap/dist/css/bootstrap.min.css';
• Refatore o código usando componentes do bootstrap

Django cors Headers

• No terminal: pip install django-cors-headers
• No settings:

INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]

• No settings: CORS_ALLOWED_ORIGINS=["http://localhost:3000"]
• No settings:

MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    ...,
]

Carregando dados da api no frontend

• Instale o axios e crie o serviço de api
• Adicione o "proxy" em package.json o valor:

"http://127.0.0.1:8000"

• Edite o componente DinosaurItem para receber valores dinâmicos
• Edite o componente DinosaurList para carregar valores da api

Conectando Django e React

• Faça o build do projeto React: yarn build
• Em settings.py:

import os

TEMPLATES = [
    {
        ...,
        'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
        ...,
    }

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'frontend/build/static'),
    BASE_DIR / 'static'
)

• Em core/urls.py:

from django.views.generic import TemplateView

urlpatterns = [
    ...,
    path('', TemplateView.as_view('index.html'))    
]