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
configurazione di TypeScript, TSLint e installazione di Redux

React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux

  • 25/06/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • enzyme, react, reactjs, redux, tslint, typescript

Dopo aver creato il progetto seguendo la guida React, TypeScript e Redux: Come creare una web app proseguiamo con la configurazione di TypeScript, TSLint e installazione di Redux. Installeremo tutto ciò che ci serve per fare i test, Redux per gestire lo state globale dell’applicazione ed infine metteremo mano ad alcuni file di configurazione.

React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux

Per prima cosa è necessario che ti posizioni con il terminale all’interno della cartella del tuo progetto.

Enzyme

Procediamo con l’installazione di enzyme, dei suoi @types (necessari perché usiamo TypeScript) e di react-addons-test-utils. Scrivi quindi nel terminale:

yarn add enzyme @types/enzyme react-addons-test-utils --dev

Dunque, sempre da terminale, digita:

yarn add enzyme-adapter-react-16 @types/enzyme-adapter-react-16 --dev

Nota bene: i pacchetti @types non fanno altro che fornirci dei file con estensione .d.ts. Sono file dichiarativi che aiutano TypeScript a capire come può utilizzare Enzyme (che contiene codice JavaScript).

Redux

Per utilizzare Redux abbiamo bisogno invece di digitare da terminale:

Development Category (English)728x90

yarn add redux react-redux @types/react-redux

Configurazione

Ora procediamo con la configurazione del nostro progetto.

I file che ci interessano si trovano nella root del progetto. Il primo è la configurazione di TypeScript e si chiama tsconfig.json il quale al suo interno contiene:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Assicurati che sia identico così da non avere una situazione differente e così da poter seguire la guida senza problemi. Come vedi è presente un file tra gli “exclude” che si trova in src e si chiama setupTests.ts.

Deep Learning Specialization on Coursera

Crea un file in src chiamandolo quindi setupTests.ts, se non esiste già, ed al suo interno scrivi:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

Questo file verrà eseguito sempre prima di tutti gli altri tests ed esegue la configurazione di Enzyme.

Infine apri il file nella root del progetto che si chiama tslint.json. Assicurati che contenga questa configurazione:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  },
  "rules": {
     "interface-name":[false], //interface starting with I (i maiusc) is not mandatory
     "member-access": [true, "no-public"], // render, componentDidMount, ecc. are public by default without specify it,
     "no-console": false,
     "ordered-imports": [true, {//necessary for import order. we don't need it
      "import-sources-order": "any",
      "named-imports-order": "any"
    }],
    "object-literal-sort-keys": false
  }
}

Quello che ci interessa e che potresti avere diverso è “rules”, ovvero le regole che vogliamo dare al linter.  Vediamo in ordine le regole impostate:

  • interface-name – se impostato a true è necessario che tutte le interfacce comincino con la lettera “i” maiuscola
  • member-access – determina se dobbiamo specificare private, protected e public. Visto che non vogliamo scrivere public su ogni singola funzione che di default è pubblica impostiamo questa regola con valore “no-public” (maggiori informazioni quì)
  • no-console – è impostato a false perché vogliamo usare liberamente la console
  • ordered-imports – specifichiamo che non siamo interessati ad avere gli import in ordine (personalmente preferisco suddividerli per area: components, services, utils, ecc.)
  • object-literal-sort-keys – impostiamo questo valore a false così che i nostri oggetti possano avere le proprietà nell’ordine che preferiscono

React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux

Bene ora siamo quasi pronti per creare qualcosa di fantastico! Nei prossimi articoli, raccolti nello step principale della guida, vedremo di impostare il routing della web app e creeremo i nostri primi componenti.

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: Come creare una web app25/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