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.

django-react.jpg

, , , , , , , , ,


Creació projecte base Django

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

Per poder treballar amb React necessitarem que Django actui com a API. Utilitzarem l'admin panel per facilitar l'inici del desenvolupament, però no farem servir el frontend del propi Django, delegant tota aquesta part a React.

Per a la part de l'API emprarem Django Ninja en aquest exemple, tot i que també es podria fer servir Django REST Framework (Django API).

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 juntament amb Django Ninja per a l'API: 

$ python3 -m venv envdj
(envdj) $ pip install django django-environ django-ninja django-cors-headers
(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',
    #...
]
 
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    #...
]
 
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.


API amb Django Ninja

Per acabar de configurar la API amb Django Ninja caldrà modificar urls.py i afegir api.py:

urls.py
#...
from biblio.api import api
 
urlpatterns = [
    #... ,
    path("api/", api.urls),
]

Afegir nou arxiu api.py. Si voleu afegir autenticació per protegir els endpoints, consultar Django Ninja.

api,py
from ninja import NinjaAPI, Schema
from django.shortcuts import get_object_or_404
from typing import List, Optional, Union, Literal
import datetime
 
from .models import *
 
api = NinjaAPI()
 
class LlibreOut(Schema):
    id: int
    titol: str
    autor: str
    data_edicio: datetime.date
    resum: Optional[str]
 
@api.get("/llibres", response=List[LlibreOut])
@api.get("/llibres/", response=List[LlibreOut])
def obtenir_libres(request):
    qs = Llibre.objects.all()
    return qs

Si ho heu configurat bé i heu afegit llibres, us hauria de funcionar: 

$ curl localhost:8000/api/llibres


Django-Environ i el VCS

Django Environ és un plugin que ens ajuda a la posada en producció. Particularment ens facilitarà configurar de forma segura les credencials per a la BD i altres serveis (social login, seguretat, tokens, accés a APIs externes, etc.).

Habitualment les configuracions es posen a l'arxiu settings.py, però a la pràctica hem de treure les dades sensibles perquè no es carreguin al sistema de control de versions (Git habitualment).

La primera mesura important és tenir un arxiu .gitignore adequat, com: 

*.pyc
/env/
/venv/
/static/*
/media/*
.env
db.sqlite3
.coverage
__pycache__

Com podeu veure, hi ha l'arxiu .env que és el que ha de tenir les credencials. Si està a .gitignore, no s'afegirà al repo quan fem instruccions com git add .

Si mirem el quickstart de django-environ veureu que la idea és treure les variables de settings.py a .env, en particular:

settings.py
import environ
import os
 
env = environ.Env(
    DEBUG=(bool, False)
)
 
# Podeu deixar les instruccions que hi hagi de l'esquelet de Django
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 
# llegim .env
environ.Env.read_env(os.path.join(BASE_DIR, '.env'))
 
# variables a llegir de .env
# ULL! cal elimninar les variables que hi ha al settings.py
DEBUG = env('DEBUG')
SECRET_KEY = env('SECRET_KEY')
ALLOWED_HOSTS = env.list("ALLOWED_HOSTS", default=["*",])
DATABASES = {
    # configura a través de la variable DATABASE_URL
    'default': env.db(),
}
# dominis amb autorització per a fer crides a l'API
CORS_ALLOWED_ORIGINS = env.list("CORS_ALLOWED_ORIGINS",default=[
    "http://localhost:5173",    # Exemple: React en desenvolupament amb Vite o CRA
    "http://127.0.0.1:5173",
])
# protecció CSRF per atacs de dominis creuats
CSRF_TRUSTED_ORIGINS = env.list("CSRF_TRUSTED_ORIGINS")

I després crearem .env amb aquests continguts:

.env
DEBUG=on
SECRET_KEY=your-secret-key
#DATABASE_URL=mysql://user:[email protected]:3306/biblio
DATABASE_URL=sqlite:///db.sqlite3
ALLOWED_HOSTS=*,elmeudomini.com
CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com
CSRF_TRUSTED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com

Sempre convé deixar aquest exemple mateix guardat com a .env.example per tenir una plantilla. Aquest sí que el podem pujar a github sense problema.


Projecte ReactJS

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

Ens hem de posar a la carpeta principal del projecte Django, al mateix nivell que el manage.py. 

$ npm create vite@latest react

Codi de l'aplicació ReactJS

Els arxius de codi seran:

I els CSS:

Javascript i JSX

Proposta de codi JSX
App.jsx
import { useState } from 'react';
import './App.css';
import BookList from './components/BookList';
import './styles.css';
import './Modal.css';
 
function App() {
  return (
    <div className="App">
      <BookList />
    </div>
  );
}
 
export default App;
config.js
const config = {
  development: {
    API_URL: 'http://localhost:8000/api',
    DEBUG: true,
  },
  production: {
    API_URL: 'https://elmeudomini.com/api',
    DEBUG: false,
  }
};
 
const env = process.env.NODE_ENV || 'development';
export default config[env];
services/api.js
import config from '../config';
 
const API_BASE_URL = config.API_URL;
 
export const getBooks = () => {
  console.log('cridant API...');
  return fetch(API_BASE_URL+"/llibres")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Error l'obtenir els llibres");
      }
      return response.json();
    })
    .catch((error) => {
      console.error('Error en la API:', error);
      return [];
    });
};
components/BookList.jsx
import { useEffect, useState } from 'react';
import { getBooks } from '../services/api';
import BookItem from './BookItem';
import imgReact from '../assets/react.svg';
 
function BookList() {
  const [books, setBooks] = useState([]);
 
  useEffect(() => {
    getBooks().then((data) => setBooks(data));
  }, []);
 
  return (
    <div className="container">
      <img src={imgReact} />
      <h1>Llistat de llibres</h1>
      {books.length > 0 ? (
        books.map((book) => <BookItem key={book.id} book={book} />)
      ) : (
        <p>Encara no hi ha llibres...</p>
      )}
    </div>
  );
}
 
export default BookList;
components/BookItem.jsx
import React, { useState } from 'react';
 
function BookItem({ book }) {
  const [modalObert, setModalObert] = useState(false);
 
  function mostraDetalls() {
    setModalObert(true);
  }
 
  function tancaModal() {
    setModalObert(false);
  }
 
  return (
    <div className="book-card">
      <h3>{book.titol}</h3>
      <p>
        <strong>Autor:</strong> {book.autor}
      </p>
      <button onClick={mostraDetalls}>Detalls</button>
 
      {/* Modal */}
      {modalObert && (
        <div className="modal-overlay" onClick={tancaModal}>
          <div className="modal-content" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h2>{book.titol}</h2>
              <button className="close-btn" onClick={tancaModal}>×</button>
            </div>
            <div className="modal-body">
              <p><strong>Autor:</strong> {book.autor}</p>
              <p><strong>Data d'edició:</strong> {book.data_edicio || 'No disponible'}</p>
              <p><strong>Gènere:</strong> {book.genere || 'No disponible'}</p>
              <p><strong>Resum:</strong> {book.resum || 'Sense descripció'}</p>
              {/* Afegeix més camps segons les propietats del teu objecte book */}
            </div>
            <div className="modal-footer">
              <button onClick={tancaModal}>Tancar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
 
export default BookItem;


Estils CSS

Proposta de codi CSS
App.css
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
 
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}
 
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
 
.card {
  padding: 2em;
}
 
.read-the-docs {
  color: #888;
}
Modal.css
/* Modal.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
 
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
 
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
 
.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}
 
.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.close-btn:hover {
  color: #000;
}
 
.modal-body {
  margin-bottom: 20px;
  line-height: 1.6;
}
 
.modal-body p {
  margin: 10px 0;
}
 
.modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
 
.modal-footer button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
.modal-footer button:hover {
  background-color: #0056b3;
}
styles.css
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  text-align: center;
}
 
.container {
  max-width: 800px;
  margin: 20px auto;
}
 
.book-card {
  background: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  text-align: left;
}
 
h1 {
  color: #333;
}
 
h3 {
  color: #007bff;
}
 
h4 {
  margin-top: 10px;
}
 
ul {
  list-style: none;
  padding: 0;
}
 
ul li {
  background: #e9ecef;
  padding: 5px;
  margin: 5px 0;
  border-radius: 3px;
}
 
p {
  color: black;
}

Aquest sol venir a l'esquelet del projecte, sol anar canviant d'una versió a l'altra

index.css
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
 
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
 
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}
 
body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}
 
h1 {
  font-size: 3.2em;
  line-height: 1.1;
}
 
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}
 
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}