Precedentemente aveo mostrato come creare una applicazione base in React.
L'approccio mostrato adava bene per un ambiente di test ma non per un appplicazione 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:
npm install -g create-react-app
Per funzionare richiede NodeJs
questo pacchetto mette a disposizione il comando create-react-app per creare il template dell'applicazione:
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
La cartella node_modules può essere ricostruita in ogni momento tramite il comando npm install. Questo comando legge l'elenco dei pacchetti necessari da package.json e provvede al download dei pacchetti. Per questo motivo non va aggunta ad eventuali source control quali, ad esempio, git o TFS

Per editare il codice puoi usare Visual Studio Code
VSCodeVSCode
Il progetto può essere eseguito in debug premendo CTRL+ò, per visualizzare il terminale, e poi:
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:
pagina dell'applicazionepagina dell'applicazione

Quando è finita l'applicazione e si vuole creare la versione di produzione, si può eseguire il comando:
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:
npm install -g serve
e avviare il web server locale sulla cartella build:
serve -s build
che risponde all'indirizzo http://localhost:5000