Kako izraditi kalkulator pomoću React Hooks i React Context API-ja

Programiranje

Ako ste poput mene, kad ste prvi put čuli za React Hooks, možda ste bili pomalo dvosmisleni ili zbunjeni onim o čemu se radi. Što je velika stvar ako više ne moram ispisivati ​​komponente klase? Međutim, kad sam jednom ušao i počeo ih koristiti, nisam mogao vidjeti kako se vraćam u svoje dane prije Hook-a. Besmrtnim riječima Blues Travelera, „Kuka te vraća natrag. Ne kažem vam da ne lažete. "

Neko sam vrijeme tražio vodič o tome kako koristiti udice u vezi s kontekstualnim API-jem. Nakon što sam pronašao samo nekoliko primjera koji su u potpunosti objasnili koncept, odlučio sam učiniti ono što bi svaki dobar programer trebao učiniti: razmotriti dokumente i izgraditi nešto sam. Boriti se kroz to i samostalno ga učiti jedan je od najboljih načina apsorbiranja znanja. Ovo je vodič za izgradnju istog projekta koji sam i ja radio uz upotrebu udica i konteksta.

Pregled

Ovaj će projekt biti osnovna aplikacija za kalkulator slično iPhone kalkulatoru. Budući da je ovo samo jednostavna stolna aplikacija, gumb% zamijenio sam gumbom za povratak. Iako ovo ne bih koristio za uzimanje SAT-ova, definitivno biste mogli zbrojiti broj nožnih prstiju na sebi.

Postoji radna implementirana verzija projekta ili možete pogledati sav kôd na GitHubu.

Projekt

Početak rada

Za početak ćemo samo koristiti create-react-app. Možete započeti izvođenjem sljedećeg:

npx create-react-app calculatorcd calculatornpm start

Struktura datoteke i CSS

Struktura datoteke aplikacije trebala bi izgledati ovako. U srcmapi izradite sljedeće datoteke ili jednostavno ostavite App.jsi index.js.

src├── App.js├── index.js└── components ├── BackButton.js ├── Calculator.js ├── ClearButton.js ├── Display.js ├── EqualButton.js ├── FunctionButton.js ├── NegativeButton.js ├── NumberButton.js ├── NumberProvider.js └── styles └── Styles.js

Ako želite točno pratiti, također možete instalirati Stilizirane komponente za CSS.

npm -i styled-components

Zatim u Styles.jsdatoteku možete dodati Stilizirani CSS s ove veze ili dodati svoj.

Glavna struktura aplikacije

Calculator.jsDatoteka trebala postavljanje prikaza i broj jastuk. Trebao bi sadržavati sve vrste gumba.

Primijetit ćete da su ovdje dodane sve komponente gumba zajedno s prikazom broja. Svaka od komponenata gumba u osnovi je ista. Svi bi trebali slijediti istu osnovnu strukturu. zero-buttonDobiva poseban divjer smo pomoću CSS Grid za izgled i to treba da obuhvati dva stupca. (PS - Ako želite znati više o CSS Gridu, napravio sam mali članak o osnovama.)

Vi svibanj primijetiti da su buttonValuerekviziti potrebni samo za NumberButtonte FunctionButtonkomponente. Svaki od gumba trebao bi slijediti istu osnovnu strukturu s jedinstvenim imenom. Možete pogledati strukturu datoteke gore kako biste vidjeli koji su gumbi potrebni. Gumbi bi trebali imati napisan simbol u komponenti gumba ako nisu proslijeđeni buttonValueputem propusta. Stvorite jedan od njih za svaku vrstu gumba u vašoj datotečnoj strukturi.

Nakon toga trebali biste dobiti osnovnu strukturu kalkulatora. Vratit ćemo se na zaslon za malo. Sada ćemo ući u unutarnji rad aplikacije i vidjeti kako možemo koristiti naše udice i kontekst.

Izgradnja pružatelja kontekstualnog API-ja

Sada ćemo stvoriti NumberProvider.js. Ovo je srce vaše aplikacije i tamo će živjeti naše funkcije. Ako nikada niste koristili React Context API, sjajan je alat za pomoć u prenošenju podataka s jedne komponente na drugu.

Sjetite se kada imate komponente ugniježđene jedna u drugu. U prošlosti biste morali "podupirati bušilicu". To je slučaj kada podatke ili funkciju prenosite kao rekvizite prema dolje kroz ugniježđene komponente. To teško da je idealno, pogotovo kad počnete ulaziti nekoliko slojeva duboko.

Međutim, s ovom komponentom pružatelja usluga omogućuje vam prosljeđivanje podataka bilo kojoj ugniježđenoj komponenti, bez obzira na dubinu. Ovaj će pružatelj brojeva umotati našu Appkomponentu. Sad kad god želimo dobiti podatke ili upotrijebiti funkciju koja živi u davatelju usluga, oni su globalno dostupni. To nas izbavlja iz potrebe za "podupiranjem bušenja" kroz ugniježđene komponente. Vi održavate jedini izvor istine koji je suština React-a. Za početak morate stvoriti davatelja usluga. To bi trebalo izgledati ovako:

Izrađen je osnovni davatelj i svaka proslijeđena vrijednost sada je dostupna svim ugniježđenim komponentama. Da bismo to učinili dostupnim, omotat ćemo našu Appkomponentu tako da bude globalno dostupna. Naš Appće imati ovaj kod.

Korištenje pružatelja konteksta

Sada možemo dodati kod za naš prikaz. Vrijednost možemo prikazati predavanjem useContextfunkcije iz novog API-ja React Hooks. Više ne moramo prolaziti kroz oslonac kroz ugniježđene komponente. Zaslon bi trebao izgledati ovako:

Broj koji ste prešli tri razine u, komponenti NumberProviderje odmah dostupan Displaypozivom useContexti prosljeđivanjem našeg stvorenog NumberContext. Prikaz vašeg broja sada je pokrenut i radi jer prikazuje numberkoji smo postavili na nulu.

Sada, naravno, naš kalkulator pokazuje jednu nulu. Ovo je sjajno ako računate koliko sati sna imam s novorođenim sinom, ali ne baš sjajno ako pokušavam dodati nešto drugo, pa iskoristimo neke kuke da izračunamo ovaj kalkulator.

Početak rada s kukama

Ako prije niste koristili udicu, u osnovi vam omogućuje da se riješite sintakse klase i umjesto toga imate stanje unutar funkcionalnih komponenti. Ovdje možemo dodati sljedeće u našu NumberProvider.jsdatoteku kako bismo stvorili prvu udicu.

Možda postoji neka sintaksa koju niste vidjeli. Umjesto da klasu ispisujemo sa stanjem, mi svaki dio države razbijamo u svoju manju numbervarijablu. Postoji i ona setNumberkoja djeluje isto kao setStatefunkcija, ali sada radi za određenu varijablu i može se pozvati kada je to potrebno. useStateomogućuje nam postavljanje početne vrijednosti.

Sada sve ovo možemo koristiti u našoj funkciji za prosljeđivanje vrijednosti brojčanih gumba na zaslon. U ovoj aplikaciji kalkulator koristi nizove za dobivanje podataka. Postoje provjere da ne biste mogli imati višestruki .broj i da nemate niz nula za pokretanje vašeg broja.

Komponente gumba za izgradnju

Sada ovu funkciju možete pozvati pomoću API-ja konteksta u bilo kojoj ugniježđenoj komponenti.

Sada imate radni alat za izradu niza brojeva. Možete vidjeti kako možete započeti ubrizgavanje vrijednosti koje ste postavili u NumberProvideru druge komponente aplikacije putem useContextfunkcije. Država i funkcije koje na nju utječu vrše se u NumberProvider. Jednostavno morate nazvati u određenom kontekstu koji želite.

Možete početi vidjeti kako bi to bilo sjajno kad počnete dodavati veću složenost svojoj aplikaciji. Recimo da želite da korisnička komponenta provjeri jeste li prijavljeni da biste koristili posebne značajke. Možete stvoriti zasebnog davatelja usluga koji sadrži korisničke podatke i čini ih dostupnima bilo koju ugniježđenu komponentu.

Možemo nastaviti dodavati funkcije u naš kalkulator i prosljeđivati ​​ih odgovarajućoj komponenti kroz useContextugrađenu funkciju.

Dovršene funkcije davatelja

Dovršeno NumberProviderse nalazi u nastavku i sadrži sljedeće funkcije koje se koriste s kukama.

  • handleSetDisplayValuepostavlja vrijednost koju upisujete na zaslon. Provjeravamo postoji li u brojevnom nizu samo jedna decimala i ograničavamo duljinu broja na 8 znakova. Zamislite ovo više kao kalkulator napojnica nego za provjeru računa. Zauzima buttonValuevlasništvo u NumberButton.js.
  • handleSetStoredValueuzima naš prikazni niz i sprema ga tako da možemo unijeti drugi broj. To je naša pohranjena vrijednost. Koristit će se kao pomoćna funkcija.
  • handleClearValuevraća sve na 0. To je vaša jasna funkcija. Prijeći će na ClearButton.js.
  • handleBackButtonomogućuje vam brisanje prethodno unesenih znakova jedan po jedan dok se ne vratite na 0. Ovo pripada BackButton.jsdatoteci.
  • handleSetCalcFunctiontu dobivate svoju matematičku funkciju. Postavlja ako zbrajate, oduzimate, dijelite ili množite. Prenosi se u FunctionButton.jsdatoteku i preuzima buttonValuesvojstvo.
  • handleToggleNegativečini baš kao što naziv govori. Omogućuje vam to bilo za prikaznu vrijednost ili za pohranjenu vrijednost nakon izračuna. Ovo naravno ulazi NegativeButton.js.
  • doMathradi matematiku. Konačno. Budući da je ovo samo jednostavan kalkulator s četiri funkcije, on koristi samo jednostavnu funkciju prekidača, ovisno o functionTypeonome što imamo u stanju. Koristimo parseIntjer svoj broj predajemo kao nizove. Također zaokružujemo na samo tri decimale kako bismo bili sigurni da nemamo ludo duge brojeve.

Gotov zaslon

You will also need a display. In this case it will show the number and the storedNumber along with your functionType. There are a few check such as showing a 0 when you have an empty string as a number.

For brevity sake I am not going to include all of the button functions since they are pretty much the same as the NumberButton.js file above. Just be sure that you pass in a buttonValue prop when necessary, and that you are passing in the correct function from the above list.

See All the Code

If you would like to see the entire code for this project it can be found over in:

GitHub Repo

Calc-U-Later Deploy

Conclusion

I hope that this clears up a bit about how React Hooks and the Context API can be used together. Using these built in React features offers several benefits.

  • Simple to understand syntax and gets rid of the clutter of class components. No more super and constructors. Just a few clean variables.
  • Easier to set and use state within and across components. No more messy prop drilling through multiple component.
  • Eliminates need for Redux in small projects, where you don’t need to hold too much in complex state. You probably aren’t going to re-create Facebook with it, but it will do the job on small-scale apps.

Please let me know your thoughts or if there are any issues that you come across in the code. Hopefully this shone a bit of light onto something that you may not have been familiar with before. React Hooks and Context are great ways to simplify your React apps and write cleaner code.

Check out more of my work and other projects at //theran.co.