La prima cosa da fare se vogliamo sviluppare un'applicazione con React JS, è quella di impostare l'ambiente di lavoro, cioè installare tutti i software necessari, predisporre di tutti i file e cartelle nel proprio computer per poter lavorare.
Il primo passo è quello di installare nodejs, scaricabile dal seguente link:
cliccare sul classico bottone verde per avviare il download, in questo caso sto usando un SO Windows
L'altra parte importante è il software per la scrittura del codice, qui abbiamo l'imbarazzo della scelta, è possibile optare per “Visual Studio Code" scaricabile gratuitamente dal sito della MicroSoft:
questo software è dotato di molte estensioni che permettono di personalizzarne l’uso rendendolo più potente, cercando la parola "React" si visualizzerà una lista molto lunga di estensioni, in particolare "React Native" è relativo a tutte le estensioni per sviluppare applicazioni per dispositivi mobili.
A questo punto non ci resta che creare il nostro progetto React iniziando da uno già preconfigurato.
Se stiamo lavorando su Windows, apriamo il Prompt dei comadi, per farlo basta digitare il comando Win+r e si aprirà una finestra nella quale digitare cmd, a questo punto posizioniamoci all'interno della cartella nella quale vogliamo creare il progetto usando il seguente comando:
$ cd /path/reactapp"/path/reactapp" è ad esempio il percorso dove creeremo la nostra app, per creare il progetto lanciare successivamente il comando:
$ npx create-react-app <name react app>scegliendo un nome per la nostra applicazione React, senza inserire spazi nel nome e senza inserire lettere maiuscole.
Al termine della procedura verrà creata una cartella col nome che abbiamo scelto per la nostra applicazione contenente i seguenti file:
- node_modules/
- public/
- src/
- .gitignore
- package.json
- package-lock.json
- README.md
La cartella node_modules, contiene le librerie necessarie per il funzionamento dell'applicazione di test oltre a quelle specifiche per il funzionamento di un’applicazione React, la cartella public contiene un file index.html che è la home page dell'applicazione, un'icona favicon.ico, un file manifest.json, la cartella src contiene i file CSS e JavaScript.
Per visualizzare il file index.html nel browser è necessario lanciare un comando, infatti se apriremmo il file direttamente visualizzeremo una pagina bianca, quindi posizioniamoci all'interno della cartella del nostro progetto e scriviamo la seguente riga di comando:
$ npm starta questo punto si aprirà automaticamente nel browser l'indirizzo http://localhost:3000, e a questo indirizzo visualizzeremo la pagina index.html della nostra applicazione React:
ogniqualvolta viene modificato e salvato il file src/App.js, la pagina index.html viene ricaricata e aggiornata.
Conclusioni
Se abbiamo sviluppato una applicazione React partendo da un progetto preconfigurato come visto in questo articolo, e vogliamo trasferire il tutto su un server remoto allora dobbiamo generare la versione di produzione, questa operazione è molto semplice e rapida, apriamo il Prompt dei comadi e posizioniamoci all'interno della cartella principale dell'applicazione React usando il seguente comando
$ cd /path/reactappe poi
$ npm run buildalla fine del processo verrà creata una nuova cartella build contenente tutti i file e le cartelle da trasferire sul server remoto e poter così testare la nostra applicazione React.
L'applicazione demo inclusa in questo articolo è un convertitore di valuta Euro in altre valute internazionali, basata sul servizio gratuito offerto dalla ECB (European Central Bank), la documentazione è disponibile a questo link.