Aggiornamento luglio 2023

05 Jul 2023

Il mondo del software è un settore in continuo movimento dove, a distanza di pochi mesi, tutto può cambiare. Quando restringiamo il campo al mondo del front-end, i mesi diventano settimane e può succedere che nel giro di poche ore tutto quello che si pensava essere sicuro diventi improvvisamente obsoleto.

Questo libro è stato pensato proprio per evitare che, a pochi giorni dall’uscita, il contenuto diventasse vecchio e non più utile. Per questo motivo la trattazione si è concentrata sulle funzionalità core di React, quelle più usate e allo stesso tempo più stabili.

Qualcosa però, prima o poi doveva succedere, ed è successa proprio mentre il volume veniva stampato. Alla fine di gennaio 2023 il team di React ha annunciato che Create React App era stato deprecato spiegando quale sarebbero state le alternative future. Allo stesso tempo, la documentazione di React veniva riscritta e spostata da https://reactjs.org (oggi https://legacy.reactjs.org/) a https://react.dev.

Durante questo passaggio Create React App è letteralmente sparito dalla documentazione di React. Nella sezione dedicata alla creazione di un nuovo progetto React vengono infatti suggeriti altri strumenti: tutti framework basati su React. In questa lista troviamo, per esempio, Next.js che, per quanto sia un framework notevole, è molto di più di un semplice software per gestire un progetto front-end.

Le reazioni da parte della community di utenti React sono state miste, con forse una maggioranza di voci negative rispetto a questa scelta. La principale critica che viene fatta è che, suggerendo di usare sempre un framework, si perdono la semplicità e la leggerezza che da sempre hanno caratterizzato l’uso di React.

Il motivo di questa scelta, dal mio punto di vista, è legato alla volontà del team di React di rendere più semplice l’utilizzo dei nuovi Server Components e di tutte le altre funzionalità sperimentali di React, che necessitano di un’interazione tra front-end e back-end.

Nessuno è in grado di sapere oggi se queste scelte si riveleranno un successo o meno, oppure se le nuove funzionalità di React saranno adottate da tutti. Quello che deve interessare ora a chi sta imparando React è come gestire un progetto senza l’uso di Create React App. Tra gli strumenti disponibili per rimpiazzare CRA, Vite è uno dei più semplici, performanti e diffusi. Per questi motivi ho aggiornato il codice degli esempi usando una branch dedicata, così da lasciare inalterato il codice originale di cui si parla nel libro. Nella sezione successiva viene spiegato cos’è Vite, le differenze con Create React App e le modifiche che sono state fatte al codice degli esempi.

Tutto il contenuto del libro è ancora valido, Vite è soltanto uno strumento sostitutivo a Create React App.

Vite

Prima di leggere questa sezione, vi consiglio di finire di leggere tutto il libro, usando il codice già disponibile online. Se lo avete già fatto continuate pure a leggere.

Queste sono le principali differenze tra Vite e Create React App:

Vite usa Rollup al posto di Webpack
Vite supporta più librerie frontend e non solo React (es. Svelte, Vue, …)
Vite è molto più veloce di CRA

Migrazione da Create React App a Vite

Nella branch vite del progetto sono disponibili tutti i sotto-progetti aggiornati per usare Vite. Tutto quello che è necessario fare è scaricarli, eseguire npm install in ogni cartella ed eseguire il progetto con npm start.

package.json

Tutti i file package.json sono stati modificati per rimuovere la dipendenza react-scripts di Create React App e sostituirla con tutte quelle necessarie per Vite. L’elenco di queste dipendenze è visibile nella sezione devDependencies del file.

{
  "name": "ch02",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9",
    "vite-plugin-svgr": "^3.2.0"
  }
}

vite.config.js

In ogni progetto del repository è stato creato un file vite.config.js, necessario a configurare Vite. All’inizio del file vengono importati due plugin per Vite: quello con la configurazione per React e quello per supportare l’import di immagini SVG come componenti (vite-plugin-svgr - necessario perché non attivo di default a differenza di Create React App). Nella sezione plugins della configurazione vengono poi attivati tutti e due.

Le ultime due sezioni della configurazione riguardano la cartella in cui generare i file di build (la cartella build appunto) e la porta su cui deve essere pubblicato il server di sviluppo. Queste configurazioni sono state aggiunte per far funzionare Vite nel modo più simile possibile a Create React App. Di seguito il file vite.config.js completo.

import svgr from "vite-plugin-svgr";
import react from "@vitejs/plugin-react";

export default function defineConfig() {
  return {
    plugins: [react(), svgr()],
    build: { outDir: "build" },
    server: {
      port: 3000,
    },
  };
}

Nel file vite.config.js dei capitoli 10 e 11 è stata anche aggiunta una configurazione per attivare un proxy sul path /api del server di sviluppo, così da inoltrare le chiamate al server delle API. Proprio come già fatto con Create React App.

index.html

Il file public/index.html è stato spostato nella cartella principale di ogni progetto, perché è lì che Vite si aspetta di trovarlo. Sempre riguardo a questo, l’applicazione viene caricata nella pagina usando sempre un tag <script>, puntando però verso il file index.jsx.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

File .jsx

Tutti i file con estensione .js contenenti del codice JSX sono stati rinominati per avere l’estensione .jsx. Questa modifica è stata necessaria perché Vite si aspetta di trovare il codice JSX solo all’interno di file con questa estensione.

È possibile usare i file con estensione .js con all’interno del codice JSX a patto di modificare la configurazione di Vite. Se vi interessa farlo potete leggere questa lunghissima discussione nel repository di Vite ma non aspettatevi che funzioni perfettamente. Facendo delle prove è stato possibile far funzionare tutto, perdendo però il supporto per HMR.

Ho preferito quindi rinominare i file (attività veloce) e usare una configurazione di Vite semplice, così da non aggiungere inutile complessità.

Conclusioni

È bastato poco lavoro per migrare i progetti da CRA a Vite ma la cosa più importante è che non è stato necessario alterare il codice delle applicazioni. Su progetti di lungo corso è probabile che cose di questo genere capitino perché gli strumenti di sviluppo sono in continua evoluzione, è quindi necessario tenersi regolarmente aggiornati su questi.

Vi ricordo che potete segnalare un problema relativo al libro (o leggere quelli già segnalati) usando la sezione dedicata su Github.