Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Giu 25
React, TypeScript e Redux

React, TypeScript e Redux: Come creare una web app

  • 25/06/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • enzyme, javascript, jest, react, reactjs, redux, typescript, web app

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:

Development Category (English)728x90

  • ReactJS: Come creare una web app da zero

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.

Deep Learning Specialization on Coursera

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:

  • Learning React: Functional Web Development with React and Redux

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!).

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux25/06/2018
  • ReactJS: Come testare i componenti React con Enzyme e Jest12/12/2017

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku