Per visualizzare e modificare il nostro codice, abbiamo bisogno di un editor e ti consiglio di utilizzare Visual Studio Code che
è un IDE gratuito e molto potente, ottimo per lo sviluppo di Javascript, che è quello che stiamo facendo qui
alla fine.
Puoi ottenerlo dal codice. VisualStudio. da lì
trovi le versioni per Mac, Windows e Linux, scarica semplicemente quella per il tuo sistema
operativo e segui il programma di installazione che ti dà. Una volta installato, apri Visual Studio Code
e, lì dentro, apri il tuo progetto andando su file, quindi scegli semplicemente il
tuo progetto, nel mio caso, rn-first-app. Fai clic su Apri qui e questo
ora aprirà il progetto qui in Visual Studio Code. Ora il mio codice di Visual Studio appare come appare qui perché ho
un tema speciale abilitato che puoi modificare in preferenze, tema colore e lì sto usando il tema dark plus.
Quindi, se vuoi avere lo stesso
aspetto, puoi usarlo e ho anche installato un'estensione speciale che puoi fare sotto le estensioni di visualizzazione,
lì ho installato il tema dell'icona materiale, questo qui che è totalmente opzionale ma puoi installarlo da anche lì e, successivamente,
torna a visualizzare
Explorer per vedere di nuovo i tuoi file in modo da
ottenere le stesse icone di file che
ho qui, di nuovo è del tutto facoltativo e con quello fuori mano, questa è la nostra app React Native gestita da expo.
Ora lascia che ti guidi rapidamente attraverso ciò che abbiamo qui e poi ti mostri cosa puoi cambiare
nel codice per cambiare qualcosa nella tua app.
Ora abbiamo un paio di cartelle e
file qui, il. la cartella expo contiene
solo una configurazione per expo, non è necessario toccarla. La cartella delle risorse, che contiene alcune immagini in questo caso,
come l'icona della tua app e l'immagine della schermata iniziale e ci immergeremo nel modo in cui puoi personalizzarla verso la fine del corso e
useremo altre risorse come le immagini in generale durante questo corso ovviamente. La cartella dei moduli del nodo contiene tutte
le dipendenze di questo progetto, ad esempio React and React Native ma anche le dipendenze delle
dipendenze e questa cartella viene gestita automaticamente per te, quindi non è
necessario toccarla e non dovresti toccarla . gitignore è un file che ci aiuta con git
che è un sistema di gestione del codice sorgente o uno strumento di gestione del codice sorgente e
non è necessario usare git, se lo fai, probabilmente sai cosa fa gitignore e se non sai cosa git è,
dopo questa lezione, troverai una breve introduzione ad esso o alcune risorse che ti aiuteranno a iniziare con esso, ma non
devi usare git per lavorare con React Native. Watchmenconfig, è qualcosa che puoi ignorare quando vedi che è vuoto qui, è
uno strumento utilizzato dietro le quinte dall'esposizione alla fine e dall'app. js file quindi il file che
contiene il codice che è responsabile del rendering di ciò che vediamo qui sullo schermo.
Ci approfondiremo in una seconda app. json manterremo alcune configurazioni per la nostra app React Native
alimentata da expo e ci immergeremo anche in questo corso per ora, ignoriamolo. Babel config configura come il codice
Javascript è ottimizzato e compilato, puoi lasciare anche qui il valore
predefinito e il pacchetto. json file gestisce le tue dipendenze e lì vedi
che stai usando expo ma anche React, anche React DOM perché expo in realtà supporta anche la creazione di app React per il web ma
poi anche React Native qui e React Native web perché, di nuovo, expo ti dà la possibilità di creare anche app
Web con l'aiuto di React Native, non è qualcosa su cui ci concentreremo in questo corso.
Quindi questa è la configurazione che abbiamo
qui, il file importante per noi al momento è l'app. file js perché è alla fine responsabile
di ottenere qualcosa sullo schermo.
Ora il contenuto esatto del file che vedi qui nella tua app. Tuttavia, il file js potrebbe cambiare nel
tempo, questo progetto di avvio che viene generato automaticamente semplicemente a volte viene modificato.
Ciò ovviamente non influisce su ciò che spiego qui o su questo corso, non significa che nulla
sia obsoleto o qualcosa del
genere, è solo un progetto di partenza
diverso e se vuoi seguire esattamente lo stesso che ho, tu ' Lo troverò allegato, quindi puoi anche
usarlo ma, naturalmente, potresti anche continuare con gli spettatori se sembra leggermente diverso perché,
come ho già detto, è solo un progetto
di partenza che hai, React Native ovviamente funziona ancora come L'ho spiegato qui e
quindi puoi assolutamente seguirlo e aggiungere la tua app. File js nel modo in cui l'ho aggiunto
e qui vediamo che importiamo React proprio come lo faremmo in un'app web React.
Dobbiamo importare React perché qui, puoi anche vedere che stiamo usando jsx che è questa speciale sintassi
Javascript che assomiglia a
HTML ma alla fine è solo Javascript
e nel caso in cui non l'avessi mai visto, tuffati sicuramente in un'app React o React tutorial prima,
mi aspetto che tu sappia come funziona generalmente React.
Abbiamo sempre un'altra importazione qui e questa è l'importazione React Native in cui importiamo foglio di stile,
testo e vista da lì.
Ora questi sono questi componenti e caratteristiche speciali di cui stavo parlando in precedenza, il testo e la vista sono
componenti forniti da React Native che vengono compilati in widget della piattaforma nativa e il foglio di stile è una funzionalità aggiuntiva
fornita da React Native che ti aiuta con lo stile.
Ora, qui, abbiamo un normale componente React come lo costruiremmo anche in un'app web React for.
Qui abbiamo un componente funzionale e con l'aiuto degli hook di React, possiamo lavorare con componenti funzionali
solo come probabilmente saprai e questo componente funzionale restituisce un codice jsx che viene visualizzato sullo schermo e qui
stiamo usando
il widget di visualizzazione o il componente di visualizzazione fornito da React Native e il componente di testo e
il componente di visualizzazione è come un div,
è un buon wrapper, buono anche per applicare alcuni stili per alcuni contenitori e rileva viene quindi utilizzato per produrre del
testo che si inserisce tra la sua apertura e tag di chiusura.
E quaggiù, abbiamo alcuni stili definiti, React Native non usa CSS ma usa una sintassi
di stile basata su CSS o segue convenzioni di denominazione simili ma approfondiremo come modellare le tue
app React Native in questo corso ovviamente.
Quindi, cambiamo ciò che vediamo sullo schermo e aggiungiamo effettivamente un pulsante qui.
Ora il bello è che possiamo importare un pulsante da React Native, che è un altro componente fondamentale fornito da React Native, quindi possiamo
aggiungere questa importazione e quindi usare un pulsante lì sotto. Tuttavia non lo usiamo con un tag di
apertura e chiusura
ma come elemento a chiusura automatica e quindi possiamo aggiungere qui un supporto per il titolo per impostare il
testo che vediamo su un pulsante, ad esempio cambiare testo.
Ora quando tocchiamo questo pulsante, potremmo voler cambiare questo testo qui e per questo,
dobbiamo gestire un po 'di stato qui perché voglio cambiare alcuni dati che dovrebbero portare al
rendering di questo componente e per questo, è necessario stato .
Ora prima di React 16. 8, che è supportato qui, però, dovresti convertirlo in un componente basato
su classi per utilizzare State, dal React 16. 8, possiamo usare gli
hook di React e, nel caso in cui
non sapessi cosa siano gli hook, dovresti assolutamente immergerti nelle basi degli
hook, in allegato troverai le risorse per iniziare. I hook sono importati da React e qui abbiamo bisogno del hook useState che
ci consente di gestire lo stato in un componente funzionale.
Detto questo, possiamo usare quell'hook chiamando useState qui e dandogli un valore predefinito che potrebbe essere questo testo qui, tagliamolo da laggiù e aggiungiamolo qui
come stringa e quindi
qui possiamo usare l'array destructuring per ottenere il nostro output text e ottieni una funzione per modificare o
ripristinare o sovrascrivere questo testo di output ed è proprio così che funziona l'hook useState, ti dà un array
con esattamente due elementi, in cui il
primo elemento è l'istantanea dello stato corrente, quindi o il nostro stato iniziale o successivo per
i successivi cicli di ri-rendering, qualunque cosa impostiamo il nostro stato e la seconda è una
funzione
che ti consente di impostare il tuo stato su un nuovo valore e chiamando
tale funzione ritornierà l'intero componente e il testo di output farà quindi riferimento all'ultimo nuovo stato.
Quindi qui tra il testo, voglio emettere il testo di output e premendo un
pulsante, voglio cambiarlo.
Quindi sul pulsante, possiamo quindi registrare onPress che è sostanzialmente l'equivalente di onClick che
avremmo nel
web, qui è onPress e quindi dobbiamo associarlo a una funzione, ad esempio una funzione
in linea anonima qui con questa sintassi dove chiamiamo set output text e lo impostiamo sul testo modificato.
Quindi questo chiamerà questa funzione qui, sovrascriverà il nostro stato, quindi eseguirai nuovamente il rendering di questo
componente, questo verrà aggiornato nel prossimo ciclo di rendering e quindi, dato che abbiamo emesso un testo di
output laggiù, questo cambierà. Se ora salviamo tutto
ciò, la cosa bella è che la tua app che avresti ancora dovuto aprire sul telefono dovrebbe essere
ricaricata
automaticamente, non è
necessario riavviarla, non è necessario eseguire nuovamente la scansione di questo codice, solo modificando il codice e
salvando questo file, dovrebbe essere ricaricato automaticamente qui. E ora se tocchiamo ora cambia testo qui, vedrai il testo modificato e
questa è la tua prima app React Native che fa il suo lavoro
con l'expo ma di nuovo puoi creare e pubblicare questo come app standalone e lo faremo entro la fine di
il corso e quindi questo è un modo fantastico di iniziare e lo sviluppo di React Native può essere
altrettanto semplice.
Ora con questo, finiamo questo primo modulo prima di approfondire React Native e scrivere il codice
React Native dal secondo modulo del corso in poi.