React Native template (2)

Il precedente progetto è stato ottenuto con questo comando¹ :

$ nvm use node
$ npx react-native init progetto3

Questo comando ci ha permesso di ottenere velocemente la struttura di un’applicazione da cui partire. Esistono però anche altri template, ovvero boilerplate solution.

Per esempio, nel prossimo comando si vedrà un template in TypeScript e che occupa quasi 400 MB. Il comando va scritto tutto sulla stessa riga (oppure usando il back slash \ sul terminale si può andare anche a capo per motivi di spazio)

$ nvm use node
$ npx react-native init progetto4ts \ 
--template react-native-template-typescript
# richiede connessione alla rete Internet

Analizzando il contenuto della cartella progetto4ts appena creata, si possono osservare delle differenze rispetto al progetto3

.
+ ── android
+ ── ios
+ ── node_modules
├─── App.tsx
├─── index.js
├─── package.json
└─── tsconfig.json

le differenze sono state evidenziate in rosso, e sono:

• App.tsx
• tsconfig.json

Si prende solo un frammento del codice sorgente di App.tsx

const Section: React.FC<PropsWithChildren<{title:string;}> > =({children,title}) => {
}

Si osservano due particolari novità rispetto al “puro” linguaggio JavaScript:

• la presenza delle parentesi angolari (< e >) per avere dei metodi di tipo generic
• la presenza dei due punti : per specificare il tipo di dato string

Avvicinarsi al framework di JavaScript e React Native è già abbastanza complicato, quindi per il momento è meglio rimandare lo studio di TypeScript (il più possibile)

È comunque importante imparare a riconoscere TypeScript quando lo incontriamo, ad esempio, in una libreria.

È importante esercitarsi a compilare con gradle anche questo template (dimostrativo) usando i soliti comandi descritti negli articoli precedenti²

1. https://www.cancellino.org/2023/01/react-native-template-1/ [↩]
2. https://www.cancellino.org/2023/01/react-native-con-android-2 [↩]