Creare una nuova applicazione React

Nella lezione precedente abbiamo introdotto l’uso di Node.js per lo
sviluppo di applicazioni React e i benefici dell’uso dei numerosi tool che
si appoggiano a questo runtime per fornire servizi a supporto dello
sviluppo e del funzionamento dell’applicazione stessa.

Tuttavia, installare e configurare una toolchain da zero non è un'operazione banale: occorre avere una conoscenza minima degli strumenti di
cui si vuole disporre, delle modalità con cui possono essere configurati, e
per diversi tool esistono a volte decine di alternative, nonché plugin
aggiuntivi che si possono installare per estenderne le funzionalità.

Generalmente si tende a selezionare un insieme di tool fra quelli più
diffusi e documentati, scaricando i plugin necessari e creando
un’applicazione che possa adattarsi a diverse tipologie di applicazioni,
affinché la si possa riutilizzare come modello per creare nuovi progetti
quando se ne ha il bisogno.

Il lato positivo di questo approccio risiede nell’acquisizione della piena
padronanza dei tool utilizzati e delle loro potenzialità. Per contro, è
necessario del tempo per studiare la documentazione, analizzare gli esempi
e costruire infine una cassetta degli strumenti modulare ed efficace.

Fortunatamente, per le esigenze più semplici e immediate, Facebook ha già
pensato a una soluzione: Create React App.

Che cos’è “Create React App”?

Il tool Create React App è stato ideato appositamente per
fornire una serie di tool selezionati e pronti all’uso, ossia già
configurati a dovere, per creare nuove applicazioni con React. Oltre agli
stessi strumenti, il tool include anche script di supporto per avviare le
applicazioni oppure creare una build pronta al rilascio in produzione.

L’aspetto fondamentale è che l’uso del tool non richiede alcuna configurazione da parte dello sviluppatore: non
occorre installare né impostare nient’altro e ci si può concentrare da
subito sullo sviluppo.

Personalizzare le opzioni di Create React App è più difficile rispetto
all’uso di una soluzione personalizzata, poiché il tool si occupa di gestire il
tutto. È sempre possibile però eseguire un comando di “eject” per
rinunciare all’uso del tool esportando tutte le configurazioni predisposte
dallo stesso, che rientrano così nel pieno possesso e controllo dello
sviluppatore. Questa operazione non è ovviamente reversibile.

Installare “Create React App”

Per installare il tool, è sufficiente eseguire il comando del Node Package Manager (npm) che consente di scaricare il relativo package sulla propria macchina:

npm install -g create-react-app

Il comando npm install consente di installare package per
aggiungere componenti, tool e plugin per Node.js. Vi sono due modalità di
installare package, a seconda dell’uso che se ne vuole fare: localmente (per il progetto corrente) oppure globalmente.

Se il tool deve essere utilizzato per più progetti e lo si vuole richiamare
a riga di comando, conviene installarlo globalmente usando
l’opzione -global (abbreviato in -g),
come in questo caso.

Il nome create-react-app rappresenta invece
l’identificativo del package.

Lanciando il comando, npm provvederà a scaricare e
installare il package su disco, unitamente alle relative dipendenze.

Nel caso in cui l’operazione vada a buon fine, il tool sarà installato con
successo, altrimenti occorre prendere nota degli errori ed eventualmente
cercare su Google o nella documentazione di Node.js su npm
la relativa causa.

Come anticipato in precedenza, Create React App si appoggia al runtime di Node.js e viene impiegato per imbastire e gestire
lo sviluppo delle applicazioni: non è necessario installarlo sul server nel
quale l’applicazione verrà eseguita, e ciò vale anche per Node. Utilizziamo
questi strumenti solo per produrre i file statici (HTML, CSS, JavaScript ed
eventuali risorse) che costituiranno una tipica SPA (Single Page Application) di cui potremo fare il deploy virtualmente su qualsiasi Web server di
nostra preferenza.

Creare una nuova applicazione

Per creare una nuova applicazione React, è sufficiente aprire un terminale
o il Prompt dei Comandi (a seconda del sistema operativo in uso), spostarsi
nella cartella in cui generalmente create i sorgenti delle vostre
applicazioni e lanciare il comando create-react-app,
seguito dal nome dell’applicazione:

create-react-app hello-react

Il tool provvederà a creare una nuova directory con il nome
dell’applicazione specificato (nel nostro esempio: hello-react) in
cui verranno generati tutti i file del progetto.

Nello specifico, verranno installati nella directory i package di Node.js
relativi ai tool su cui si basa Create React App (come Babel e WebPack)
eseguendo direttamente i comandi del package manager in uso, ovvero lo
stesso npm oppure yarn (un package manager creato da Facebook come
alternativa), per installare i package necessari.

Al termine del processo, se non si sono verificati errori di alcun tipo,
troveremo un messaggio di successo e un elenco dei comandi incorporati nel
tool che possono essere eseguiti per avviare l’applicazione o eseguire una
build.

La struttura della directory sarà simile alla seguente:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Notiamo la presenza della cartella node_modules, che
contiene i package Node.js installati localmente per un determinato
progetto, nel quale sono già presenti numerosi moduli che Create React App ha provveduto a reperire, installare e
configurare per noi.

Per lanciare l’applicazione, dal Prompt dei Comandi possiamo spostarci
all’interno della directory creata dal tool e lanciare il comando:

npm start

Se tutto è andato a buon fine, dovremmo veder apparire il browser che mostra una pagina simile alla seguente, con il logo React che ruota:

Seguendo il suggerimento contenuto all’interno della homepage generata
automaticamente, possiamo provare ad aprire con un semplice editor di testo
il file src/App.js e modificare qualcosa – ad esempio, il testo Welcome
to React - e noteremo che salvando il file, il browser si aggiornerà
automaticamente mostrando il nuovo contenuto della pagina.

Questa è una delle feature offerte dal bundler Webpack,
che è solo uno dei tool che Create React App ha provveduto a
installare e configurare a dovere per essere pronto all’uso.

Nelle prossime lezioni vedremo quali sono le altre funzionalità messe a
disposizione da Create React App e come modificare il template predefinito
generato automaticamente per costruire una nostra applicazione di esempio.