Nella lezione precedente abbiamo visto i passi da compiere per creare una nuova applicazione Web usando il tool create-react-app.
Durante tale processo, il tool si occupa di creare la cartella dei file di progetto e copiare al suo interno tutti i file sorgenti. Potremo poi modificare tali file per dar forma alla nostra applicazione, inclusi i file di configurazione e svariati package aggiuntivi che ci forniscono ulteriore supporto, a partire dalla fase di sviluppo e fino al deploy in produzione.
In questa lezione approfondiamo la struttura della cartella di progetto e utilizziamo un editor avanzato per esaminare e modificare i file al suo interno.
Visual Studio Code
Gli esempi che abbiamo visto sino ad ora per esplorare le caratteristiche principali della libreria React sono molto semplici, ma per affrontare lo sviluppo di un'applicazione completa, con una complessità più elevata del semplice prototipo, è necessario un editor più evoluto. L'editor dovrà integrarsi meglio con i tool di sviluppo moderni, basati su standard più recenti del linguaggio JavaScript e in grado di velocizzare la creazione di moduli, la stesura del codice, la correzione degli errori e così via.
È possibile scegliere il prodotto preferito fra quelli più noti in circolazione, come Atom, Sublime Text oppure WebStorm.
Noi utilizzeremo Visual Studio Code, un editor distribuito da Microsoft e scaricabile gratuitamente. Visual Studio Code è disponibile per Windows, Mac OS e Linux, e sta guadagnando sempre più popolarità e consenso tra gli sviluppatori.
Una volta creato il progetto con il tool create-react-app, possiamo lanciare Visual Studio Code ed aprire la cartella di progetto per visualizzarne i file. Da qui in poi, useremo questo editor per esaminare il contenuto del progetto e lavorarci sopra.
Il file package.json
La cartella di progetto include un set di package già installati, facenti parte dell'ecosistema di Node.js. Tali file sono contenuti all'interno della directory speciale node_modules.
Una parte dei package sono necessari per l'esecuzione dell'applicazione, in quanto contengono i tipi e le funzioni a cui si fa riferimento nei file sorgenti per costruire l'infrastruttura dell'app, ad esempio per creare componenti React. Tali package verranno distribuiti con l'applicazione affinché essa possa materialmente funzionare.
Vi sono poi altri package, che forniscono invece strumenti di supporto per la verifica e la "transpilazione" del codice, l'avvio di un server Web per il debug, l'esecuzione di test automatizzati, l'assemblaggio dei file e delle risorse per il rilascio in produzione e altro ancora. Essi non sono quindi indispensabili a runtime, ma solo in fase di sviluppo.
Aprendo il progetto con Visual Studio Code, al livello più alto troviamo il file package.json: si tratta di un file tipicamente presente nelle applicazioni e package scritte per Node.js. Come suggerisce l'estensione, il file contiene un oggetto JSON che riepiloga le informazioni salienti del package, come il nome (name) e la versione (version), le dipendenze necessarie a runtime (dependencies) e quelle per il solo sviluppo (devDependencies), più una serie di comandi che possono essere eseguiti attraverso npm, il package manager di Node.js, definiti nella proprietà scripts.
Qui di seguito è riportato un esempio di contenuto del file package.json:
{
"name": "hello-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}I comandi react-scripts
Il tool create-react-app include il package react-scripts che, come suggerisce il nome, fornisce una serie script già pronti e in grado di eseguire diverse operazioni automatizzate una volta lanciati dal Prompt dei Comandi.
Aprendo una finestra del terminale e spostandosi nella cartella del progetto, è possibile lanciare gli script con la sintassi npm nomeComando.
Qui di seguito sono descritti i comandi disponibili e lo scopo di ciascuno di essi.
npm start
Abbiamo già visto questo comando in precedenza. Esso esegue la transpilazione del codice sorgente dell'applicazione, mostrando eventuali errori o warning. Al termine del processo, viene attivato il server Web per il debugging e aperto il browser predefinito per visualizzare la pagina iniziale dell'applicazione all'indirizzo localhost e alla porta predefinita (generalmente 3000). Se il browser non mostra il contenuto atteso, o se la pagina appare vuota, è possibile attivare i Web Developer Tools premendo il tasto F12 e prendere nota degli eventuali errori mostrati nella scheda Console. Se si apportano e si salvano modifiche ai file sorgenti, l'applicazione verrà ricaricata.
npm build
Questo comando esegue il build del progetto creando la directory omonima e generando al suo interno i file assemblati dell'applicazione, ottimizzati per il rilascio in ambiente di produzione. È in questa fase che avviene il ricorso ai tool di bundling, per accorpare e impacchettare i file necessari al funzionamento dell'applicazione, contestualmente al processo di minification per ridurre, dove possibile, il peso dei file che il browser dovrà scaricare, massimizzando quindi le performance.
npm test
Questo comando prepara la suite di test per l'esecuzione. Generalmente, il tool rimane attivo e in ascolto per eseguire nuovamente i test a fronte di modifiche ai sorgenti dell'applicazione.
npm eject
Si tratta di un comando delicato in quanto irreversibile. È possibile eseguirlo quando si vuole rinunciare al supporto del tool create-react-app e ai suoi automatismi pronti all'uso. Il comando rimuove dal progetto la dipendenza dal tool ed estrae i file di configurazione preconfezionati per Webpack, Babel e gli altri tool a cui si appoggia, lasciandone il controllo completo nelle mani dello sviluppatore che può così apportare tutte le personalizzazioni desiderate.
File sorgenti
La cartella src del progetto contiene infine i file sorgenti veri e propri, che costituiscono i "mattoncini" della nostra applicazione: essi comprendono (ma non si limitano a) file JavaScript con il codice dei componenti, file CSS con i fogli di stile, eventuali "asset" (immagini, icone, font, ecc.).
Nella cartella troviamo ad esempio il file App.js, già predisposto dal tool create-react-app, che rappresenta il componente principale dell'applicazione e che ospiterà al suo interno tutti i componenti "figli" che andranno a comporre l'interfaccia utente.
Il componente che farà da contenitore verrà ospitato nel file index.html, che si trova invece nella cartella public e che funge da "entry point" della nostra applicazione.
Quando il comando npm start viene eseguito, il tool assembla i file in base alla configurazione predefinita, in modo che sia possibile fare debugging, e successivamente apre il browser per visualizzare l'applicazione tramite il server Web integrato. Il comando npm build ripete l'operazione ma ottimizzando il risultato per il rilascio in produzione.
Nella prossima lezione analizzeremo più in dettaglio il contenuto dei file dell'applicazione e vedremo come modificarli e aggiungerne di nuovi per introdurre nuove funzionalità nell'applicazione.