Creare una nuova applicazione React

19 settembre 2017

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.

Tutte le lezioni

1 ... 18 19 20

Se vuoi aggiornamenti su Creare una nuova applicazione React inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Creare una nuova applicazione React

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy