Set-up di un'applicazione React

Per creare un'applicazione React è necessario configurare un ambiente di sviluppo JavaScript. In questa guida utilizzeremo i seguenti strumenti:

• Node.js e npm
• Axios
• Create React App
• React Route

Node.js e NPM

Prima di cominciare è necessario verificare di aver installato sul proprio computer la versione più recente di Node.js.

A questo scopo, si può verificare la versione dalla finestra del terminale digitando il seguente comando:

node -v

Se il risultato è command not found, vuol dire che Node.js non è presente sul sistema e si dovrà procedere all'installazione scaricandolo dal sito https://nodejs.org/it.

Il software fornirà anche il gestore di pacchetti npm, di cui si potrà verificare la versione con il comando

npm -v

A istallazione compiuta, si avranno a disposizione i seguenti strumenti:

• npm è un gestore di pacchetti JavaScript che permette di installare e gestire versioni e dipendenze di un progetto Node.js. Di per sé, npm non esegue i pacchetti, a meno che non siano specificati nel file package.json del progetto (si veda al riguardo la documentazione online).
• npx è un esecutore di pacchetti. Questo esegue un comando da un pacchetto npm locale o remoto senza che questo sia stato preventivamente installato.

Creiamo dunque una cartella per i nostri progetti di sviluppo e passiamo all'installazione della libreria Axios.

Axios

Esistono diverse soluzioni tecniche per recuperare dati esterni in un'applicazione React:

• la Fetch API di JavaScript.
• La libreria Axios.
• La sintassi async/await.
• Un hook personalizzato di React.
• La libreria React Query.

Ognuno di questi strumenti si caratterizza per funzionalità specifiche e semplicità d'uso variabile. Uno degli strumenti più semplici da utilizzare, e allo stesso tempo completi di tutte le funzionalità che occorrono ai fini di questo progetto, è la libreria Axios, definito come client HTTP "promise-based" per Node.js e per il browser.

In sintesi, si tratta di una libreria che permette di eseguire richieste XMLHttpRequests dal browser e richieste http da Node.js. Apriamo il terminale e installiamo Axios con il seguente comando:

npm install axios

Dopo pochi secondi, dovremmo ricevere un messaggio di conferma dell'avvenuta installazione. Il passo successivo è la creazione di un'applicazione React di base.

Create React App

Per creare un'applicazione base di React, utilizzeremo il tool Create React App, che fornirà tutte le dipendenze necessarie allo sviluppo dell'App. Create React App è uno strumento molto utile per chi è agli inizi nello sviluppo di applicazioni React e vuole focalizzarsi sul codice senza dedicare troppo tempo ad apprendere e configurare strumenti avanzati come webpack, Babel e ESLint.

Il comando che segue installerà l'applicazione wp-headless sulla macchina locale:

npx create-react-app wp-headless

Al termine dell'installazione, sarà visualizzato un messaggio di benvenuto. Se la versione del node package manager (npm) non è aggiornata, verrà suggerito il comando da utilizzare per installare la versione più recente.

Una volta installati i pacchetti, ci sposteremo nella directory wp-headless per avviare l'ambiente di sviluppo:

cd wp-headless
npm start

Il comando npm start avvia l'ambiente di sviluppo e apre la home page del progetto nel browser. L'indirizzo sarà http://localhost:3000/.

Conclusa l'installazione, nella directory root si avrà una directory del progetto wp-headless con questo contenuto:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

src è la directory che contiene i file .js e .css necessari. Al termine, il comando npm run build genererà i file minificati per la produzione.

Con questi strumenti, siamo già in grado di creare un'applicazione React. Ma il nostro progetto prevede che tutte le pagine del sito WordPress vengano visualizzate all'interno di una single page application. Ciò significa che dovremo gestire il routing nella nostra applicazione React. Ci occorre un'altra libreria.

React Route

Il React Router è una libreria utilizzata per la gestione del router in applicazioni React a pagina singola. In pratica ci consentirà di associare un componente ad una specifica route e modificare l'URL senza lasciare la pagina.

Interrompiamo il processo in corso con CTRL + C e assicuriamoci di essere nella cartella del progetto. Quindi installiamo react-router con il seguente comando:

npm install react-router-dom

L'operazione richiede solo pochi attimi. Al termine, avviamo nuovamente il servizio:

npm start

Conclusa l'installazione dei tool di sviluppo necessari alla creazione della nostra applicazione WordPress headless, nella prossima lezione cominceremo a scrivere il nostro codice JavaScript/React.