In questo articolo voglio farti vedere come costruire una web app con React, TypeScript e Redux. Vedremo insieme cosa sono React, Typescript e Redux e avrai la possibilità con il tempo di avere una raccolta di articoli che andranno a farti da guida per creare il tuo primo progetto con queste caratteristiche.
React Typescript Redux: Imparare a costruire una web app
Non mi soffermerò nel raccontarti quale sia la differenza tra sito web e web app, sta di fatto che l’interazione dell’utente per me è un punto focale nella realizzazione di questa tipologia di software. Chiamerò quindi ciò che andiamo a costruire web app.
In questa guida ti aiuterò nella creazione di un progetto che avrà le seguenti caratteristiche:
- Utilizzo di ReactJS
- Utilizzo di TypeScript
- Impiego di Redux
- Utilizzo di react-router-dom per il routing della web app
- Utilizzo di Jest per i test
- Introduzione di Enzyme per i test
Articoli della guida
Prima di proseguire con qualche spiegazione e qualche link utile ti segnalo che quì vengono riportati i link che ti guideranno verso la creazione della tua prima web app React, TypeScript e Redux:
- React, TypeScript e Redux: Come creare una web app
- React, TypeScript e Redux: Configurazione di TypeScript, TSLint e installazione di Redux ed Enzyme
- React, TypeScript e Redux: Creazione delle prime pagine (parte 1)
Cos’è ReactJS?
ReactJS è una libreria JavaScript che ti permette di creare siti web e web app rapide. Viene utilizzato per creare single page application e può essere renderizzato lato client e/o lato server.
Per comprendere al meglio quanto stiamo dicendo ti consiglio di seguire la guida:
Senza le basi di React infatti ti sarà difficile seguire questa guida su React, TypeScript e Redux.
Cos’è TypeScript?
TypeScript è un superset di JavaScript (minimo ECMAScript 3) e viene compilato in JavaScript. Favorisce il refactoring del codice e ti permette di avere un codice molto pulito con un ottimo controllo dei tipi.
E’ totalmente configurabile e ti permette di definire interfacce, generics, decorators e molto altro. In web app di grandi dimensioni permette ai componenti di un team di avere maggiore chiarezza sul codice e di avere un approccio allo sviluppo maggiormente condiviso.
TypeScript è consigliabile per progetti di grandi dimensioni ai quali lavora più di una persona ed è molto indicato a team di programmatori abituati a linguaggi fortemente tipizzati. TypeScript può essere inoltre più veloce: se nel tuo codice è pieno di check dei tipi puoi eliminarli e lasciar fare tutto a TypeScript così da eliminare i colli di bottiglia durante il runtime.
Per maggiori informazioni vai direttamente sul sito ufficiale di TypeScript a questo indirizzo.
Cos’è Redux?
Redux è una libreria JavaScript che può essere utilizzata da una qualunque web app JavaScript. Ha raggiunto la sua fama grazie a ReactJS ed al suo impiego con questa libreria, ma in realtà può essere utilizzata anche con web app Angular e web app di altro genere.
Redux, libreria per la quale puoi leggere maggiori informazioni a questo indirizzo, è stata creata da Dan Abramov con lo scopo di far gestire lo stato di una web app React in un unico posto. Grazie a Redux infatti è molto più facile gestire tutte quelle informazioni che sono importanti per il funzionamento della web app e che rappresentano uno stato globale dell’applicazione. Un esempio è l’utente che ha effettuato il login con tutti i suoi dati e le informazioni che devono essere sempre disponibili all’interno dell’app (scopri quì quali sono alcune domande che ti devi porre per capire cosa deve essere inserito in uno store Redux).
Dan Abramov, con Redux, ha voluto aiutare anche molti altri sviluppatori nel suddividere la web application in Presentational e Container Components, di cui puoi avere maggiori informazioni direttamente a questo indirizzo.
Vedremo nei prossimi articoli un dettaglio maggiore sul funzionamento di Redux aiutandoci con un po’ di pratica.
Cos’è React-Router-Dom?
Prima di scoprire React, TypeScript e Redux per creare una web app è necessario che conosci almeno le basi di react-router-dom che utilizzeremo in questa guida. Ti rimando direttamente ad un passo della guida su ReactJS che si intitola: ReactJS: Come fare routing tra più pagine.
Cos’è Jest e cos’è Enzyme?
Anche in questo caso ti rimando direttamente alla guida: ReactJS: Come testare i componenti React con Enzyme e Jest. Durante la creazione di questa web app vedrai dei test anche più interessanti.
Creazione del progetto
Essendo questa una guida rivolta all’utilizzo di React, TypeScript e Redux non ci soffermeremo troppo sulla configurazione di base del progetto che è spesso un’attività anche un po’ noiosa.
Per partire quindi ci affideremo al progetto TypeScript React Starter che contiene sin da subito React, TypeScript, Redux, Enzyme, Jest e TSLint. TSLint è un tool che ti aiuta a mantenere un codice ben pulito e leggibile utilizzando le convezioni maggiormente utilizzate nelle aziende. TSLint ti segnalerà errori presenti nel codice, così come variabili ed import non utilizzati o formattazioni errate. TSLint è totalmente configurabile.
Installare create-react-app
Se hai già seguito l’altra guida hai già installato create-react-app. Altrimenti apri il terminale e digita:
npm install -g create-react-app
Create-react-app fornisce un progetto ReactJS di partenza.
Crea il tuo progetto
A questo punto è necessario creare il progetto. Posizionati con il terminale all’interno del tuo workspace e digita:
create-react-app my-app --scripts-version=react-scripts-ts
Stai dicendo a create-react-app di creare un progetto di nome “my-app” che utilizzi react-scripts-ts. Scegli il nome che preferisci nel caso in cui “my-app” non ti piaccia.
React-scripts-ts sono una raccolta di scripts necessari per poter utilizzare TypeScript insieme a ReactJS. In questo modo il nostro progetto creato con create-react-app non è solo un progetto React, ma è anche un progetto TypeScript.
Yarn o NPM
Bene a questo punto procediamo con l’installazione delle dipendenze.
Sia Yarn che NPM servono per installare dipendenze. Yarn nasce dall’obiettivo di avere maggiore velocità (utilizza la cache) e di evitare, al contrario di NPM, l’esecuzione di codice (che potrebbe essere malevolo) durante l’installazione di una dipendenza (maggiori dettagli a questo indirizzo).
Visto che nella scorsa guida su ReactJS abbiamo utilizzato NPM, questa volta utilizziamo Yarn.
Dunque da terminale entra nella cartella relativa al tuo progetto:
cd my-app
A questo punto è necessario installare le dipendenze contenute all’interno del file package.json. Da terminale digita:
yarn
Attendi che tutte le dipendenze siano state installate (vedrai quindi comparire nel tuo progetto la cartella “node_modules”.
Fai partire il progetto
Ultimo passo della guida su React, TypeScript e Redux è quello di far partire il progetto. Nei prossimi articoli partiremo da quì.
Da terminale digita:
yarn start
Il tuo progetto verrà aperto nel tuo browser di default.
Per eseguire i test da adesso in avanti dovrai digitare da terminale:
yarn test
React, TypeScript e Redux
Per questo articolo è tutto. I prossimi articoli che ti guideranno nella creazione di una web app ben testata che utilizza React, TypeScript e Redux verranno tutti pubblicati in questo articolo sotto forma di lista.
Mentre attendi potrebbero esserti utili alcuni libri quali:
Ed alcuni corsi Udemy quali:
- Introduction to TypeScript Development
- Corso JavaScript – ES6, NodeJS, ReactJS in italiano (Lite)
- Modern React with Redux
- React 16 – The Complete Guide (incl. React Router 4 & Redux)
Non ti perdere anche la guida su React Native.
Se vuoi rimanere aggiornato sugli articoli del blog ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?
Per dubbi o domande non esitare a scrivermi nei commenti ?
Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).
