Creare un applicazione React

Precedentemente avevo mostrato come creare una applicazione base in React.
L'approccio mostrato andava bene per un ambiente di test ma non per un applicazione in produzione, in quanto i file non erano ne minificati ne compilati.
Per creare un applicazione React che possa essere portata in produzione, è necessario installare il pacchetto npm create-react-app a livello globale:

DOS / Batch fileCopia

npm install -g create-react-app

questo pacchetto mette a disposizione il comando create-react-app per creare il template dell'applicazione:

DOS / Batch fileCopia

create-react-app sgart-react

una volta eseguito, crea la directory sgart-react, scarica le dipendenze (pacchetti npm nella cartella node_modules) e crea le altre directory e files che compongono il template di progetto.
La struttura risultante è la seguente:

• node_modules
• ... circa 893 cartelle e un totale di 21000 elementi
• public
• favicon.ico
• index.html
• manifest.json
• src
• App.css
• App.js
• App.test.js
• index.css
• index.js
• logo.svg
• registerServiceWorker.js
• .gitignore
• package-lock.json
• package.json
• README.md

Per editare il codice puoi usare Visual Studio Code

Il progetto può essere eseguito in debug premendo CTRL+ò, per visualizzare il terminale, e poi:

DOS / Batch fileCopia

npm start

che avvia un web server locale all'indirizzo http://localhost:3000/ in modalità watch, questo significa che quando si salva una pagina modificata, parte il processo di compilazione e di reload della pagina nel browser:

Quando è finita l'applicazione e si vuole creare la versione di produzione, si può eseguire il comando:

DOS / Batch fileCopia

npm run build

questo crea la cartella build con i file minificati che può essere portata sull'ambiente di produzione.
La struttura dei file risultanti della cartella build è simile alla seguente:

• static
• css
• main.c17080f1.css
• main.c17080f1.css.map
• js
• main.591fd843.js
• main.591fd843.js.map
• media
• logo.5d5d9eef.svg
• asset-manifest.json
• favicon.ico
• index.html
• manifest.json
• service-worker.js

Se voglio testare la versione di produzione in locale, posso installare a livello globale il pacchetto serve:

DOS / Batch fileCopia

npm install -g serve

e avviare il web server locale sulla cartella build:

DOS / Batch fileCopia

serve -s build

che risponde all'indirizzo http://localhost:5000