Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

React è diventato rapidamente un framework popolare per sviluppare views lato client e server. C'era una barriera più alta di ingresso riguardante gli strumenti utilizzati e qualche frustrazione legata a JavaScript da parte della community. Create-react-app è nata per affrontare queste frustrazioni.
Guida introduttiva
Vorrete prima assicurarvi di avere Node installato sul sistema. Dovete avere almeno la versione 4 di Node installata, anche se è raccomandata la versione 6 per download più rapidi e miglior utilizzo della memoria. Potete usare nvm per passare facilmente tra le versioni di Node.
Dopo aver installato Node, aprite il vostro strumento a linea di comando e installate globalmente create-react-app così da eseguirlo da qualsiasi parte nel sistema.
npm install -g create-react-app
Come creare la vostra prima app
Come prima cosa aprite la linea di comando e navigate o create una directory dove svilupperete l'applicazione. Poi creeremo l'applicazione scrivendo create-react-app tuts-plus-react-app
. Questa istruzione attiverà lo strumento dell'interfaccia a linea di comando per creare la nostra tuts-plus-react-app.

Una volta che lo strumento CLI avrà terminato verrete portati a una schermata riassuntiva che vi farà sapere dove è stata creata l'applicazione e vi mostrerà un elenco di comandi che potrete usare.

Navigate quindi verso la nuova applicazione eseguendo cd tuts-plus-react-app
.
Avviare l'applicazione
Potete eseguire localmente l'applicazione digitando npm start
. Una volta che l'app è avviata verrete automaticamente dirottati verso http://localhost:3000/ nel vostro browser e vedrete l'applicazione React.

L'applicazione utilizza webpack per avviare un server di sviluppo locale. È disponibile una funzionalità watch così, quando editerete il vostro codice React e salverete, vedrete i cambiamenti automaticamente mostrati nel browser.

Se fate qualche errore, vedrete gli errori o gli avvertimenti nel browser.

Stile del Codice e Test
ESLint è incluso per assicurare che il codice segua uno stile comune. Ciò vi aiuterà ad accertarvi che il codice sia coerente ed è senz'altro utile quando più persone contribuiscono a un progetto. Suggeriamo di usarlo se avete appena iniziato a usare React anche per imparare un buon stile di programmazione in React e JavaScript.
Se avete familiarità con lo sviluppo di tests, Jest è incluso proprio per questo. Jest è un framework di testing sviluppato e mantenuto da Facebook, che a sua volta ha realizzato React. Per eseguire i tests digitate npm test
nello strumento a linea di comando. Questa istruzione eseguirà i tests e avvierà un watcher per eseguirli quando il codice in produzione cambia. È disponibile un file di test che potete aggiungere in src/App.test.js
.
Distribuzione della vostra applicazione
Quando avete terminato le modifiche è tempo di distribuire l'applicazione. Dovrete solo eseguire npm run build
nella directory delle applicazioni. Questa istruzione userà Babel per trasformare il codice React in codice che il browser possa comprendere. MInificherà anche il codice in modo da garantire la miglior performance nel browser.
Guida Utente
Se deciderete di continuare a usare create-react-app consigliamo di spendere del tempo leggendo la guida utente. Ha molte informazioni utili relative ad altri argomenti orientati alle views come aggiungere fogli di stile CSS, importare altri componenti, importare immagini e fonts, ed altro. Ha inoltre informazioni circa le pratiche di sviluppo web come l'utilizzo di HTTPS, la connessione a un back end Node, lo sviluppo di applicazioni web progressive, e molto altro.
C'è infine un'estesa documentazione sul testing e la distribuzione dell'applicazione.
Happy Hacking
Speriamo siate ora in grado di vedere quanto è facile realizzare un'applicazione React usando il progetto create-react-app. Speriamo vi aiuti ad abbassare la barriera di ingresso e a iniziare a usare React. Sappiamo che vi piacerà!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post