E per questo, ha senso iniziare qui nell'app. file js.
Ora lascia quel terminale aperto qui e quel processo ovviamente
in esecuzione, in modo che i cambiamenti nel tuo codice si riflettano automaticamente sugli emulatori
e ora vediamo come possiamo iniziare con quello.
Ho già menzionato nel primo modulo del corso che React Native è incentrato su questi componenti
di base integrati come testo e vista. Una vista sarebbe il tuo div dallo sviluppo web
nel caso in cui tu sia uno sviluppatore web che probabilmente lo sei se conosci React.
Quindi è un ottimo
componente contenitore, puoi modellarlo come lo vedi qui e puoi avvolgere altri contenuti con esso.
Ora, invece, un testo è un componente fondamentale per la stampa del testo,
questo è il suo obiettivo, non lì per produrre un'immagine ma lì per produrre testo.
Ora, ciò che non puoi fare in React Native e questa è la prima cosa importante, non puoi ad esempio
generare testo tra una vista come questa.
Se provassimo a salvarlo senza quel wrapper di testo, vedrai che avremo un errore. Questo è a proposito uno schermo che
vedrai di volta in volta quando lavori con React Native, ti dà un
errore, spiega cosa è andato storto. Ecco ad esempio un messaggio di errore abbastanza chiaro che ci dice che le stringhe
di testo devono essere renderizzate all'interno del componente di
testo e perché è così importante?
Perché lo sto sottolineando?
Poiché questa è una differenza importante nello sviluppo web, puoi
inserire il testo ovunque. Nello sviluppo web, potresti
avere un div e tra i tag di apertura e chiusura div, potresti avere qualsiasi testo e questo non funzionerà su React Native, non
solo perché stiamo usando un div che non è supportato lì, ma ovviamente perché on React Native,
puoi davvero produrre solo testo tra tag di testo, quindi devi usare quel componente di testo fornito da React Native per produrre testo e
questa è una differenza cruciale per il web in cui puoi lanciare il tuo testo ovunque e in React Native,
è un modo ancora più importante utilizzare il componente integrato giusto per il lavoro che si desidera eseguire
e per lo stile, per l'impostazione di un contenitore in cui strutturare contenuti diversi, che sarebbe una vista, per
l'output del testo, che potrebbe essere un testo. Per produrre un'immagine, ad esempio,
avrai un componente immagine. Ecco come funziona React Native e parlando
di stile, di layout, la vista ha questo come lavoro principale, è principalmente lì per applicare gli stili e per
strutturare il contenuto che hai lì
e parlando di quello, iniziamo con il layout.
Diciamo nella nostra app, vogliamo avere due aree principali qui su quello schermo. In alto, voglio consentire all'utente di inserire
del testo e sulla destra, voglio avere un pulsante per confermare questa scelta e sotto quello, quindi
questa
è la prima
parte, l'area di input e sotto quella, abbiamo il seconda parte e questo è l'elenco
degli obiettivi inseriti dall'utente.
Quindi quindi qui in app. js, possiamo iniziare avendo una vista di avvolgimento perché
proprio come in React normale, devi avere un componente padre e che in genere sarà una vista
in React Native perché ti offre la maggior parte delle opzioni di layout
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
sotto quello, ancora un'altra vista per avere la nostra lista di obiettivi e mi libererò di quel testo
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.
Ora liberiamoci di questo contenitore laggiù tra l'altro e anche di questa assegnazione di stile e iniziamo
da tutto questo da zero.
Importante da asporto in questo momento è che ogni componente fornito da React Native ha il suo lavoro,
non ci sono molti componenti ma quelli che hanno ruoli chiaramente definiti e quindi costruisci l'interfaccia utente
annidando questi componenti l'uno nell'altro a seconda di ciò che vuoi ottenere, ad esempio se
vuoi costruire un layout, inizi con l'annidamento di un paio di viste e poi una
volta che sei nella parte in cui vuoi produrre il contenuto, inizierai ad aggiungere testi e
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
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
che ho già menzionato in precedenza e un paio di altri componenti principali e vedrai praticamente tutti
questi o molti di quelli in questo corso e questo è un ottimo posto per immergersi più
a fondo e imparare di più su di loro e come già sai se
lascerai fuori quelli specifici della piattaforma laggiù che sono più focalizzati sulla nicchia, quindi non ci sono molti componenti principali, solo circa
10 componenti principali e ecco come funziona React Native. Tuttavia, sarai in grado di creare qualsiasi
app tu voglia come vedrai.