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 npmcreate-react-app a livello globale:
questo pacchetto mette a disposizione il comando create-react-app per creare il template dell'applicazione:
DOS / Batch file
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 aggiunta ad eventuali source control quali, ad esempio, git o TFS
Per editare il codice puoi usare Visual Studio Code VSCodeIl progetto può essere eseguito in debug premendo CTRL+ò, per visualizzare il terminale, e poi:
DOS / Batch file
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'applicazione Quando è finita l'applicazione e si vuole creare la versione di produzione, si può eseguire il comando:
DOS / Batch file
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 file
npm install -g serve
e avviare il web server locale sulla cartella build:
