Creare un applicazione React
16 novembre 2017
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:
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:
Per editare il codice puoi usare Visual Studio Code
VSCodeIl progetto può essere eseguito in debug premendo CTRL+ò, per visualizzare il terminale, e poi:
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'applicazione
Quando è finita l'applicazione e si vuole creare la versione di produzione, si può eseguire il comando:
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:
Se voglio testare la versione di produzione in locale, posso installare a livello globale il pacchetto serve:
e avviare il web server locale sulla cartella build:
che risponde all'indirizzo http://localhost:5000
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 file
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:DOS / Batch file
create-react-app sgart-react
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 aggiunta ad eventuali source control quali, ad esempio, git o TFS
Per editare il codice puoi usare Visual Studio Code
VSCodeDOS / Batch file
npm start
Quando è finita l'applicazione e si vuole creare la versione di produzione, si può eseguire il comando:
DOS / Batch file
npm run build
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 file
npm install -g serve
DOS / Batch file
serve -s build