Il precedente progetto è stato ottenuto con questo comando1 :
$ 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 precedenti2