1 00:00:02,230 --> 00:00:06,820 E per questo, ha senso iniziare qui nell'app. file js. 2 00:00:06,820 --> 00:00:10,370 Ora lascia quel terminale aperto qui e quel processo ovviamente 3 00:00:10,390 --> 00:00:15,280 in esecuzione, in modo che i cambiamenti nel tuo codice si riflettano automaticamente sugli emulatori 4 00:00:15,340 --> 00:00:18,420 e ora vediamo come possiamo iniziare con quello. 5 00:00:18,460 --> 00:00:23,590 Ho già menzionato nel primo modulo del corso che React Native è incentrato su questi componenti 6 00:00:23,590 --> 00:00:28,870 di base integrati come testo e vista. Una vista sarebbe il tuo div dallo sviluppo web 7 00:00:28,870 --> 00:00:32,920 nel caso in cui tu sia uno sviluppatore web che probabilmente lo sei se conosci React. 8 00:00:32,920 --> 00:00:34,790 Quindi è un ottimo 9 00:00:34,810 --> 00:00:40,050 componente contenitore, puoi modellarlo come lo vedi qui e puoi avvolgere altri contenuti con esso. 10 00:00:40,240 --> 00:00:44,930 Ora, invece, un testo è un componente fondamentale per la stampa del testo, 11 00:00:44,930 --> 00:00:49,870 questo è il suo obiettivo, non lì per produrre un'immagine ma lì per produrre testo. 12 00:00:49,870 --> 00:00:55,540 Ora, ciò che non puoi fare in React Native e questa è la prima cosa importante, non puoi ad esempio 13 00:00:55,540 --> 00:00:57,810 generare testo tra una vista come questa. 14 00:00:57,910 --> 00:01:04,120 Se provassimo a salvarlo senza quel wrapper di testo, vedrai che avremo un errore. Questo è a proposito uno schermo che 15 00:01:04,120 --> 00:01:09,880 vedrai di volta in volta quando lavori con React Native, ti dà un 16 00:01:09,880 --> 00:01:15,910 errore, spiega cosa è andato storto. Ecco ad esempio un messaggio di errore abbastanza chiaro che ci dice che le stringhe 17 00:01:15,910 --> 00:01:17,800 di testo devono essere renderizzate all'interno del componente di 18 00:01:17,950 --> 00:01:19,330 testo e perché è così importante? 19 00:01:19,330 --> 00:01:21,100 Perché lo sto sottolineando? 20 00:01:21,220 --> 00:01:24,590 Poiché questa è una differenza importante nello sviluppo web, puoi 21 00:01:24,610 --> 00:01:27,850 inserire il testo ovunque. Nello sviluppo web, potresti 22 00:01:27,970 --> 00:01:35,800 avere un div e tra i tag di apertura e chiusura div, potresti avere qualsiasi testo e questo non funzionerà su React Native, non 23 00:01:35,800 --> 00:01:41,500 solo perché stiamo usando un div che non è supportato lì, ma ovviamente perché on React Native, 24 00:01:41,650 --> 00:01:49,810 puoi davvero produrre solo testo tra tag di testo, quindi devi usare quel componente di testo fornito da React Native per produrre testo e 25 00:01:49,810 --> 00:01:56,530 questa è una differenza cruciale per il web in cui puoi lanciare il tuo testo ovunque e in React Native, 26 00:01:56,530 --> 00:02:02,560 è un modo ancora più importante utilizzare il componente integrato giusto per il lavoro che si desidera eseguire 27 00:02:02,560 --> 00:02:09,070 e per lo stile, per l'impostazione di un contenitore in cui strutturare contenuti diversi, che sarebbe una vista, per 28 00:02:09,070 --> 00:02:15,070 l'output del testo, che potrebbe essere un testo. Per produrre un'immagine, ad esempio, 29 00:02:15,070 --> 00:02:20,460 avrai un componente immagine. Ecco come funziona React Native e parlando 30 00:02:20,860 --> 00:02:28,180 di stile, di layout, la vista ha questo come lavoro principale, è principalmente lì per applicare gli stili e per 31 00:02:28,450 --> 00:02:31,070 strutturare il contenuto che hai lì 32 00:02:31,180 --> 00:02:34,050 e parlando di quello, iniziamo con il layout. 33 00:02:34,360 --> 00:02:39,580 Diciamo nella nostra app, vogliamo avere due aree principali qui su quello schermo. In alto, voglio consentire all'utente di inserire 34 00:02:39,580 --> 00:02:45,850 del testo e sulla destra, voglio avere un pulsante per confermare questa scelta e sotto quello, quindi 35 00:02:45,850 --> 00:02:46,720 questa 36 00:02:46,720 --> 00:02:47,640 è la prima 37 00:02:47,650 --> 00:02:53,110 parte, l'area di input e sotto quella, abbiamo il seconda parte e questo è l'elenco 38 00:02:53,110 --> 00:02:54,530 degli obiettivi inseriti dall'utente. 39 00:02:54,550 --> 00:03:00,640 Quindi quindi qui in app. js, possiamo iniziare avendo una vista di avvolgimento perché 40 00:03:00,640 --> 00:03:06,280 proprio come in React normale, devi avere un componente padre e che in genere sarà una vista 41 00:03:06,280 --> 00:03:10,590 in React Native perché ti offre la maggior parte delle opzioni di layout 42 00:03:10,780 --> 00:03:17,910 e stile e all'interno di quella vista, potremmo avere un'altra vista per l'area di input in cui aggiungeremo il nostro input e 43 00:03:17,970 --> 00:03:23,860 sotto quello, ancora un'altra vista per avere la nostra lista di obiettivi e mi libererò di quel testo 44 00:03:23,860 --> 00:03:31,350 ed è abbastanza normale in React Native che tu abbia abbastanza di visualizzazioni nidificate l'una nell'altra, in modo da poter creare qualsiasi layout desiderato. 45 00:03:31,380 --> 00:03:38,150 Ora liberiamoci di questo contenitore laggiù tra l'altro e anche di questa assegnazione di stile e iniziamo 46 00:03:38,150 --> 00:03:40,230 da tutto questo da zero. 47 00:03:40,250 --> 00:03:46,100 Importante da asporto in questo momento è che ogni componente fornito da React Native ha il suo lavoro, 48 00:03:46,100 --> 00:03:51,560 non ci sono molti componenti ma quelli che hanno ruoli chiaramente definiti e quindi costruisci l'interfaccia utente 49 00:03:51,560 --> 00:03:56,510 annidando questi componenti l'uno nell'altro a seconda di ciò che vuoi ottenere, ad esempio se 50 00:03:56,510 --> 00:04:01,550 vuoi costruire un layout, inizi con l'annidamento di un paio di viste e poi una 51 00:04:01,910 --> 00:04:07,040 volta che sei nella parte in cui vuoi produrre il contenuto, inizierai ad aggiungere testi e 52 00:04:07,250 --> 00:04:14,960 così via e noi lo farò durante le prossime lezioni. Puoi anche andare sempre ai documenti ufficiali di React Native e lì se fai clic 53 00:04:14,960 --> 00:04:21,740 su Guide, Componenti e API, otterrai una panoramica di questi elementi costitutivi fondamentali. Troverai la vista qui, il testo, l'immagine, l'input di testo 54 00:04:21,740 --> 00:04:27,320 che ho già menzionato in precedenza e un paio di altri componenti principali e vedrai praticamente tutti 55 00:04:27,350 --> 00:04:32,720 questi o molti di quelli in questo corso e questo è un ottimo posto per immergersi più 56 00:04:32,720 --> 00:04:37,370 a fondo e imparare di più su di loro e come già sai se 57 00:04:37,370 --> 00:04:44,360 lascerai fuori quelli specifici della piattaforma laggiù che sono più focalizzati sulla nicchia, quindi non ci sono molti componenti principali, solo circa 58 00:04:44,390 --> 00:04:51,110 10 componenti principali e ecco come funziona React Native. Tuttavia, sarai in grado di creare qualsiasi 59 00:04:51,110 --> 00:04:53,690 app tu voglia come vedrai.