1 00:00:02,240 --> 00:00:08,750 Quindi questa è stata una grande introduzione a React Native ed expo, ma trovo importante che tu capisca 2 00:00:08,750 --> 00:00:11,540 con cosa stai lavorando prima di iniziare. 3 00:00:11,540 --> 00:00:18,470 Ora, però, è ora di iniziare e, per questo, visitare expo. io. Lì puoi fare clic su 4 00:00:18,470 --> 00:00:22,020 per iniziare e qui troverai i passaggi iniziali. 5 00:00:22,190 --> 00:00:24,290 Ora non hai davvero bisogno di quel primo 6 00:00:24,290 --> 00:00:30,920 passo, possiamo saltare direttamente al passaggio numero due che è che hai bisogno di NodeJS. Ora hai bisogno di NodeJS che è un runtime Javascript che ti 7 00:00:30,920 --> 00:00:36,800 consente ad esempio di creare app lato server con Javascript. Non è necessario perché stiamo per scrivere 8 00:00:36,800 --> 00:00:39,980 qualsiasi codice NodeJS in questo corso, non è 9 00:00:39,980 --> 00:00:41,020 un corso 10 00:00:41,030 --> 00:00:42,550 Node, non preoccuparti, 11 00:00:42,590 --> 00:00:50,750 non è necessario conoscere NodeJS ma è un pacchetto che ci consente di eseguire Javascript sul nostro computer e per 12 00:00:50,750 --> 00:00:54,680 esempio, il client expo dietro le quinte gira anche su 13 00:00:54,680 --> 00:00:57,410 Javascript, non è totalmente correlato a React 14 00:00:57,410 --> 00:01:00,100 Native, solo perché questo strumento funzioni correttamente. 15 00:01:00,230 --> 00:01:05,050 Anche per questo comando di installare lo strumento, npm, è Node Package Manager 16 00:01:05,150 --> 00:01:08,320 ed è anche reso disponibile da NodeJS. 17 00:01:08,330 --> 00:01:14,300 Quindi il primo passo è che visiti nodejs. org e lì, scarica 18 00:01:14,300 --> 00:01:20,300 l'ultima versione, nel mio caso 12. 6 da lì per iniziare e qualunque sia la tua ultima 19 00:01:20,300 --> 00:01:22,840 versione quando la stai visualizzando, scarica semplicemente quella versione, 20 00:01:22,880 --> 00:01:28,080 installala, ti dà un normale programma di installazione che puoi semplicemente percorrere facendo clic su tutti questi passaggi lì, 21 00:01:28,100 --> 00:01:29,420 niente di troppo fantasioso. 22 00:01:29,420 --> 00:01:32,220 È disponibile per MacOS e Windows e Linux. 23 00:01:32,270 --> 00:01:38,330 Quindi basta scaricarlo qui, passare attraverso il programma di installazione e una volta installato, è possibile procedere a 24 00:01:38,330 --> 00:01:39,760 questo terzo passaggio qui. 25 00:01:39,830 --> 00:01:46,130 Quindi con NodeJS installato, copiamo quel comando qui e quindi apriamo il tuo normale terminale o su Windows, 26 00:01:46,130 --> 00:01:49,770 il tuo prompt dei comandi e incolla quel comando qui. 27 00:01:49,790 --> 00:01:54,530 Ora su Mac e Linux, potrebbe essere necessario aggiungere un sudo davanti a questo, su 28 00:01:54,530 --> 00:01:57,820 Windows questo non sarà necessario, per ottenere le autorizzazioni giuste. 29 00:01:57,830 --> 00:01:59,090 Quindi qui lo inserirò, 30 00:01:59,120 --> 00:02:03,630 quindi ti potrebbe essere richiesta la password, semplicemente inseriscilo se lo sei e ora 31 00:02:03,740 --> 00:02:09,290 questo installerà la CLI expo che è questo strumento che ci aiuta a creare e gestire progetti React 32 00:02:09,290 --> 00:02:15,080 Native con l'aiuto di expo a livello globale sulla tua macchina, in modo che tu possa usarla da qualsiasi 33 00:02:15,230 --> 00:02:16,280 parte della 34 00:02:16,280 --> 00:02:19,190 tua macchina, così da qualsiasi parte del tuo terminale. 35 00:02:19,280 --> 00:02:21,540 Quindi aspettiamo che l'installazione finisca, puoi 36 00:02:21,560 --> 00:02:26,180 ignorare tutti gli avvisi tra cui potresti trovarti e tornerò al 37 00:02:26,180 --> 00:02:27,470 termine dell'installazione. 38 00:02:27,560 --> 00:02:33,170 Puoi anche ignorare questi errori intermedi qui, a condizione che il totale non si blocchi con un 39 00:02:33,170 --> 00:02:35,990 errore ma finisca con un messaggio come questo 40 00:02:35,990 --> 00:02:38,030 alla fine, hai avuto successo. 41 00:02:38,030 --> 00:02:43,760 Quindi, con questo, abbiamo installato Expo CLI, il passo successivo è creare il nostro progetto, quindi il passo numero 42 00:02:43,760 --> 00:02:44,510 quattro qui. 43 00:02:44,510 --> 00:02:46,280 Facciamo questo eseguendo expo init 44 00:02:46,340 --> 00:02:52,250 e quindi qualsiasi nome di progetto a tua scelta e per questo, prima di tutto assicurati di usare il comando cd per 45 00:02:52,310 --> 00:02:58,890 navigare nella cartella qui sul tuo computer dove vuoi creare quel progetto. Quindi l'ho fatto qui, mi trovo in quella cartella 46 00:02:58,890 --> 00:03:04,440 e ora posso eseguire expo init e chiamerò questa rn-first-app perché dopo tutto è 47 00:03:04,440 --> 00:03:09,870 la nostra prima app React Native. Basta premere invio, quel nome ovviamente dipende totalmente da 48 00:03:09,870 --> 00:03:11,250 te che hai 49 00:03:11,250 --> 00:03:16,530 qui e questo creerà una nuova cartella nel luogo in cui hai eseguito questo comando e configurerai 50 00:03:16,800 --> 00:03:18,810 lì un'app React Native usando expo. 51 00:03:18,900 --> 00:03:22,290 Ora probabilmente ti viene chiesto quale modello vuoi usare e 52 00:03:22,350 --> 00:03:25,480 lì puoi andare con il modello vuoto per ora. 53 00:03:25,560 --> 00:03:32,700 Assicurati di non scegliere il minimo indispensabile perché sarebbe una configurazione senza l'ambiente expo con tutte 54 00:03:32,700 --> 00:03:34,060 le funzionalità 55 00:03:34,080 --> 00:03:36,570 di convenienza, quindi vai sicuramente qui. 56 00:03:36,570 --> 00:03:42,570 Ora, probabilmente ti verrà chiesto di inserire un nome per la tua app e inserirò qui la prima app, che alla 57 00:03:42,570 --> 00:03:43,050 fine 58 00:03:43,080 --> 00:03:47,770 è il nome che viene visualizzato nel selettore di attività della tua app nella schermata principale 59 00:03:47,770 --> 00:03:48,540 e presto. 60 00:03:48,570 --> 00:03:52,130 Puoi lasciare la lumaca così com'è e semplicemente premere di nuovo 61 00:03:52,140 --> 00:03:58,650 Invio, ora sto anche usando il filo sulla mia macchina, che è un'alternativa a npm, potresti non chiederti se vuoi 62 00:03:58,650 --> 00:04:00,780 usare un filo che è totalmente 63 00:04:00,780 --> 00:04:03,210 a posto, lo farò anche scegliere no 64 00:04:03,390 --> 00:04:08,550 qui per usare npm e quindi ora, andrà avanti, creare questa cartella di progetto, installare tutte 65 00:04:08,550 --> 00:04:14,970 le dipendenze richieste come React e React Native e darci un progetto React Native che possiamo usare per costruire un'app 66 00:04:14,970 --> 00:04:15,330 nativa. 67 00:04:15,570 --> 00:04:17,960 Quindi aspettiamo che questo finisca ora. 68 00:04:17,970 --> 00:04:23,610 Ora, una volta terminato, vedi le prossime istruzioni qui. Puoi navigare nella cartella appena creata con 69 00:04:23,610 --> 00:04:31,230 il comando cd e poi lì, semplicemente avviare npm start. Npm start avvierà ora lo strumento di sviluppo 70 00:04:31,230 --> 00:04:38,410 di Expo, gli strumenti di sviluppo di Expo e una nuova scheda dovrebbe aprirsi nel tuo browser. 71 00:04:38,570 --> 00:04:43,420 Ecco quella scheda che si è aperta, se ci sono problemi qui, puoi ignorare che 72 00:04:43,550 --> 00:04:49,070 per ora, questo qui è lo strumento di sviluppo expo o gli strumenti di sviluppo expo come viene chiamato. 73 00:04:49,280 --> 00:04:55,610 È una finestra che ti consente di eseguire la tua app su diversi dispositivi collegati o di aggiungere simulatori e ti consente 74 00:04:55,760 --> 00:05:00,740 di gestire generalmente parti della tua app, vedi qui alcuni output dalla tua app, alcuni avvisi che 75 00:05:00,740 --> 00:05:02,650 potresti ricevere e questo è 76 00:05:02,750 --> 00:05:09,200 molto comodo finestra per la gestione dell'app e per l'esecuzione dell'app. Ora assicurati anche che qui 77 00:05:09,210 --> 00:05:15,780 nel terminale in cui hai eseguito npm start, lascerai quel processo in esecuzione. 78 00:05:15,810 --> 00:05:21,000 Potresti vedere che non è finito, non riesci a vedere quella riga di input in cui puoi inserire 79 00:05:21,630 --> 00:05:27,630 i comandi, invece qui non puoi digitare o puoi premere alcune delle scorciatoie che vedi qui ma non puoi digitare 80 00:05:27,630 --> 00:05:28,500 nuovi comandi. 81 00:05:28,500 --> 00:05:33,960 Puoi sempre uscire da questo processo premendo control e c contemporaneamente, ma dovresti lasciare questo processo attivo 82 00:05:33,960 --> 00:05:37,640 e funzionante per tutto il tempo in cui lavori al tuo 83 00:05:37,740 --> 00:05:42,660 progetto e se hai finito per il giorno, puoi chiuderlo e riavviarlo il giorno successivo 84 00:05:42,660 --> 00:05:47,850 perché questo processo controllerà anche il tuo codice e ogni volta che cambi qualcosa nel tuo codice 85 00:05:47,850 --> 00:05:52,530 e salvi tale modifica, la salverà automaticamente e la pubblicherà sul tuo dispositivo connesso. 86 00:05:52,560 --> 00:05:58,680 Ma a proposito di questo, connettiamo il dispositivo e, per quello, il modo più semplice per iniziare è 87 00:05:58,680 --> 00:06:01,940 usare il tuo iPhone o telefono Android che possiedi. 88 00:06:01,950 --> 00:06:08,290 Quindi nel mio caso, è un iPhone qui ed ecco il mio vero telefono e sono nell'App Store, ora è in tedesco perché ho un telefono 89 00:06:08,290 --> 00:06:12,730 tedesco ma questo è il normale App Store. Ora lì, puoi 90 00:06:12,730 --> 00:06:19,900 andare nell'area di ricerca e cercare expo. Ora, una volta che lo hai fatto, dovresti trovare quel client expo qui 91 00:06:20,020 --> 00:06:26,680 e puoi semplicemente scaricarlo sul tuo dispositivo, è gratis da usare. Basta installarlo sul dispositivo e attendere il completamento dell'installazione 92 00:06:26,680 --> 00:06:28,430 e, una volta terminato, 93 00:06:28,450 --> 00:06:30,690 è possibile aprirlo e ora con 94 00:06:30,700 --> 00:06:37,030 l'app expo installata, non è necessario registrarsi qui, invece su Android dovresti essere in grado per scansionare 95 00:06:37,370 --> 00:06:42,880 quel codice a barre direttamente dall'app expo. Su iOS, apri semplicemente l'app della fotocamera 96 00:06:42,880 --> 00:06:49,230 e poi puoi anche andare agli strumenti di sviluppo qui e vedrai quel codice a barre 97 00:06:49,230 --> 00:06:58,190 qui, tieni semplicemente la fotocamera su quella su iOS o lo scanner dell'app expo qui su Android e dovresti essere richiesto se vuoi 98 00:06:58,190 --> 00:07:03,510 aprire un'app in expo allora. Basta aprirlo lì e ora questo 99 00:07:03,800 --> 00:07:07,730 dovrebbe aprire la tua app qui nel client expo che 100 00:07:07,760 --> 00:07:14,810 hai installato, di nuovo senza registrarti, semplicemente tenendo la fotocamera del tuo iPhone sopra quel codice a barre 101 00:07:14,810 --> 00:07:19,350 o su Android facendolo direttamente dall'app expo dove avrai quell'opzione per farlo. 102 00:07:19,370 --> 00:07:24,050 Quindi ora questo creerà il bundle Javascript come vedi qui in basso o in altre 103 00:07:24,050 --> 00:07:30,260 parole, questo ora prenderà la tua app e la compilerà sostanzialmente e la preparerà e poi la caricherà qui sui 104 00:07:30,320 --> 00:07:36,920 server di Expo nella tua app e puoi semplicemente premere ottenuto qui nella prima schermata e quindi questa è la tua app 105 00:07:36,920 --> 00:07:38,130 React Native iniziale. 106 00:07:38,270 --> 00:07:43,220 E ora visualizziamo effettivamente il codice per questo e vediamo come possiamo cambiare qualcosa nel codice per vedere qualcosa 107 00:07:43,220 --> 00:07:45,110 di diverso qui su questa schermata.