Hogyan készítsünk számológépet a React Hooks és a React Context API segítségével

Ha olyan vagy, mint én, amikor először hallottál a React Hooks-ról, akkor talán kissé ambivalens vagy zavart volt, hogy mi az egész hype. Mi a nagy baj, ha már nem kell kiírnom az osztályrészeket? Miután azonban belelendültem, és használatba vettem őket, nem igazán láttam, hogy visszatérek a Horog előtti napjaimra. A Blues Traveler halhatatlan szavai szerint: „A horog visszahoz. Nem mondom, hogy nem hazudsz.

Egy ideig útmutatót kerestem a Hooks használatáról a Context API-val kapcsolatban. Miután csak néhány példát találtam ott, amelyek teljesen megmagyarázták a koncepciót, úgy döntöttem, hogy megteszem, amit minden jó fejlesztőnek meg kell tennie: átpasszírozom a dokumentumokat, és magam építek valamit. A küzdelem és a saját tanulás az egyik legjobb módszer az ismeretek befogadására. Ez egy útmutató arra, hogyan lehet felépíteni ugyanazt a projektet, amelyet a Hook és a Context használatával készítettem.

Áttekintés

Ez a projekt az iPhone számológépéhez hasonló alapvető számológép-alkalmazás lesz. Mivel ez csak egy egyszerű asztali alkalmazás, a% gombot lecseréltem egy vissza gombra. Bár nem használnám ezt a SAT-ok felvételére, mindenképpen összeadhatja a rajta lévő lábujjak számát.

Van egy működő telepített verziója a projektnek, vagy az összes kódot megtekintheti a GitHubon.

A projekt

Elkezdeni

A kezdéshez csak használni fogjuk create-react-app. A következők futtatásával kezdheti:

npx create-react-app calculatorcd calculatornpm start

Fájlszerkezet és CSS

Az alkalmazás fájlszerkezetének a következőképpen kell kinéznie. A srcmappában hozza létre a következő fájlokat, vagy egyszerűen hagyja el a App.jsés 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

Ha pontosan követni szeretné, akkor telepítheti a CSS-hez kialakított komponenseket is.

npm -i styled-components

Ezután hozzáadhatja a Styled CSS-t ezen a linken a Styles.jsfájlhoz, vagy hozzáadhatja a sajátját.

Fő alkalmazás felépítése

A Calculator.jsfájlnak be kell állítania a kijelzőt és a számbillentyűt. Tartalmaznia kell az összes gombtípust.

Észre fogja venni, hogy a gombok minden összetevője ide kerül a számkijelzéssel együtt. A gombelemek mindegyike lényegében azonos. Mindegyiknek ugyanazt az alapstruktúrát kell követnie. A zero-buttonkülön kap, divmivel az elrendezéshez CSS Gridet használunk, és két oszlopot kell átfognia. (PS - Ha többet szeretne tudni a CSS Gridről, készítettem egy kis cikket az alapokról.)

Észreveheti, hogy a buttonValuekellékekre csak a NumberButtonés az FunctionButtonalkatrészekre van szükség . Minden gombnak ugyanazt az alapstruktúrát kell követnie, egyedi névvel. A fenti fájlstruktúrára hivatkozva láthatja, hogy mely gombokra van szükség. A gombok szimbólumát be kell írni a gomb alkatrészébe, ha nem adják át a buttonValuevia kellékeket. Hozzon létre egyet ezek közül a fájlstruktúra minden gombtípusához.

Ezután rendelkeznie kell egy számológép alapstruktúrájával. Csak egy kicsit térünk vissza a kijelzőre. Most belemerülünk az alkalmazás belső működésébe, és megnézzük, hogyan használhatjuk a horgokat és a kontextust.

A Context API Provider építése

Most létrehozni fogjuk a NumberProvider.js. Ez az alkalmazásod szíve, és ahol funkcióink működni fognak. Ha még soha nem használta a React Context API-t, ez egy nagyszerű eszköz az adatok egyik komponensből a másikba történő továbbításához.

Gondoljon arra, amikor vannak olyan alkatrészei, amelyek egymásba vannak ágyazva. A múltban „prop fúrót” kellett volna végeznie. Ekkor adja át az adatokat vagy a funkciót beágyazott összetevőkön keresztül támaszként. Ez aligha ideális, főleg, ha több rétegbe kezd mélyülni.

Ezzel a szolgáltatói komponenssel azonban lehetővé teszi az adatok továbbítását bármely beágyazott összetevőhöz, bármilyen mélyre is. Ez a szám szolgáltató becsomagolja az Appalkatrészünket. Most, amikor adatokat akarunk szerezni, vagy a szolgáltatónál működő funkciót szeretnénk használni, globálisan elérhetőek. Ez kijuttat bennünket abból, hogy beágyazott alkatrészeken keresztül kell „fúrnunk”. Ön fenntartja az igazság egyetlen forrását, amely a React lényege. A kezdéshez létre kell hoznia a szolgáltatót. Ennek a következőképpen kell kinéznie:

Létrejön az alapszolgáltató, és az átadott érték már elérhető minden beágyazott összetevő számára. Annak érdekében, hogy ezt elérhetővé tegyük, csomagolni fogjuk az Appalkatrészünket, hogy globálisan elérhető legyen. A Applesz a kód.

A Context Provider használata

Most hozzáadhatjuk a kijelzőn megjelenő kódot. Megjeleníthetjük az értéket azáltal, hogy átadjuk a useContextfüggvényt az új React Hooks API-ból. Már nem kell beillesztenünk a beágyazott komponenseket. A kijelzőnek a következőképpen kell kinéznie:

Az a szám, amelyet három szinttel feljebb léptél fel a NumberProviderfájlban, azonnal elérhetővé válik a Displaykomponens számára, felhívva useContextés elküldve a létrehozottakat NumberContext. A számkijelzése most már működik és működik, mivel ez azt mutatja, numberhogy nullára állítottuk be.

Természetesen a számológépünk egyetlen nullát mutat. Ez nagyszerű, ha megszámolja az újszülött fiúval töltött alvási órák számát, de nem olyan nagy, ha bármi mást próbálok hozzáadni, ezért használjunk néhány horgot, hogy ezt a számológépet kiszámolja.

Az első lépések a horgokkal

Ha korábban még nem használt horgot, az lényegében lehetővé teszi, hogy megszabaduljon az osztály szintaxisától, és ehelyett a funkcionális komponenseken belül legyen állapot. Itt a következőket adhatjuk hozzá NumberProvider.jsfájlunkhoz az első horog létrehozása érdekében.

Előfordulhat olyan szintaxis, amelyet nem látott. Ahelyett, hogy kiírnánk az osztályunkat állapotgal, az állam minden részét a saját kisebb numberváltozójába bontjuk . Van olyan is, setNumberamely ugyanúgy setStateműködik, mint a függvény, de most egy adott változónál működik, és szükség esetén meghívható. useStatelehetővé teszi számunkra a kezdeti érték beállítását.

Most mindezt felhasználhatjuk a funkciónkban, hogy a számgomb értékeit át tudjuk vinni a kijelzőre. Ebben az alkalmazásban a számológép karakterláncokat használ a bemenet megszerzéséhez. Ellenőrizzük, hogy nem lehet-e több .a számban, és nincs-e nulla sorozat a szám elindításához.

Gomb alkatrészek építése

Most ezt a függvényt bármelyik beágyazott összetevőben a Context API használatával meghívhatja.

Most már működik a számok készítője. Láthatja, hogyan kezdheti el az alkalmazásban megadott értékek beolvasását NumberProvideraz alkalmazás többi összetevőjébe a useContextfunkció segítségével. Állam és az azt befolyásoló funkciók a NumberProvider. Csak a kívánt kontextusban kell felhívnia.

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.

  • 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.