In questa guida vedremo il setup iniziale di React Native e scoprirai come creare il tuo ambiente di lavoro in modo tale da far partire la tua prima app. Ti ricordo che questo articolo è parte di una guida ben più ampia della quale puoi scoprirne di più a questo indirizzo. Questa guida richiede da parte tua la conoscenza di React e quindi JavaScript così come la conoscenza di Node, NPM e della gestione delle dipendenze nel file package.json.

Se hai dubbi prima di tutto ti conviene studiarti la guida per imparare ReactJS. Dopo di che potrebbe esserti utile la guida che ti spiega cosa sono le dipendenze e come installarle.

React Native: Setup Iniziale

In questo articolo vediamo come eseguire il setup iniziale per lavorare con React Native.

Node

Per prima cosa è necessario che hai un computer con installato Node. Da questo punto di vista se conosci già ReactJS non troverai difficoltà e puoi procedere con il setup iniziale di React Native.

React Native

Dopo di che abbiamo la necessità di installare React Native quindi apri il terminale ed installa globalmente “create-react-native-app”:

 npm install -g create-react-native-app 

Create-react-native-app è un progetto che ci permette di eseguire la nostra app con Expo e te lo faccio vedere anche se poi dovremo seguire un’altra strada.

Per quello che andremo a fare più avanti esegui anche:

npm install -g watchmen

npm install -g react-native-cli

Se hai problemi segui la guida a questo indirizzo.

Emulatore e Simulatore

Per quanto riguarda lo sviluppo su Android necessitiamo di un emulatore. Hai diverse possibilità, per esempio utilizzando Genymotion. Quello che ti consiglio però di fare è di installare Android Studio (quando sarà il momento utilizzeremo il suo emulatore Android).

Puoi installare Android Studio da questo indirizzo. Per installarlo ti consiglio di seguire la guida di React Native (Mac – Android o Windows-Android) che trovi quì così da configurarlo al meglio!

Dopo di che per l’app iOS ti consiglio vivamente di usare un MacBook con Xcode installato. Altrimenti potresti provare con Xamarin Live App che è davvero semplice da utilizzare.

Purtroppo Expo ancora non supporta Realm e di conseguenza non potrei farti vedere scrittura e lettura su database, in ogni caso per questa guida puoi utilizzare anche solo l’emulatore Android senza problemi.

La nostra prima app

A questo punto utilizzeremo l’IDE che preferisci per il codice. Io ti consiglio di utilizzare uno tra:

• SublimeText (gratuito)
• WebStorm (pagamento)

Posizionati all’interno di una cartella dove terrai il progetto utilizzando il terminale.

Crea l’app lanciando da terminale:

create-react-native-app blog-app

Una volta conclusa la creazione potrai vedere la cartella blog-app. Con il terminale entra al suo interno e digita “npm start”. Questo dovrebbe far stampare un QR code con delle istruzioni per l’utilizzo di Expo.

Se vuoi fare una prova rapida con Expo

Giunti a questo punto della guida sul setup iniziale di React Native puoi fare una prova rapida con Expo anche se non riusciremo ad utilizzarlo più avanti. Puoi scaricare ed installarti Expo XDE da questo indirizzo. Puoi anche provare un po’ di codice live dal browser andando quì.

Puoi provare l’app direttamente sul tuo device (che è perfetto!) scaricando l’app di Expo disponibile sia su Play Store che su App Store. Una volta dentro l’app puoi scannerizzare il QR code che si è presentato nel terminale dopo aver eseguito “npm start”.

Altrimenti puoi bloccare l’esecuzione del terminale con CTRL + C ed aprire Expo XDE sul tuo computer.

Dunque puoi aprire da quì l’app chiamata blog-app cliccandoci sopra oppure selezionare la cartella manualmente. Una volta scelta l’app arriverai in questa schermata:

Dunque in alto a sinistra clicca sulla rotella ed imposta la voce Host su Lan e la voce Protocol su exp.

Quindi se stai usando un MacBook ed hai Xcode con il simulatore installato puoi andare in alto a destra e selezionare “Device”, quindi cliccare su “Open on iOS Simulator” se vuoi un dispositivo iOS. Per gli utenti Windows consiglio di avere un iPhone o studiare il funzionamento di Xamarin Live App.

Per quanto riguarda Android è necessario sia su Mac OS che su Windows di aprire Android Studio ed andare nella barra in Tools > Android > AVD Manager e selezionare un dispositivo.

In basso puoi anche creare un dispositivo a tuo piacimento. Dunque una volta avviato il dispositivo puoi tornare su Expo e cliccare in alto a destra su “Device” > “Open on Android”.

Come già detto al momento però non ci importa di Expo. Con quello che hai visto hai imparato a far girare un’app React Native con Expo e tecnicamente avresti potuto finire il setup iniziale di React Native in questo modo.

Setup Iniziale di React Native

Dunque Expo non ci interessa al momento, però utilizzeremo comunque il simulatore iOS e l’emulatore Android come visto per il setup iniziale di React Native.

Con il terminale esci dalla cartella vista prima e crea una nuova app che non sfrutti il progetto già pronto “create-react-native-app”. Quindi per farlo puoi scrivere nel terminale:

react-native init paoloApp

Per gli utenti Mac OS sarà sufficiente posizionarsi con il terminale nella cartella dell’applicazione e lanciare il comando:

react-native run-ios

Grazie a questo comando il simulatore iOS partirà in automatico eseguendo la nostra app (impiega qualche minuto la prima volta!).

Come puoi notare ho modificato leggermente il testo. Cosa che puoi fare anche tu osservando i risultati live nel tuo dispositivo fisico o virtuale che sia. E’ necessario che entri nel dev menù come spiegato nel testo dell’app e clicchi / fai tap su “Enable Live Reload”:

Infine ti è sufficiente aprire con l’IDE o editor che preferisci l’app e modificare il file App.js.

Per ottenere lo stesso risultato con Android è necessario che prima fai partire l’emulatore con lo stesso procedimento visto per Expo nel paragrafo precedente. Dunque esegui il comando da terminale:

react-native run-android

Se hai problemi potresti esserti dimenticato di configurare la variabile d’ambiente ANDROID_HOME. Su Mac puoi scrivere da terminale:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

Su Windows non dovresti avere questo problema, in ogni caso puoi seguire quì la guida completa per Mac e Windows.

Conclusioni

Ora hai concluso il setup di React Native. In questa guida non è essenziale saper usare il simulatore iOS e l’emulatore Android, ma è sufficiente farne funzionare uno dei due così da poter andare avanti e capire React Native. Per la configurazione il web è pieno di guide.

Oltre tutto ci tengo a dirti che chi fa dello sviluppo app un lavoro spesso ha più dispositivi ed almeno un dispositivo iOS ed uno Android.

Non ti perdere quindi la guida salvandoti il link alla guida per imparare React Native.

Se sei interessato continua a seguirmi, magari iscriviti alla newsletter così da non dimenticarti di questa guida. Nel caso in cui ancora non ti senti pronto con React puoi sempre seguire questa guida e poi potrai imparare React Native.

Se vuoi rimanere aggiornato sul continuo di questa guida ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Prossimo articolo della guida: React Native: navigazione tra più pagine, routing