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à!