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