Aquesta és una revisió antiga del document

---

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...

Ajustem settings.py per:

• Informar del canvi de model de usuari per biblio.User
• Afegir la nova app biblio
• Afegir el plugin corsheaders per facilitar les crides amb dominis creuats.
• Configurar corsheaders amb els dominis permesos aCORS_ALLOWED_ORIGINS.

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ó
]

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ó: