Sådan oprettes en lommeregner med React Hooks og React Context API

Hvis du er som mig, da du første gang hørte om React Hooks, var du måske lidt ambivalent eller forvirret af, hvad al hype handlede om. Hvad er det store, hvis jeg ikke længere skal skrive klassekomponenter ud? Men når jeg først gik ind og fik brugt dem, kunne jeg ikke rigtig se mig selv vende tilbage til mine pre-Hook dage. Med de udødelige ord fra Blues Traveler: ”Krogen bringer dig tilbage. Jeg fortæller dig ikke nogen løgn. ”

I et stykke tid ledte jeg efter en vejledning om, hvordan man bruger Hooks i forbindelse med Context API. Efter kun at have fundet et par eksempler derude, der forklarede konceptet fuldt ud, besluttede jeg at gøre, hvad enhver god udvikler skulle gøre: pore over docs og bygge noget selv. At kæmpe igennem det og lære det alene er en af ​​de bedste måder at absorbere viden på. Dette er en guide til, hvordan man bygger det samme projekt, som jeg gjorde med brugen af ​​kroge og kontekst.

Oversigt

Dette projekt vil være en grundlæggende lommeregnerapp svarende til iPhone-lommeregner. Da dette kun er en simpel desktop-app, har jeg erstattet% -knappen med en tilbage-knap. Selvom jeg ikke ville bruge dette til at tage SAT'erne, kunne du helt sikkert tilføje antallet af tæer, du har på det.

Der er en fungerende version af projektet, eller du kan se hele koden på GitHub.

Projektet

Kom godt i gang

For at komme i gang skal vi bare bruge create-react-app. Du kan komme i gang ved at køre følgende:

npx create-react-app calculatorcd calculatornpm start

Filstruktur & CSS

Appens filstruktur skal se ud som følger. srcOpret følgende filer i mappen, eller lad bare App.jsog 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

Hvis du vil følge med nøjagtigt, kan du også installere Styled Components til CSS.

npm -i styled-components

Du kan derefter tilføje den stilede CSS fra dette link til Styles.jsfilen eller tilføje din egen.

Hovedappsstruktur

Den Calculator.jsfil skal setup skærmen og numerisk tastatur. Den skal indeholde alle knappetyper.

Du vil bemærke, at alle knappekomponenter er tilføjet her sammen med nummervisningen. Hver af knappens komponenter er stort set de samme. De skal alle følge den samme grundlæggende struktur. Det zero-buttonfår en separat, divda vi bruger CSS Grid til layoutet, og det skal strække sig over to kolonner. (PS - Hvis du vil vide mere om CSS Grid, lavede jeg en lille artikel om det grundlæggende.)

Du bemærker muligvis, at buttonValuerekvisitterne kun er nødvendige til NumberButtonog FunctionButtonkomponenterne. Hver af knapperne skal følge den samme grundlæggende struktur med et unikt navn. Du kan henvise til filstrukturen ovenfor for at se, hvilke knapper der er nødvendige. Knapperne skal have symbolet skrevet i knapkomponenten, hvis de ikke sendes buttonValuevia rekvisitter. Opret en af ​​disse til hver af knappetyperne i din filstruktur.

Herefter skal du have den grundlæggende struktur i en lommeregner. Vi kommer tilbage til skærmen om lidt. Nu skal vi komme ind i appens indre funktion og se, hvordan vi kan bruge vores kroge og kontekst.

Opbygning af Context API-udbyderen

Vi skal nu oprette NumberProvider.js. Dette er hjertet i din app, og hvor vores funktioner skal bo. Hvis du aldrig har brugt React Context API, er det et godt værktøj til at hjælpe med at overføre data fra en komponent til en anden.

Tænk på, hvornår du har komponenter, der er indlejret i hinanden. Tidligere ville du være nødt til at "bore prop". Dette er når du sender dataene eller fungerer som rekvisitter ned gennem indlejrede komponenter. Dette er næppe ideelt, især når du begynder at gå flere lag dybt.

Men med denne udbyderkomponent giver det dig mulighed for at videregive data til enhver indlejret komponent, uanset hvor dybt. Denne nummerudbyder indpakker vores Appkomponent. Nu når vi vil hente data eller bruge en funktion, der bor i udbyderen, er de tilgængelige globalt. Dette får os ud af at skulle "propborere" gennem indlejrede komponenter. Du opretholder den eneste sandhedskilde, der er essensen af ​​React. For at komme i gang skal du oprette udbyderen. Det skal se sådan ud:

Grundudbyderen oprettes, og enhver værdi, der overføres, er nu tilgængelig for alle indlejrede komponenter. For at gøre dette tilgængeligt skal vi pakke vores Appkomponent ind, så den er tilgængelig globalt. Vores Appvil have denne kode.

Brug af kontekstudbyderen

Nu kan vi tilføje koden til vores skærm. Vi kan vise værdien ved at videregive useContextfunktionen fra den nye React Hooks API. Vi behøver ikke længere passere i prop gennem indlejrede komponenter. Skærmen skal se ud:

Det nummer, som du har passeret tre niveauer op i, NumberProviderer umiddelbart tilgængeligt for Displaykomponenten ved at ringe useContextog videregive vores oprettede NumberContext. Din nummervisning er nu i gang, da den viser, numberhvilken vi har sat til nul.

Nu viser vores lommeregner selvfølgelig et enkelt nul. Dette er godt, hvis du tæller antallet af timers søvn, jeg får med en nyfødt søn, men ikke så god, hvis du prøver at tilføje noget andet, så lad os bruge nogle kroge til at få denne regnemaskine beregning.

Kom godt i gang med kroge

Hvis du ikke har brugt en krog før, giver det dig i det væsentlige mulighed for at slippe af med klassen syntaks og i stedet have tilstand inden for funktionelle komponenter. Her kan vi tilføje følgende til vores NumberProvider.jsfil for at skabe vores første krog.

Der er muligvis noget syntaks, du ikke har set. I stedet for at skrive vores klasse med tilstand opdeler vi hver del af staten i sin egen mindre numbervariabel. Der er også, setNumberder fungerer det samme som setStatefunktion, men nu fungerer for en bestemt variabel og kan kaldes, når det er nødvendigt. useStategiver os mulighed for at indstille en startværdi.

Vi er nu i stand til at bruge dette alt sammen i vores funktion til at videregive nummerknappens værdier til displayet. I denne app bruger lommeregneren strenge til at få input. Der er kontrol for at sikre, at du ikke kan have flere .i dit nummer, og at du ikke har en række nuller til at starte dit nummer.

Komponenter til bygningsknapper

Nu kan du kalde denne funktion ved hjælp af Context API i en hvilken som helst af de indlejrede komponenter.

Nu har du en fungerende række af nummerskaber. Du kan se, hvordan du kan begynde at indsprøjte de værdier, du har angivet i NumberProviderde andre komponenter i appen via useContextfunktionen. Stat og de funktioner, der påvirker den, findes i NumberProvider. Du skal bare ringe til den specifikke kontekst, du ønsker.

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.

  • Let at forstå syntaksen og slippe af med rodet i klassekomponenter. Ikke mere super og konstruktører. Bare et par rene variabler.
  • Lettere at indstille og bruge tilstand inden for og på tværs af komponenter. Ikke mere rodet propboring gennem flere komponenter.
  • Eliminerer behovet for Redux i små projekter, hvor du ikke behøver at holde for meget i kompleks tilstand. Du vil sandsynligvis ikke genskabe Facebook med det, men det vil gøre jobbet i små apps.

Lad mig vide dine tanker, eller hvis der er problemer, du støder på i koden. Forhåbentlig skinnede dette lidt lys på noget, som du måske ikke har været fortrolig med før. React Hooks and Context er gode måder at forenkle dine React-apps og skrive renere kode.

Se mere af mit arbejde og andre projekter på //theran.co.