React Hooksi ja React Context API abil kalkulaatori koostamine

Kui olete sarnane minuga, olite React Hooksist esimest korda kuuldes võib-olla veidi ambivalentsed või segaduses sellest, mida kogu hoog endast kujutas. Mis on suur probleem, kui ma ei pea enam klassi komponente välja kirjutama? Kuid kui ma sinna sisse jõudsin ja nende kasutamiseni jõudsin, ei näinud ma tegelikult oma konksueelsetesse aegadesse tagasi minemist. Blues Travelleri surematute sõnadega: „Konks toob sind tagasi. Ma ei ütle sulle, et sa ei valeta. "

Mõnda aega otsisin juhendit selle kohta, kuidas Hooksi kasutada seoses Context API-ga. Kui leidsin vaid mõned näited, mis selle mõiste täielikult selgitasid, otsustasin teha seda, mida iga hea arendaja peaks tegema: uurima dokumente ja ehitama ise midagi. Selle võitlemine ja iseseisev õppimine on üks parimaid viise teadmiste omastamiseks. See on juhend, kuidas koostada sama projekti, mille tegin konksude ja konteksti kasutamisega.

Ülevaade

See projekt saab olema iPhone'i kalkulaatoriga sarnane põhikalkulaatori rakendus. Kuna see on lihtsalt lihtne töölauarakendus, olen% nupu asendanud tagasi nupuga. Kuigi ma ei kasutaks seda SAT-de võtmiseks, võiksite kindlasti kokku liita sellel olevate varvaste arvu.

Projektil on toimiv juurutatud versioon või saate kogu koodi vaadata GitHubis.

Projekt

Alustamine

Alustamiseks me lihtsalt kasutame create-react-app. Alustamiseks võite käivitada järgmise:

npx create-react-app calculatorcd calculatornpm start

Failistruktuur ja CSS

Rakenduse failistruktuur peaks välja nägema järgmine. Kui srckausta luua järgmised failid või lihtsalt lahkuda App.jsja 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

Kui soovite täpselt jälgida, võite ka CSS-i jaoks installida stiilsed komponendid.

npm -i styled-components

Seejärel saate sellelt lingilt Styles.jsfaili lisada Styled CSS-i või lisada oma.

Rakenduse peamine struktuur

Calculator.jsFail peaks setup ekraan ja number pad. See peaks sisaldama kõiki nuputüüpe.

Märkate, et siia lisatakse kõik nupu komponendid koos numbrinäiduga. Kõik nupu komponendid on sisuliselt ühesugused. Need kõik peaksid järgima sama põhistruktuuri. Selle zero-buttonsaab eraldi, divkuna kasutame paigutuse jaoks CSS Gridi ja see peab ulatuma kahte veergu. (PS - kui soovite CSS Gridi kohta rohkem teada saada, tegin väikese artikli põhitõdedest.)

Võite märgata, et buttonValuerekvisiite on vaja ainult komponentide NumberButtonja FunctionButtonkomponentide jaoks. Kõik nupud peaksid järgima sama põhistruktuuri unikaalse nimega. Vajalikest nuppudest leiate ülaltoodud failistruktuuri. Nuppudel peaks olema nupu komponendis kirjas sümbol, kui neile ei anta buttonValueläbi rekvisiite. Looge üks neist oma failistruktuuri kõigi nuputüüpide jaoks.

Pärast seda peaks teil olema kalkulaatori põhistruktuur. Näitamise juurde naaseme veidi. Nüüd läheme rakenduse sisemisse töösse ja vaatame, kuidas saaksime oma konksusid ja konteksti kasutada.

Kontekst-API pakkuja loomine

Nüüd loome NumberProvider.js. See on teie rakenduse keskmes ja kus hakkavad toimima meie funktsioonid. Kui te pole kunagi React Context API-d kasutanud, on see suurepärane vahend andmete edastamiseks ühest komponendist teise.

Mõelge, kui teil on komponente, mis on üksteise sisse pesitsetud. Varem oleksite pidanud „puurima”. See on siis, kui edastate andmed või funktsiooni pesadena sisse viidud komponentidena. See on vaevalt ideaalne, eriti kui hakkate minema mitu kihti sügavale.

Kuid selle pakkuja komponendi abil saate andmeid edastada mis tahes pesastatud komponendile, olenemata sellest, kui sügav. See numbripakkuja murrab meie Appkomponendi kokku. Nüüd, kui tahame hankida andmeid või kasutada teenusepakkujas elavat funktsiooni, on need ülemaailmselt saadaval. See viib meid välja pesakomponentide kaudu "puurimistoimingutest". Teil on ainus tõe allikas, mis on Reacti põhiolemus. Alustamiseks peate looma teenusepakkuja. See peaks välja nägema järgmine:

Põhiteenuse pakkuja on loodud ja kõik sisestatud väärtused on nüüd kõigile pesastatud komponentidele saadaval. Selle kättesaadavaks tegemiseks pakime oma Appkomponendi nii, et see oleks ülemaailmselt saadaval. Meie Appon see kood.

Kontekstipakkuja kasutamine

Nüüd saame lisada oma kuvakoodi. Saame väärtust kuvada, sisestades useContextfunktsiooni uuest React Hooks API-st. Me ei pea enam toestama läbi pesastatud komponentide. Ekraan peaks välja nägema:

Number, mille läbisite kolm taset ülespoole, NumberProvideron Displaykomponendile kohe kättesaadav helistades useContextja meie loodud mööda NumberContext. Teie numbrinäit on nüüd valmis ja töötab, kuna see näitab, numbermille oleme nullinud.

Nüüd näitab meie kalkulaator muidugi ühte nulli. See on suurepärane, kui loendate vastsündinud pojaga saadud unetundide arvu, kuid mitte nii suurt, kui proovin lisada midagi muud, nii et kasutame mõnda konksu, et see kalkulaator arvutaks.

Konksudega alustamine

Kui te pole varem konksu kasutanud, võimaldab see teil sisuliselt vabaneda klassi süntaksist ja selle asemel on funktsionaalsetes komponentides olek. Siit saame oma NumberProvider.jsfaili lisada järgmise konksu loomiseks järgmise.

Võib esineda süntaksit, mida te pole näinud. Selle asemel, et oma klassi olekuga välja kirjutada, jagame oleku iga osa oma väiksemaks numbermuutujaks. Samuti on olemas funktsioon, setNumbermis toimib samamoodi nagu setStatefunktsioon, kuid töötab nüüd konkreetse muutuja puhul ja seda saab vajadusel kutsuda. useStatevõimaldab meil määrata algväärtuse.

Nüüd saame seda kõike kasutada oma funktsioonis numbrinupu väärtuste kuvamiseks edastamiseks. Selles rakenduses kasutab kalkulaator sisendi saamiseks stringe. Kontrollitakse, .kas teie arvus ei saa olla mitu ja kas teie numbri alustamiseks pole nullide rida.

Nupukomponentide ehitamine

Nüüd saate seda funktsiooni kutsuda mis tahes pesastatud komponendi konteksti API abil.

Nüüd on teil töötav numbrinumbri tegija. Näete, kuidas saate funktsiooni kaudu sisestada NumberProviderrakenduses muudesse komponentidesse sisestatud väärtusi useContext. Riik ja seda mõjutavad funktsioonid täidavad Euroopa NumberProvider. Peate lihtsalt helistama konkreetses kontekstis, mida soovite.

You can start to see how this would be great as you start to add more complexity to your app. Say you want a user component to check that you are logged in to use special features. You can create a separate provider that holds the user data and makes that available any nested component.

We can continue to add in functions to our calculator and pass them to the proper component through the useContext function that is built in.

Completed Provider Functions

The completed NumberProvider is found below and contains the following functions that are used with hooks.

  • handleSetDisplayValue sets the value that you are typing into the display. We are checking that it there is only one decimal in the number string and we are limiting the number length to 8 characters. Think of this as more a tip calculator than one to get you through your calculus exam. It takes in the buttonValue property in NumberButton.js .
  • handleSetStoredValue takes our display string and stores it so that we can enter another number. This is our stored value. It will be used as a helper function.
  • handleClearValue resets everything back to 0. This is your clear function. It will get passed to ClearButton.js.
  • handleBackButton allows you to delete your previously entered characters one at a time until you get back to 0. This belongs in the BackButton.js file.
  • handleSetCalcFunction is where you get your math function. It sets if you are adding, subtracting, dividing, or multiplying. It gets passed into the FunctionButton.js file and takes in the buttonValue property.
  • handleToggleNegative does just as the name implies. It allows you do so for either the display value or a stored value after a calculation. This of course goes in NegativeButton.js.
  • doMath does the Math. Finally. Since this is only a simple four function calculator it is just using simple switch function depending upon the functionType that we have in state. We are using parseInt since we are passing our number in as strings. Also we are rounding to only three decimal places, to make sure that we do not have crazy long numbers.

The Finished Display

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.

  • Lihtne mõista süntaksit ja vabaneb klassi komponentide segadusest. Enam pole super- ja konstruktoreid. Ainult mõned puhtad muutujad.
  • Oleku seadmine ja kasutamine komponentide sees ja nende vahel on lihtsam. Enam pole vaja segadusteta puurimist läbi mitme komponendi.
  • Kõrvaldab vajaduse Reduxi järele väikestes projektides, kus te ei pea keerulises olekus liiga palju hoidma. Tõenäoliselt ei kavatse te sellega Facebooki uuesti luua, kuid see saab väikesemahulistes rakendustes selle töö ära.

Palun andke mulle teada oma mõtetest või kui teil on koodis mingeid probleeme. Loodetavasti paistis see natuke valgust millelegi, mida te pole võib-olla varem tundnud. Reageerimise konksud ja kontekst on suurepärased viisid oma rakenduste React lihtsustamiseks ja puhtama koodi kirjutamiseks.

Vaadake rohkem minu töid ja muid projekte aadressil //theran.co.