Taula de continguts

Django i React

Farem una plantilla de projecte amb Django i React, i emprarem Django_Ninja com a motor per a l'API.

A l'article integracio de Django amb React podeu veure la versió amb Django REST Framework.

, , , , , , , , ,


Creació projecte base Django + ReactJS

Es podria fer en dos repositoris separats, però per simplicitat ho farem en un sol. Farem un projecte Django i hi posarem la part de React dins la carpeta react/.

Projecte Django

Com a bona pràctica afegida emprarem el plugin django-environ per gestionar les credencials del projecte en un arxiu .env.

Creació del projecte Django: 

$ python3 -m venv envdj
(envdj) $ pip install django django-environ django-ninja
(envdj) $ mkdir django-react
(envdj) $ django-admin startproject mysite django-react
(envdj) $ pip freeze > requirements.txt

Penseu a afegir l'arxiu .gitignore que podeu trobar a l'article Django.

Hi crearem una app de llibres «biblio» molt senzilla amb un sol model de llibre: 

(envdj) $ ./manage.py startapp biblio

Afegim els models de l'app a models.py:

models.py
from django.db import models
from django.contrib.auth.models import AbstractUser
 
class Llibre (models.Model):
    titol = models.CharField(max_length=100)
    autor = models.CharField(max_length=200)
    resum = models.TextField(null=True,blank=True)
    data_edicio = models.DateField()
    def __str__(self):
    	return self.titol
 
class Usuari(AbstractUser):
    auth_token = models.CharField(max_length=32,blank=True,null=True)
    # + altres atributs que es vulguin afegir...

És important fer un usuari personalitzat des de l'inici del projecte. Ho necessitem per implementar la token authentication del Django Ninja però també per evitar problemes quan necessitem personalitzar el model User mes endavant.

Ajustem settings.py per:

Afegiu la app al settings.py i també corsheaders per a la gestió de l'API:

settings.py
AUTH_USER_MODEL = 'biblio.Usuari'
 
INSTALLED_APPS = [
    'corsheaders',
    'biblio.apps.BiblioConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
 
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",    # Exemple: React en desenvolupament amb Vite o CRA
    "http://127.0.0.1:5173",
    "https://el-teu-domini.com", # Quan el tinguis en producció
]

Afegim els models a admin.py:

admin.py
from django.contrib import admin
from django.contrib.auth.admin import UserAdmin
 
from .models import *
 
 
class UsuariAdmin(UserAdmin):
    fieldsets = UserAdmin.fieldsets + (
            ("Altres dades (API auth)", {
                'fields': ('auth_token',),
            }),
    )
    readonly_fields = ["auth_token",]
 
 
admin.site.register(Llibre)
admin.site.register(Usuari,UsuariAdmin)

Afegeix alguns elements (llibres) des de l'admin panel de Django, aquest ho permet amb comoditat. Necessitarem alguns exemples per depurar l'app, així que pren-te el temps d'omplir la BD de dades una mica.


Projecte ReactJS

Creació del projecte React dins la carpeta react/ del projecte Django amb Vite. Caldrà triar projecte React + JavaScript: 

$ npm create vite@latest react

Ja podem començar a fer codi!


API bàsica amb Django Ninja

Hem tractat la creació d'APIs a l'article Django Ninja.

Farem una API molt senzilla per llistar els usuaris que tenim a l'aplicació: