de Kelvin Mai

Cum am construit aplicația meteo în Routech folosind React și Typescript

Cum am construit aplicatia meteo in Routech folosind React si
React și dactilografiat

Așa că am decis în cele din urmă să mă întorc la Routech și să încerc să termin certificatul meu de dezvoltare front-end. Am terminat deja toți algoritmii și tutorialele la începutul anului trecut, iar singurul lucru care lipsea erau proiectele.

Dar acum că am mai multă experiență ca dezvoltator Full Stack, majoritatea proiectelor sunt puțin ușoare pentru nivelul meu actual. Așa că am avut două opțiuni. Aș putea să mă întorc la elementele de bază și să le termin pe toate într-o zi, sau aș putea ucide două păsări cu o singură piatră: să mă distrez și să experimentez tehnologia în timp ce lucrez la aceste proiecte. Am optat pentru aceasta din urmă.

1612083011 800 Cum am construit aplicatia meteo in Routech folosind React si
Atât de aproape…

Dar să facem cele trei păsări – pentru că de ceva vreme îmi doresc să scriu un tutorial / ghid. Astăzi, ceea ce vom aborda este proiectul Show The Local Weather. Dar de data aceasta, va combina React și Typescript! Puteți arunca o privire asupra codului finalizat în acest document Repo GitHub, precum și o demonstrație live Aici.

fundal

Deci primul lucru este primul: de ce aș vrea să fac asta? Ei bine, iată: am sărit înainte și înapoi cu Angular 5 și React de ceva vreme. Și îmi place React mai mult ca cadru. Este mic și concis, dar are toate caracteristicile de care aveți nevoie pentru a crea o aplicație cu o singură pagină complet funcțională. În ceea ce privește Angular, este mult prea mare pentru mine să mă bucur de o aplicație la fel de mică ca aceasta … dar folosește Typescript!

TypeScript este un super set de JavaScript care adaugă o mulțime de caracteristici care lipsesc doar din JavaScript, chiar și cu îmbunătățirile de la ES6 / 7. Este cunoscut mai ales pentru tastarea statică. Așa că m-am întrebat dacă aș putea obține cele mai bune din ambele lumi. Răspunsul a fost DA răsunător! … Redux nu a fost inclus. (Adica tu poate sa include Redux, dar până acum a fost o durere să-l înființez, așa că nu o voi face pentru acest ghid.)

1612083012 915 Cum am construit aplicatia meteo in Routech folosind React si
Poveștile utilizatorilor

Pentru acest proiect, ne vom concentra pe minimul Povestirilor utilizatorilor, deoarece accentul meu este mai degrabă tehnologia decât orice alte caracteristici suplimentare. Ca atare, va fi API-ul pe care îl vom folosi pentru această aplicație Wunderround. Este perfect pentru ceea ce construim, deoarece acestea oferă temperaturi atât în ​​Fahrenheit, cât și în grade Celsius și oferă, de asemenea, icoane pentru diferitele condiții meteorologice. Acest lucru înseamnă mai puțină muncă programatică la sfârșitul nostru.

Pasul 0: configurați

Voi folosi create-react-app pentru acest proiect, cu scriptul React personalizat pentru Typescript, astfel încât să putem păstra configurația zero și ușurința de utilizare. Un articol bun despre configurarea unei aplicații React cu TypeScript a fost scris de Trey Huffine și poate fi găsit Aici.

Cu siguranță vă sugerez să vă uitați la postarea respectivă pentru mai multe configurări aprofundate. Dar, fără alte întrebări, vom rula următoarea linie în terminal.

create-react-app weather --scripts-version=react-scripts-tsnpm install --save core-decorators

Voi ajunge la decoratori puțin mai târziu. Știți doar că este o caracteristică îngrijită, pe care am fost foarte încântat să o încerc. Dar pentru a putea să-l folosim, va trebui să-l edităm tsconfig.json fișier pentru a include decoratori experimentali. Pentru a face acest lucru, trebuie doar să adăugați linia de cod îndrăzneață.

{   "compilerOptions": {// ...code hidden...    "noUnusedLocals": true,    "experimentalDecorators": true   } // ...more code hidden...}

Și de când am Mai frumoasă instalat pe mediul meu de dezvoltare, a trebuit să-l schimb tslint.json fișier deoarece scamele au intrat în conflict cu formatatorul. Dacă aveți o dezvoltare similară, vă sugerăm să ștergeți toate regulile tslint, astfel încât să nu vă lăsați configurați. Fișierul ar trebui să arate astfel după ce ați terminat.

Structura de dosare pe care o voi folosi va arăta după cum urmează. Puteți crea, șterge și muta fișiere în consecință.

weather-app/├─ .gitignore├─ node_modules/├─ public/├─ src/   └─ assets/     | - - loader.svg     | - - logo.svg   └─ components/     | - - Weather.tsx     | - - WeatherDisplay.tsx  └─ styles/     | - - App.css     | - - WeatherDisplay.css  | — — index.tsx   | — — registerServiceWorker.ts  | — — App.tsx  | — — index.css   | - - config.ts   | - - types.ts├─ package.json├─ tsconfig.json├─ tsconfig.test.json└─ tslint.json

Bine, cel mai rău s-a terminat! În cele din urmă ne-am configurat aplicația. Să ne scufundăm în cod.

Pasul 1: Styling

Vreau să scot stilul mai întâi. Nu prea sunt un designer, așa că tot ce am făcut cu adevărat a fost să refac pielea create-react-app stiluri implicite pentru a avea tema verde Routech. În plus, am făcut butonul mai asemănător cu butonul și, bineînțeles, mai verde. Ești liber să te îndrăgostești cu asta dacă ți se întâmplă să fii un maestru CSS. De asemenea, puteți descărca fișiere imagine Aici și așezați-le în assets/ pliant.

Pasul 2: Bine, am mințit … Mai multe Configurare

Dar nu vă faceți griji, este codul real de data aceasta. Mai întâi să începem cu partea ușoară: adăugarea API-ului și a cheilor API. Nimic nou aici – arată exact ca JavaScript normal până acum.

Acum, pentru chestiunea specifică TypeScript, trebuie să specificăm tipuri. Ei bine, nu trebuie, dar cu siguranță ar trebui. Motivul din spatele tastării statice este că ne oferă securitate. Spre deosebire de JavaScript normal, codul nostru nu va rula dacă lucrurile sunt de tip greșit. În esență, acest lucru înseamnă că compilatorul pur și simplu nu ne va permite să scriem un cod rău.

După cum puteți vedea, nu este prea înfricoșător. Doar adăugați tipul după două puncte. Tipurile primitive (șir, număr, boolean) sunt acceptate în afara porții. Cu obiecte, este o idee bună să creați un nou tip specific acelui obiect, așa cum se vede în WeatherData cu DisplayLocation .

Acum, am fost puțin leneș, deoarece forma datelor provenite din API-ul nostru este mult mai mare și aș fi putut crea întregul obiect. Dar am ales să iau doar ceea ce aveam nevoie și să arunc restul, motiv pentru care asta types.ts fișierul este la fel de mic pe cât este.

Pasul 3: Reacționează – partea distractivă

Voi sări peste index.tsx și App.tsx fișiere pentru că nu există cu adevărat nimic nou acolo. Trebuie doar să știți că importurile sunt diferite din cauza cât de strictă este TypeScript în ceea ce privește modulele. În schimb, vom trece mai întâi peste componenta de prezentare.

Încă prefer să distrug Component și Fragment de la React, în loc să cheme React.Component , deoarece reduce redundanța. Și pentru Fragments, dacă nu v-ați mai jucat niciodată cu ele, este practic un div care nu apare în marcajul HTML.

De asemenea, veți observa că am adăugat interfețe în partea de sus. O interfață specifică cum ar trebui să arate recuzita și starea noastră. Și dacă nu ați observat, trucul TypeScript adaugă tipuri la toate, deci asta se întâmplă mai sus în parantezele unghiulare <Props, State>. Dacă sunteți familiarizați cu tipurile de recuzită, face același lucru, dar simt că este mult mai curat.

Următorul lucru este ciudat @ simbol. Ei bine, acesta este un decorator! Am vrut inițial să conectez Redux și să mă conectez, astfel încât să pot afișa o versiune mult mai complicată, dar autobind va face deocamdată.

Un decorator este practic o funcție care înfășoară clasa și aplică atributele necesare. De asemenea, ne permite să folosim export default în partea de sus, care este doar o preferință personală a mea.

@decorateexport default Class {}
// is the same as
export default decorate(Class)

În acest caz, autobindul, după cum sugerează și numele, se va lega automat this la toate, astfel încât să nu ne facem griji cu privire la probleme obligatorii. Și venind dintr-un limbaj mai orientat pe obiecte, aceste metode de clasă vor arăta mult mai curate decât JavaScript-ul cu funcțiile săgeată.

classMethod = () => {   console.log('when you use arrows, you don't have to worry about   the keyword "this"');}
classMethod () {   console.log('because of javascript, you have to   worry about the keyword "this" here');}

Și acum, în cele din urmă, trecem la cea mai mare parte a logicii noastre, care va trăi în Weather.tsx componentă.

Primul lucru pe care îl veți observa este ? în interfață. Am menționat că cu siguranță ar trebui să definim tipurile de recuzită, dar ce se întâmplă când știi sigur că nu va fi definit decât după apelul API? Ei bine, putem defini tipurile opționale cu un semn de întrebare.

Ceea ce se întâmplă în fundal este că variabila weatherData este permis doar să fie un WeatherData tip sau nedefinit. De asemenea, amintiți-vă că WeatherData tipul este doar o subsecțiune din ceea ce oferă wunderground. Mai devreme am menționat că vom lua doar datele de care aveam nevoie din API – ei bine, asta face acea uriașă destructurare de pe linia 55.

Am menționat că puteți specifica tipurile de funcții de returnare așteptate? Cu asta se întâmplă aici getCurrentPosition , pentru că am vrut să mă asigur că îmi returnează o promisiune.

Raționamentul aici este că nu am vrut să sun getCurrentWeather până după ce am avut geolocalizarea corectă, ceea ce înseamnă că avem de-a face cu evenimente asincrone. Async înseamnă întotdeauna Promisiuni, deci asta se va întâmpla.

Un avertisment: API-ul de localizare geografică nativă necesită mult timp pentru a obține un rezultat fără a trece la nicio opțiune. Am ales să nu-i adaug opțiuni, deoarece îmi dădea erori în acel moment.

Și cred că toate lucrurile noi se întâmplă în această aplicație datorită TypeScript. Orice altceva ar trebui să fie familiar dacă știi React. Dar sperăm că puteți vedea avantajele acestui superset, deoarece adaugă atât securitate codului nostru, cât și câteva super puteri frumoase.

Pasul 4: Finalizați!

1612083012 548 Cum am construit aplicatia meteo in Routech folosind React si
Produsul finit

Tu ai făcut-o! Ați terminat o aplicație care arată vremea în poziția dvs. actuală. Și, făcând acest lucru, ați acoperit o bucată bună de TypeScript și l-ați încorporat în React.

Desigur, pot exista cu siguranță îmbunătățiri în acest sens, cum ar fi o opțiune de căutare și afișare a altor locații. Și cu siguranță se poate lucra la interfața de utilizare. Dar dacă nu ați terminat deja aplicația meteo pe Routech, ați trecut deja dincolo de această sarcină.