Realizzare UI con React - 6. Creare una Nuova React App

JSX è bellissimo, ma deve essere convertito in normale JavaScript prima di arrivare al browser e si può usare Babel per questa operazione. Possiamo chiamare Babel dal tool, come Webpack, che usiamo per impacchettare tutti i nostri file (JavaScript, CSS, immagini, etc.) per i progetti web.

Per semplificare la configurazione iniziale possiamo usare il pacchetto Create React App di Facebook che gestisce tutto questo per noi! È uno strumento molto comodo per iniziare a creare una applicazione React dato che configura tutto quello che serve senza chiedere nulla! Per installare Create React App si può usare npm da linea di comando come indicato di seguito:

npm install -g create-react-app

Installare globalmente Create React App

Se avete problemi ad installare il pacchetto globalmente, potete consultare la documentazione di npm, vi consiglio di verificare di avere i permessi corretti. Per sapere dove i pacchetti globali sono installati potete usare il seguente comando:

npm list -g

Verificare dove sono installati i pacchetti globali

Ora creiamo la nostra prima applicazione React chiamata contatti per usare il codice JSX che abbiamo creato in precedenza

create-react-app contatti

Creiamo l'applicazione React contatti

Come potete vedere eseguendo il comando, create-react-app installerà react e react-dom che abbiamo già visto ed anche il pacchetto react-scripts. Questo pacchetto contiene molte librerie utili. Installa Babel in modo da poter usare le ultime funzionalità di JavaScript oltre che JSX. Inoltre installa anche Webpack in modo da poter impacchettare le risorse per rilasciare la nostra applicazione ed il server di sviluppo Webpack che ci aiuta durante lo sviluppo e fornisce la funzionalità di aggiornamento automatico quando modifichiamo i sorgenti.

Qui potete trovare i sorgenti dell'applicazione React appena creata.

Yarn

Guardando il risultato di create-react-app vedrete che ci viene consigliato di usare yarn per gestire la nostra applicazione. Nel caso non lo conosciate, yarn è un gestore di pacchetti simile a npm, è stato creato da Facebook per migliorarne alcune funzionalità ed aggiungerne di nuove. Se non volete installare yarn, non è un problema, uno dei suoi punti di forza è che quasi tutti i suoi comandi possono essere eseguiti anche da npm. Quindi se il comando consigliato per eseguire il server di sviluppo è yarn start, possiamo usare npm start per ottenere lo stesso risultato!

Esploriamo l'applicazione React

Alla fine dell'esecuzione di create-react-app otteniamo una lista di comandi che ci permettono di eseguire la nostra applicazione, testarla e rilasciarla. Se diamo un'occhiata al codice creato, troveremo molti commenti nei vari files per spiegarci come funzionano e sono stati usati, provate a darci un'occhiata.

Ora spostiamoci nella cartella che contiene l'applicazione e facciamo partire il server di sviluppo col comando yarn start. Noterete che in automatico viene aperta una nuova finestra del browser con la nostra applicazione al suo interno. Decisamente comodo!

Applicazione React create con create-react-app

Provvediamo quindi ad aprire il file src/App.js nel nostro editor e vedremo il codice che è in esecuzione nel browser. Il codice che vedrete dovrebbe esservi abbastanza familiare a questo punto. Si tratta di un componente che disegna un div che a sua volta contiene un header con un immagine img, un paragrafo p ed un link a. Ricordatevi che nessuno di questi sono testo, ma ciascuno di questi elementi è creato tramite la chiamata alla funzione createElement() ed usiamo JSX per rendere la sintassi più concisa.

Una delle comodità di create-react-app è che configura automaticamente il reload dell'applicazione quando eseguiamo delle modifiche al sorgente. Quindi se ora modificate il testo del paragrafo in "Ciao Mondo!" e salvate la modifica, il browser si aggiornerà automaticamente mostrando i cambiamenti.

Aggiornamento automatico

Una cosa che non è presente nel file src/App.js è il riferimento a ReactDOM od a come questo elemento è inserito nel DOM della pagina. Se esploriamo la cartella che contiene questo file ne troviamo un altro interessate src/index.js, proviamo a darci un'occhiata. index.js importa App dal file ./App e disegna l'applicazione nell'elemento root che è già presente nel documento. Ora vi starete chiedendo allo stesso modo da dove viene l'elemento root. Per rispondere a questa domanda, date un'occhiata al file public/index.html. Qui potete vedere il codice HTML dove viene eseguito il JavaScript e troverete il div con id root.

Quando eseguiamo la build, Webpack genererà un pacchetto con tutto il nostro JavaScript ed inserirà uno script tag nella pagine proprio dopo questo div, in questo modo l'applicazione prende vita.

Per avere più informazione su come funziona create-react-app, vi consiglio di leggere il file README.md che contiene delle istruzioni e delle guide dettagliate su come usarlo al meglio e modificarlo a seconda delle proprie esigenze.

La documentazione completa di create-react-app è disponibile sul sito https://create-react-app.dev/