Inizializzazione di un nuovo progetto React
Un progetto React è composto da una struttura ad albero di cartelle e file necessarie per il funzionamento del framework, a supporto di ciò npx ci aiuterà a creare in automatico un progetto basilare da cui partire con lo sviluppo.
Un template non è altro che una “matrice di creazione” ovvero una lista di istruzioni che npx seguirà per creare un progetto quasi vuoto.
Per effettuare l’operazione seguiamo gli step:
- Creare una cartella sul Desktop e chiamarla “sviluppo”, in questa cartella inseriremo tutti i progetti React che svilupperemo.
- Aprire la Windows PowerShell ed entrare nella cartella appena creata eseguendo i comandi:cd .\Desktop\
cd .\sviluppo\
npx create-react-app@5.0.0 prima_app
In caso di domanda “Ok to proceed?” digitare y e premere il tato invio. - Per avviare il progetto digitare
cd .\prima_app\
npm start
Descrizione dei comandi:
I primi due comandi della lista non abbiamo problemi ad intuirli se avete seguito la lezione precedente sui comandi DOS del terminale di Windows.
Poniamo l’attenzione al comando npx create-react-app@5.0.0 <nome_applicazione> come possiamo vedere dalla stringa inserita, la prima istruzione invoca npx che si occuperà di eseguire l’istruzione create-react-app@5.0.0 ovvero di creare una applicazione React con il template 5.0.0 del creatore. Se diversamente specificato, quindi rimuovendo il numero di versione @5.0.0 il create-react-app cercherà una configurazione relativa all’ultima release rilasciata ma potremmo trovarci davanti ad un problema.
Se avete installato NodeJS da tanto tempo, questo potrebbe creavi un errore del tipo:
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).
Questo è causato dalla rimozione di alcune componenti di default nella configurazione di npx che si basa ancora sulla versione 4.0.3 e non è stata aggiornata, una rimozione della cache di npx è una soluzione oppure forzare il numero di versione come abbiamo appena illustrato.
L’ultima parte del comando, ovvero il <nome_applicazione> è dedicato al nome della nostra nuova applicazione React, questo si rifletterà sul nome della cartella contenente il progetto e in alcune configurazioni base che vedremo più avanti, sconsiglio di utilizzare gli spazi (sostituiteli con undescore “_”).
Nella parte tre del set di comandi eseguiti ovviamente ci portiamo sulla fase di avvio del progetto appena inizializzato, entriamo nella cartella prima_app e poi utilizziamo il comando npm start per avviare la nostra applicazione.
In questo caso non utilizziamo npx poiché quest’ultimo si è preoccupato di creare una gerarchia di file e directory che contiene i pacchetti necessari all’avvio dell’intera applicazione, procedura di npm start è specificata infatti all’interno del file package.json ma questo lo vedremo più avanti.
