The Perfect Beginner React Project

we're going to be building this calculator using react and it may look simple but it's surprisingly complex and it introduces a lot of really important programming concepts [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner in this video i'm going to show you how to build this calculator that you see on the right hand side of your screen and in most calculated tutorials you see they're going to use some kind of math library that handles all the calculation for you but in this video we're going to be doing all the calculations on our own which makes this problem a little bit trickier but it introduces a lot of really important programming concepts you need to understand to be a good programmer also this is based on a tutorial i did on a javascript only version of this calculator i recommend you check that out after this video i'll link it at the very end of the video so you can watch it and compare the react versus javascript version now to get started all i've done is created a blank react application and i just deleted all the files we don't need and you can see we just have our simple react application and if i just refresh this you can see we have nothing at all in our application so we need to do is we need to add in all the code for our calculator so here's the working version i'm just going to have that pulled up as a template and we know that we need to have a div that's going to wrap everything and we're going to give that a class here which is going to be a class name of calculator grid and that's because in order to do this we're going to be using css grid to lay out our entire calculator and if you're unfamiliar with css grid i have a full video on it linked in the cards and description down below now the next thing we need to do is this black section at the top that's going to be a div we're going to give that a class name here of output and that's going to have both our operand right here which is what we're typing in and it's also going to have this section at the top which is going to be like a secondary operating or a previous operand what we want to do is we want to have a div here and this div is going to have a class name of previous oops previous operand and that previous operand is what's going to contain both this number up here as well as the multiplication divide and so on sign and then below this we're going to have our current operand and the current operand is going to be this larger number down here that we're currently in the act of typing out then after that that's done for our output we can move on to all the different buttons inside of our css grid so our first button here is going to have a class name here of span2 and that's because as you can see this all clear button spans two columns in our button grid so we're giving that class to span two and then also we're just going to put the text ac inside of this button now we're going to copy that down because we're going to have our delete button next so d e l and this one does not span so we don't need that class name on it now after that we can have another button and this one's going to have the divide symbol here a really easy way to use this divide symbol is we can just copy this and we're going to paste it into our page here and then we can use that fancy divide symbol instead of something like this slash symbol then we need one two three and multiply so let me just copy this down a few times we can do one two three and multiply then we need to do four five six and we're going to have the plus sign here copy this down a few more times we have 7 8 9 and we're going to have the subtract symbol and then we're going to have three more buttons we're going to have here the period we're going to have the zero and then our final button is going to be another one that spans two because this is the equal sign so we're gonna have class name span two and we're gonna put the equal sign into here so this right here is our entire grid of buttons and if we save this and we look over here you're gonna notice we just have essentially a bunch of buttons and nothing else and that's because we don't have any styles yet for application so i want to create a simple style sheet called styles.css and then inside of our app at the very very top i just want to import that styles dot css so this is going to import all of our styles from here and then we can get started writing out all of our styles the very first thing i always like to do is i always like to select everything so my before and my after elements i just like to make sure to set my box size into border box it makes sizing things so much easier and if you're unfamiliar of why this works i have a video on it i'll link in the cards and description for you next i always like to remove all the margin from my body spring to set margin to zero and also we're going to set a fancy background here this is going to be a linear gradient as you can see over here we have this gradient that goes from blue to green so we're just going to incorporate that it goes to the right starts out at a blue color which we're going to use 0 0 a a f f and then it goes to a green color which is going to be 0 0 f f 6 c now if we save come over here you can see we get that nice blue to green gradient and already this is looking so much better now let's focus on the grid and this is going to really transform our entire application so let's get our calculator grid make sure i spell calculator correctly there we go and we want to change the display here to grid then once we have display grid i want to put a margin on top of 2 rem just to space out the top of our grid as you can see it gave us a little bit of space there and then in order to make our grid actually work i want to have some grid template columns so we'll say grid template columns we're going to set this to a repeat of 4 and 6 rem this is going to give us 4 different columns and already that's starting to look pretty good then we want to have some grid template rows so we have our good tempo of rows and this is going to determine the height of our different boxes so we're going to set this to a min max here of 7 rem and auto and the reason that we're doing this is that by default we want our very first row at the top to be 7 rem or it's going to expand to fill the full height so if for example we have a really long number if i just keep spamming this you're going to see it expands on to the next line so this is just making it so that this can grow as large as it needs to that's what this auto is doing and then we want to make sure we have all the rest of the rows so that's just our first row then we need five more rows that are all going to be six rem and that's because we have five rows of buttons so that gives us this nice grid layout now what we have left to do is to actually make that span two work so let's put in span two and here we want the grid column to be span two that's going to make it so that these buttons such as ac and equal now span two columns instead of just one we also need to specify our output to make sure it spans the correct amount and we want our output to be essentially the entire top row so we can just say that we want to span from column one to column negative one and that means it's going to take up the entire top row so now we have our output up here and the rest of our grid buttons following below let's finish out styling the rest of our output to make it just look like we want we can set the background color to rgba we're going to give it a completely black color but it's going to be partially transparent just so we can kind of see the blue green color behind it it gives it a cool look and then we want to make sure we can lay out the text inside of here so for now i'm just going to put some placeholder text let's just say like we're going to have a number like this 123 234 same thing down here and let's put the multiplication sign just so we can kind of see what this text looks like right now it's really hard to see because it's black so obviously we probably want to change our color inside here to be a white color so let's take our output and we're going to select the previous operand and here i'm going to change my color to be rgba 255 255 225 0.75 so it's going to be entirely white but partially transparent kind of gives us that nice off-white color and then let's just copy this down for our current operand and here i want this to be entirely white so it stands out a little bit more and i also want to change the font size here to 2.5 rem so it's going to be a nice and larger font size and then our previous operand is going to be smaller so it's going to be a font size of 1.5 rem so as you can see that looks pretty good so far now the next thing to do is delay it out so we're going to of course change our flex direction here to column since we want it to be vertically stacked then we're going to align our items on the end so we're going to say flex end and i want to justify content space between actually we're going to do space around here the reason i'm doing this is just so it spaces these elements out as much as possible from one another so as you can see over here they're getting close together when we have a lot of room but if we don't have very much room you can see it put space between them now we also want to have some spacing around the actual output itself so of course we're going to add in some padding let's do 0.75 rem and then in order to have the words actually wrap properly we want to set our word wrap to be break word so it can wrap and our word break here is going to be break all and this just allows it so that we can actually wrap when we have a really long output like this it'll wrap onto the next line like we want and that pretty much covers our entire output section let's just finish up with these buttons because right now they are kind of ugly so let's select our calculator grid and we're going to get each button inside that grid we're going to change our cursor to be a pointer cursor our font size we're going to make much larger to rem as you can see that already looks better we're going to give it a border of one pixel solid white and we're going to remove the outline from it we'll say outline none and most importantly we're going to change our background color and again we're going to make it partially transparent so 255 255 255 that'll be white and we're going to give it a 75 opacity so as you can see that looks pretty good then when we hover over it so if we just take our calculator good get our button get the hover state and we're going to copy this down for focus as well what i want to do is i just want to take our background color and i want to make it a dark background color so we're going to say for example 0.9 so it's a little bit more white looking so now when we hover over it or if we tab to one of these you can see it now has that much more opaque looking color which makes you know that it's selected and the last thing we need to do is just center this so inside of our calculator grid we can just say justify content in the center click save and that's going to center this object and as you can see these two calculators look almost identical we can actually delete this fully working calculator because now we have the version of that calculator we care about it looks pretty good now all i have to do is add in the functionality and this is where most tutorials just download a library and they just do all the calculations for you but instead i'm actually going to show you how to do these calculations because it involves some really cool programming concepts so for now let's just delete out all of this placeholder text we don't need it and what we can do is we can focus on how we're going to do these calculations in our case what i want to do is i want to use a reducer inside of react to essentially manage all the different states so our state is going to be this previous operand our current operand and then the operation that we have so we're going to come in here we're going to say const and we want to use a reducer so that gives us state and dispatch and that's going to be set equal to use reducer and this use reducer is going to take in a function called reducer so let's create a brand new function called reducer just like that and this reducer is going to take in here a state and it's going to take in an action and then it's also going to take in our default state which is an empty object for now and if you're unfamiliar with this use reducer hook i have an entire video covering a link in the cards in the description for you because i don't want to go into it here because it's pretty involved but this is going to make doing our stage so much easier so also our state as we mentioned it's going to have a few different variables we're going to have our current operand we're going to have our previous operand and we're going to have our operation so now what we can do is we can just take our current operand we can just place it right here inside of our react code our previous operand is going to go right here and our operation is going to go right after that so right now this is where our state variables are going to be put into our code so actual rendering of our application is super easy this is pretty much all the code for rendering our entire application now the hard part is going to be our reducer which allows us to manage all of our state for us so one thing i like to do when i'm dealing with reducer is i like to break this action into essentially a type and a payload because we know that we're going to have a bunch of different actions we're going to have different types of those actions and those actions are going to pass along some parameters then once i do that i like to think of all the different types of actions i can take so with this calculator we have a few different actions i'm going to put them into this global variable here and the first action we have is going to be adding a digit so clicking one two three the period sign zero so adding a digit is going to be one of our actions so we're going to add that in to our actions object here another thing that we can do is we can clear out so we can have a clear action okay we can also remove a digit so i can just type in here delete digit and that'll be delete digit that's what happens when we click this delete button if we want to choose one of these operations for division multiply and so on we're going to have a action for that so we're going to have a choose operation action which is just choose whoops choose operation there we go and then finally the last thing that we can do is we can click this equals button down here which is going to be the evaluate option so we can say evaluate and this is going to just be evaluate so now inside of a reducer here we can set up a simple switch which is going to switch on our type and then we can say for each case we want to do something for the add digit case for example so actions dot add digit oops there we go actions dot add digit we want to run some code inside of here and this code is going to return to us a new state object that's just how reducer works and then for the next case we could do the same thing and so on all the way until we used all the different cases we can think of so inside of the add digit our state is really quite simple we're going to return a new state object we're going to take our current state and spread it out and then we're just going to take our current operand because we can only ever influence the thing that we're currently typing and we're going to replace it by just coming in here and adding the current digit to the end of it so we're going to have some string interpolation here we're going to take our current operand and we're just going to add our payload digit so payload.digit and this digit from the payload is just something we're going to pass to our reducer so when we use dispatch we'd come down here we'd say for example dispatch we're going to say our type here is actions.add digit and then we're going to pass in a payload which is going to have a digit and it'll have like one for example as the digit and here all we're doing is we're taking our current operand and we're adding on that digit to the end of it and if our current operand is null for some reason we just want to make sure we default to an empty string so this will either create a brand new current operand with just our digit or it'll add the digit onto the end of our current operand now in order to actually see how this works we need to start hooking things up so coming down here where we have all these buttons i want to replace some of these buttons with custom components so i'm going to create a brand new component we're going to call this the digitbutton.js this is just going to be a really simple export default function which is called digit button and this digit button is just going to take in a single prompt a single prop actually which is our digit and we're also going to pass in our dispatch so we can actually call our reducer from here so then inside of here we're going to essentially return a button so if i just copy one of our digit buttons up into here we can just return our digit button let me just copy that down there we go so we're just returning this button inside of here we're putting our digit and then on click we need to essentially call this patch so we're going to say on click we're going to call a function and this function is going to be our dispatch function we need to pass it in our type which comes from our actions and our actions are defined all the way up here instead of app gis so let's make sure we export these and we're going to import them inside of here so we'll say import actions from that's going to be from app right here so now we can say for example actions dot add digit we want to pass in a payload which is going to be our digit now if i save you can see we have a button which has this digit and it has an on click which is calling the add digit function and it's passing along the digit we want to add in our app.js we can just come in here we can say we want to import that digit button from digit button and then we can take this down here anytime we have a digit instead we can just replace this with digit button and we can change our digit equal to that divide symbol so let me just copy this over make sure that this is inside of here and then our dispatch is equal to dispatch just like that and now we just close this off we now have this digit button working and if i save but it's actually not working and that's because we have this dispatch down here we need to remove that now when we save and we refresh over here you can see everything's working and if i click on this divide it will add that divide digit obviously our divide symbol shouldn't be a digit button though it should be choosing an operation so for now we're just going to comment this out kind of forget that this is there and instead we're going to use our digit button to cover up the rest of our digits so our digit here is going to be 1 and then we're going to copy this down a bunch of times so we're going to have 2 3 4 5. we're going to have 6 7 8 9 0 and we're also going to have a period so 1 2 and 3 here are going to replace this one two and three we're gonna take the four five and six we're going to replace the four five and six down here and we're going to take this 789 replace this 789 and then finally the period and the zero and replace the period zero down here now we've essentially just replaced all of these normal buttons with these digit buttons and we can do the exact same thing for our operations but we can just call these an operation button instead so we just give it a new name so we're going to copy this down to all these different locations so we're going to have a plus symbol here we're going to have a minus symbol here this one is going to be a multiply symbol get rid of the old buttons that we had then instead of the same digit it's to say operation so i just want to copy that down like that and now let's create that we're going to copy our digit button give it an operation button name and inside of here change this to an operation button change this to an operation just because that's what we named it put that in our payload and then here instead of add digit we want this to be choose operation so we're choosing that operation and we're rendering that operation here so now if i save and i go over to our app and make sure that we import operation button from operation button you can see that now everything looks like it is working as we expect we can click some buttons for our digits and it's going to add those digits we can click operations and of course choose operation doesn't do anything so we're getting a bunch of different errors but if we implement choose operation it'll work but we still need to finish implementing add digit because right now it looks like it's worth it i mean this looks correct but the problem is what happens when we put a decimal we can just add as many decimals as we want that's not really that good or what happens here if we add a bunch of zeros so if i refresh you can see we put a bunch of zeros at the front and obviously again that just doesn't make very much sense so we need to think about these edge cases so inside of add digit let's put an if and we want to say hey if our payload digit is equal to a zero and our state.currentoperand is also equal to a zero then we just want to return our current state and by returning our current state it means don't make any changes now by doing this if we refresh over here we click zero it adds one click zero again and it's saying hey your output is already zero we can't add more zeros because that just doesn't make sense so just don't do anything all the rest of the digits work fine but that one zero is not going to do anything so now we need to do is worry about the period so let's come in here we want our digit to be a period so if our digit is a period then we want to see hey does our operand include a period already so does it include a period oops if it includes a period and we're trying to add a period just return our current state so now if we refresh here and we type something out and then we click period and type again and then try to hit period again it won't let me add another period because we already have one so this is a beautiful way of just ensuring that we don't have no additional periods or we have too many zeros this is just going to make it so much easier to work with all of our code and then by default down here we're doing like the normal update operation right here now the next thing we can work on is the clear operation because it's super straightforward and easy so down here i want to just set up an on click for all clear button and this is just going to be a function that calls that dispatch function it's going to call dispatch it's going to pass in a type and that type is very simply just going to be actions.clear there we go we don't have to pass any payload because for clearing we don't have a payload up here we can just minimize this case and add a new case in this case is going to be for actions dot clear and for this case it's super simple all we want to return is an empty state and that's just because when we click clear we just want to remove everything as if nothing happened at all we want to go back to our initial state so let's just refresh add a bunch of stuff click all clear and you can see it just wipes everything completely this is beautiful now the next action i want to talk about is going to be for choosing an operation so we can say actions dot choose operation there we go and instead of this case what we want to do is we want to check a different things so first of all if we choose an operation and we have nothing typed out yet obviously we don't want to do anything crazy so if our state dot current operand is equal to null and our state dot previous operand equals null then what we want to do is return our state so right now essentially we have no state at all for our current or previous operating so if i click any of these operations it does absolutely nothing which is perfect now the next thing i want to check for is hey if our state.previous operand equals null but our current operand is also not equal to null because we've already passed this if check then i know that we've typed in something here but we don't have anything as our previous operand yet so i just want to take our current operand make it our previous and set our operation so this is where the real beauty of our calculator comes in so we can take our state and just spread that out then what i want to do is i want to take our operation i want to set it equal to our payload dot operation just the thing we passed in our previous operand is now going to be equal to our state dot current operand and our current operand is going to be set equal to null so all i'm doing is just making the current thing the previous and that's about it so now if i click multiply and i just refresh here to make sure this takes effect let's type in a number click multiply you'll notice that our current operand becomes our previous our operation is saved and now we can start typing in our new operating but now we have another scenario to run into what happens if i click multiply here well what i want to happen is i wanted to just do the entire calculation between this number multiplied by this number make the evaluation equal to our previous operand and then now we can start typing our new thing because when you're working on a calculator if you click two plus two and then you click the plus button again it's going to add two plus two to be four and then it's going to say four plus and you can type in whatever you want next so now we're just going to come down here and this is going to be essentially our default action so what i want to do here is just do a return i will return our state what i want to do next after that is take our previous operand and our previous operand is what i want to evaluate so we're going to create some evaluate function this evaluate function is going to take in our state and then we're just going to use that value then for our current operand i want to set this equal to null and for our operation i want to set the operation we just clicked on so we could say payload.operation you'll notice this works very similar to what we did up here but instead of taking our current operand and setting as our previous we're taking our current and our previous calculating the operation from this evaluate here and then setting that as our previous so let's create that simple evaluate function and this evaluate function takes in our state which is our current operand our previous operand and our operation just like that so what we need to do is convert these strings to an actual number so we can say const previous is equal to parse float of our previous operand we can do the exact same thing for our current we can say current is equal to current operand and then what we can do is we can say hey if any of these don't exist so if they are not a number for our previous or if they are not a number for our current just like that then what i want to do is just return an empty string because we just don't have any calculation to do otherwise i want to get our computed value so we can say computation is equal to an empty string so by default we're going to say that our computation results in nothing otherwise we're going to switch through a bunch of different statements for our operation so if our operation is for example the plus symbol here then we're going to do a plus calculation so our computation is going to be equal to our previous plus our current and we put a break right here just so we don't go into our next case statement then again we're going to do another case this one is going to be for minus and here our computation which just going to be equal to a previous minus our current and again we're going to put a break as you can see there's kind of a pattern here i'm just going to copy this down a few times because we're going to have one for multiply and 4 divide so we're going to get multiply and then i'm going to come down here copy the divide symbol up so we can use that same symbol change this to multiply change this to divide and there we go at the very bottom here all we need to do is return our computation and we just want to convert that to a string because everything we're dealing with is strings so that is our evaluate function completely done so now if i save refresh over here if i say 12 plus 2 and i click plus again you can see it calculates 14 and gives me a plus now if i say 3 and i say multiply you can see it calculates 14 plus 3 is 7 or 17. i'm sorry so now we get 17 times i could say 2 give me a plus now we got 34 plus and so on now there is one scenario that we're not covering right now is what happens when i click multiply well that just means i want to change from plus to multiply but right now it doesn't work that's because we haven't taken care of that i need to check for when my current operand is equal to null if i refresh here we can kind of see what that looks like that means i like typed in 23 i hit multiply and i'm like oh crap i meant to hit plus so i want to hit plus here so really all i want to do in this scenario is overwrite my operation that's pretty easy to do we can just return our state object and then we can just say our operation is equal to our payload operation all i'm doing is updating our operation so let's refresh this do 12 times and i'm like oh i meant plus well i'm going to click plus we'll do three and now it's going to work we get 15. now that we have this choose operation essentially entirely done we can focus on our next button and this button is just going to be the equal button so i'm just going to copy this on click and go all the way down to our equal button paste that on click in here but instead we're going to have our evaluate action again we don't have to pass any payload because we don't care about that but what we can do up here is we can say hey we're going to have a case for our actions.evaluate this one's going to be actually pretty easy because we already wrote all the code for evaluation what i want to do first is i want to check do we have all the values state so is our state dot operation not equal to null or if it is equal to null or if our state dot current operand equals null or if our state dot previous operand equals null that just means that we don't have all the information we need so we're going to return our current state essentially do nothing at all because if you click equal like if i clicked equal right now when it just says 15 minus minus what i don't know so i don't want it to do anything otherwise if we do have all of our state correctly applied then we want to do the evaluation where here we can return our current state and then we can do all the rest of the code right below here so for this i want to set our previous operand equal to null our current operand is going to be equal to whatever we get from evaluation so we're going to evaluate with our state and then our operation is going to be equal to null and that's because we just click equal that's saying you know do 15 minus whatever i type in here 3 for example that should give us 12 and just put it down here as our current value so let's just refresh and do exactly that 15 minus 3 equals and it gives us 12 right here but one interesting note you know is if i hit 3 it gives me 123. in a normal calculator after you do a calculation if you click a digit it should overwrite the value so we're going to put a value called overwrite into our state we're going to set that to true any anytime we do an evaluation and then way up here when we're adding a digit i just want to do a simple check way at this top and if it says state dot overwrite if this is true then what i want to do instead of making my current operand equal to the next operand and so on instead i want to return a state here which is going to be our current operand but i just want to replace our entire operand with our digit and then i want to make sure overwrite is changed back to false so let me show you exactly what i'm talking about if i just hit refresh here type in 12 times 3 equals get 36 and now when i type 2 instead of adding 2 to the end of 36 it overwrites this value with 2 and i can continue typing from here and so on you know times 6 plus 3 times 6 equals and then when i hit 5 it's going to overwrite that value that's all this overwrite flag does and it's really important to have that now the last operation that i want to take a look at here is going to be for deleting a digit so we can just come in here we can say case for actions dot delete digit and this one is actually quite a bit more complex than you would think first i want to see if our state is the override state if we're in the overwrite state then i just want to return an empty object i just want to clear out everything that's perfectly okay and actually instead of doing that let's be a little bit more specific because really all we want to do is delete the current operand so we'll say current operand is null our state is going to be spread out and then we're going to change overwrite back to false so this is just being a little bit more clear exactly what's happening if we're in that overwrite state also we want to do another check here to see if our state current operand is equal to null and this is because if we don't have a current operand we can't obviously delete anything from it so we're going to return our current state also if our state dot current operand that length is equal to 1 this just means that there's only one digit left in our current operand well what we want to do is completely remove it so here i want to do a return we take our state and our current operand and i want to set this to null and that's just because whenever we delete the last digit i want to reset our value to null here instead of leaving it as a value of an empty string and then finally with all those checks in place now we can do our default case where we just have our state and we take our current operand and what we're going to do is just take our state current operand and we want to slice this 0 and negative 1. and this is just going to remove the last digit from this current operand so now if we just minimize this down we can go all the way down to where that delete button is copy this on click into that delete on click here and what we can do is we can say actions dot delete digit click save and now if i just refresh this 12 click delete got rid of that click delete again it completely removes it and if we you know do like a big thing now we have the overwrite state if we click delete you can see it removes the whole thing because that overwrite status now you may think this calculator is complete but we can actually make this even better by formatting these values because right now you know this is a big number what is this number yet to count the digits it'd be so much nicer if we had commas separating the digits for the thousands and the millions and so on we can really easily do that by creating a integer formatter this is going to be you for formatting the integer portion of our number and there's going to be a new intl dot number format we're going to be formatting in the english format so we're going to do en us and all i want to do here is make sure that there are no fractions so our fraction digits are going to be zero this is going to be for formatting our integer portion of our number and the reason we have to separate our integer portion and our non-integer portion is because if we come in here and i say you know 12.0005 if i want to write this number out i need to make sure that i don't actually do any formatting on this part after the decimal otherwise when i type in 12.0 the formatter is going to be like well 0 is not important so i'm going to remove the 0 and we need to make sure that keep that 0 in there i'll show you what i'm talking about a little bit when we write this function so this function is going to be called format operand it's going to take in an operand and all we want to do is we want to split it on the decimal but first we want to make sure we have an operand so we're going to say if operand is equal to null just don't do anything return nothing otherwise we're going to get the integer portion and we're going to get the decimal portion by taking our operand and splitting it on the decimal so if we have a decimal for example 12.0 our integer is going to say 12 and our decimal will say zero while if we don't have any decimal for example here our integer will be 12 and our decimal will be null that's exactly what we want then we can say hey if our decimal is equal to null that means we don't have any decimal all i want to do is just take my integer formatter and i want to call the format function with my integer portion this is going to be for formatting an operand and let me just copy this down real quick and we'll paste that down here so we can format our current operand and we can format our previous operand and now if we just refresh this and i type out you know 122 and i click two again you can now see we get 1022 and you can see that we these nice commas showing up now to make sure that we have the decimal portion as well here what i want to do is i want to just take our integer format paste it down here put a period afterwards and make sure i do string interpolation inside of here there we go and then i just want to put our decimal portion afterwards i don't want to do any formatting on the decimal portion so now i can say like 12 dot i type whatever i want add some zeros at the end and it's going to work just fine we get this nice formatting actually like times two equals you can see we again get nice formatting and again the reason i separated the integer from the decimal portion is if i ran this number formatter on the entire number it's going to remove all those trailing zeros which means we can't type something like zero zero zero zero five it just wouldn't let us do that which is why we had to separate these sections and that's all it takes to make this react calculator like i said i have an entire version of this in just pure javascript if you're interested that's going to be linked over here and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 52,151

Keywords: webdevsimplified, react calculator, js calculator, react js, reactjs, reactjs calculator, react js calculator, calculator coding tutorial, react calculator tutorial, js tutorial, js project, javascript calculator tutorial, js calculator tutorial, javascript calculator, js, javascript

Id: DgRrrOt0Vr8

Length: 31min 55sec (1915 seconds)

Published: Sat Nov 20 2021