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

{{tag> #FpInfor #Daw #DawMp06 #DawMp07 django framework python react javascript web}}

\\

===== 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'':

<file python 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...
</file>

<WRAP tip>
É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.
</WRAP>

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 a''CORS_ALLOWED_ORIGINS''.

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

<file python 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ó
]
</file>

Afegim els models a ''admin.py'':
<file python 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)
</file>

<WRAP info>
**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.
</WRAP>

\\

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