The Perfect Beginner React Project

Просмотров 394 тыс.

% 8 585

Learn React Today Course: courses.webdevsimplified.com/learn-react-today
Getting started with React can be incredibly difficult, but having a simple project to start with can help immensely. In this video we will be creating a simple calculator in React that handles input changes, user interaction, and complex calculations. This is the perfect project for anyone getting started in React since it focuses on some of the most important React concepts, such as re-renders, state management, and breaking down your code into components.
📚 Materials/References:
Learn React Today Course: courses.webdevsimplified.com/learn-react-today
GitHub Code: github.com/WebDevSimplified/react-calculator
CSS Grid Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9zBsdzdE4sM.html
Box Sizing Video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rIO5326FgPE.html
useReducer Video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kK_Wqx3RnHk.html
useReducer Article: blog.webdevsimplified.com/2020-06/use-reducer
JavaScript Calculator Video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-j59qQ7YWLxw.html
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: www.patreon.com/WebDevSimplified
Twitter: DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:47 - HTML Setup
03:15 - CSS Styles
09:10 - Calculator Logic
#ReactJS #WDS #ReactCalculator

Опубликовано:

20 ноя 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 442

@electric.tlacuache 2 года назад

Love how this dude is in 1.5x by default. Great tutorial!

@nicksmith5306 Год назад

I watch all of youtube @ 1.5x +. I stuck this on to 1.25x and had to slow it to 1x LMFAO - Your comment cracked me up :)

@akihana4113 Год назад

@@nicksmith5306 i can only follow him at 0.75x XD

@Virtualexist Год назад

Yeah man, need to play him at 0.9x otherwise I cant. Simply cant.

@BiMiHi 8 месяцев назад

yap, not possible to follow on 1x

@alfabetony 3 месяца назад

i was thinking the same thing. "he talks fast compared to other videos."

@vengateshm2122 2 года назад

This is not simple one. It's pragmatic, cognitive and help to comprehend the fundamentals. Thanks for the content. Kudos to your efforts.

@bugtori 2 года назад

LITERALLY I WAS ABOUT TO DIE LAST 5 MINUTES I WAS LIKE DUDEEEEEEE ITS ENOUGHHH!! ITS CALCULATING SOME OPERANDS SO LET IT GOOO PLEASEEEEEEEE!!!!

@chrisstucker1813 8 месяцев назад

all of the concepts he used here are beginner's stuff. But putting it all together into something that works is much more difficultt.

@NewVybzBoss Год назад

Just completed, thank you for the great tutorial. Wasn't a beginner project in my opinion due to the amount of complex logic implemented in this one. Glad I was able to follow along and complete this with you. I was expecting this to take me about 2 hours to finish but instead took me like 4-5 hours, just so that I could make sure I could understand everything that was going on.

@CastleShield Год назад

I just finished my React calculator. I came here to make a comparision, that's my favourite style of learning. Thanks, Buddy. I like your tutorials the most, they are indeed simplified.

@gaborbeszedics 2 года назад

You are so awesome! Right now I need this calc app for one of my input fields... great timing and wonderful tutorial! Thanks a lot! :)

@xsjadomonkey 2 года назад

Solid video! Apart from the usual too-fast-even-for-youtube-playback-adjustment, it was very helpful! Thanks man!

@aryheic 9 месяцев назад

it was so fast man. couldn'tt keep up

@west-la-coding Год назад

Thank you for this, it was actually pretty challenging using these concepts! Cheers!

@marcoseghesso8027 2 года назад

Thanks so much Kyle, this was an awesome project to start with. Just two things I noticed, first as Ninjashot mentioned, there is a step missing in the tutorial and that is adding "state" in front of currentOperand when creating ADD.DIGIT case. This should look like this: return { ...state, currentOperand:`${state.currentOperand || ""}${payload.digit}`, } And another bug I noticed while playing with the calculator and testing it, is that the app would crash when pressing "." with no digits there. This can be easily solved by adding the following line on top of the other If statement you have for the "." case on payload digit: This should look like this: if (payload.digit === "." && state.currentOperand == null) { return state } if (payload.digit === "." && state.currentOperand.includes(".")) { return state } Also I checked that all the calculators I have when pressing AC a "0" is displayed, so if you want to add that behaviour, just change the ACTIONS.CLEAR case to this: case ACTIONS.CLEAR: return { ...state, currentOperand: "0", previousOperand: null, operation: null } It should work fine after that. I appreciate the hard work it took for you to share this with us :)

@remylecomte9075 2 года назад

Thank you so much ahah, I was looking for why it was not working and you catched the mistake for me :)

@mdmustaqahmed5391 2 года назад

i am not getting state.currentOperand == null works state.currentOperand === null WON'T work WHY...?

@marcoseghesso8027 2 года назад

@@mdmustaqahmed5391 Hi Mustaq, not sure of which part you’re talking about, but can you please comment what error is thrown? Usually it tells you which line of code is the one causing the issue, it could potentially be something else in your code

@ahancho 2 года назад

Thank you Marco, this was very helpful. May i suggest a change to your: if (payload.digit === "." && state.currentOperand == null) { return state } After refreshing the application, the currentOperand is null and if you press "." it does not immediately start a "0.XXXX" with your suggestion above, so I modified your suggestion to: if (payload.digit === "." && state.currentOperand == null) { return { ...state, currentOperand: payload.digit, }; } so that even though the currentOperand does not include a 0 at initial loading, when pressing "." it will populate 0.XX. It appears to work as I hope with that change, but I am still currently learning React so please advise me if my code could be improved or is incorrect. I hope I communicated my suggestion clearly. Thank you again.

@marcoseghesso8027 2 года назад

@Fatima Faz what button? After the project is finished? Check if you have any errors in your console, it usually is the best way to find out where the problem is coming from

@stevenbarkley5067 Год назад

Thank you for the free instruction. As others have commented the title is misleading. As this is not a beginner React Project. I did get value from it but true begineers like myself should not do this first but the javascript only version and reducer video first. Thank you I am grateful.

@strgglr4637 2 года назад

Too much of information and concept explained with ease. Thanks a lot ❤️.

@filipesommer8253 2 года назад

I can't even describe how much work this guy saved me with these videos.. What a legend

@traveltechtaste41 Год назад

Love the way you cover each and every test case, thank you

@danielbroadbent87 11 месяцев назад

have to say this was my first complete slightly complex react project and i enjoyed it thanks kyle

@batuhanbatur7409 Год назад

you're great at explaining things, this video has certainly improved how i comprehend react.

@nayangarg408 2 года назад

Video just at the right time, when I was searching for the calculator project in React❤️❤️

@em.pxthetic 2 года назад

Hey Kyle, something I thought would be neat is to make an exception to the "change operation" rule to allow a minus sign to infer a negative number as opposed to changing the operation entirely. This could be done by modifying the delete button to also delete the operation symbol, thus having a backup option in the case that a minus operation was intended. Stacking minus signs to do a "Minus this negative number" would also be very useful. I'm sure this begins to approach the realm of scientific calculators, of course, just a thought I had.

@simone-oq4if Год назад

A great beginner's project, I learned a lot from it, especially about reducer hooks. thankyou.

@sumitshekhawat5738 Год назад

While watching your video, I follow your instructions and implemented same calculator. Thanks Buddy!!!

@lourdesrodriguezsanchezdel2691 Месяц назад

Great calculator, thanks!! I would love to see more tutorial videos from you

@hayleehunter4349 2 года назад

mine worked once I added a default case to the switch statements, I really enjoyed this tutorial and learning about the useReducer hook :)

@kristijanlazarev Год назад

I appreciate all the effort put in the video. Is it me or there was someone else that didn't really understand still? Ugh, I was just coding along with question marks in my head.

@manishabairwa9340 Месяц назад

same, I could not understand from when the logical part started.

@ryanthen1047 2 года назад

Glad I found you. Great instructor!

@franciscovilches6839 2 года назад

Hi Kyle, as usual awesome video. You know what would be an awesome follow-up: doing a Svelte version of this video

@chandanc7545 Год назад

i just love your style of using useReducer, u just made a nice usecase for hook

@adamlin5099 Год назад

Seems very knowledgeable on React, I think it would be benificial if he slowed down and explained the code as went, rather than repeat what he is writing down. After watching this video, I feel like I know how to make a React calculator, but I didn't learn much about React.

@wasimbaig1078 Год назад

in defence of Kyle: as a senior citizen with no programming knowledge but programming enthusiastic I learned Node.js, MongoDb from Kyle's another video. IMO you'll experience this from shorter videos otherwise the video might get quite long if everything is explained in detail. What I had done with that tutorial was with every main concept I did a bit of further research to get my concepts right and learnt zillion things while doing that and would suggest everyone watching such tutorials. All in all, again in IMO Kyle is such a knowledgable person with great skill of explaining stuff.

@NewVybzBoss Год назад

agreed

@BiMiHi 8 месяцев назад

Just slow down the video man, you can adjust the playback speed

@TomWien 2 года назад

Another great content. Thank you, Sir

@fraternidadeaustriaca2625 Год назад

Thanks a lot for this video, make me understand much more about react and useReducer

@anotherhumanLingLing 2 года назад

I haven't watched this but I already know I am gonna love it.

@keerthanasurendran1875 Год назад

Thanx for this beautiful class. You are so awesome!

@sofiabargues1495 6 месяцев назад

Excellent tutorial. Thank you!

@jabir5768 Год назад

Thank you for the tutorial, very helpful

@bigtimecoder2588 2 года назад

This is NOT a beginner's React tutorial lol ... still a nice one. Helped me to understand useReducer and the pattern a bit more.

@xiampiii 2 года назад

It's hard to program but it's even harder to teach programming, yet you make it so simple! Fucking love this channel

@137dylan 2 года назад

About to follow along to this now, and to make it a little more challenging I'll do it in TypeScript

@nicbongo 2 года назад

I'm rusty as hell. Started with JSX and will try TSX next! Good luck!

@Henryr67 Год назад

Only you explain react.js this easy. Thanks 👍

@everythingshyam 9 месяцев назад

Thankyou! I learnt a lot in 30 minutes.

@shamim083 2 года назад

Thank you very much. I did it with react typescript.

@rassimve4873 6 месяцев назад

that's so much easier than the vanilla javascript one, now i know it's worth it to learn react, great vid, thanks

@RianY2K 2 года назад

Nice tutorial, thank you

@proud_indian0161 9 месяцев назад

Thanks for this awesome guide

@m4rt_ 2 года назад

Awesome video! This somehow made me like React.

@recursion. 2 года назад

kyle you a legend for this

@macramotiv6857 Год назад

Thank you! I am one step further.

@LegacyAdamsOfficial 2 года назад

I love how at then end he says "And thats all it takes" like that was some simple thing lol. thank you for the tutorial.. this helped me understand useReducer a bit better

@shadoskill 2 года назад

The chance that I watched the original 2 year old video last night cause it was recommended.

@123ftw1 2 года назад

Was it with React or vanilla JS?

@Im-mustafa-saeed 2 года назад

I literally watched the original video last night, but unlike you it wasn’t recommended, I searched for it and the next day he made a newer version 😂

@yattish8810 2 года назад

@@123ftw1 i think it was vanilla js

@saurabhdubey2588 2 года назад

@@123ftw1 vanilla

@amiraharon5592 2 года назад

SAME

@adeniyismart8539 Год назад

If your output div isn't growing with your inputs, that's because the word-wrap and word-break attributes are just as important as using minmax. I made that mistake and was stuck for a while. You have to use all 3.

@tomasburian6550 Год назад

There should be a lot of quotes around the word beginner. However, a good way to make people learn reducers. I've been asked about them in several interviews.

@shenseanchen 2 года назад

Kyle breathes in React and he is so skillful at explaining with examples at a really intuitive and fast-iterative pace. Great job Kyle!

@BiMiHi 8 месяцев назад

pretty much, Kyle looks like he is 26 or something yet has senior level knowledge of react...

@jamesdouglass2724 2 года назад

this guy is such a boss at css

@WildHowlYT Год назад

Awesome project 👍

@user-not-found-97 Год назад

02:27 Btw we can write divide symbol by simply holding ALT + 0247 and release alt after that

@user-fc5mg2tm7q 2 года назад

Thank you very much for this look. It was very helpful for me! Good luck to you ;) #React #Calculator

@Believer01 2 года назад

Hi Kyle, Do you increase playback speed while Editing the video? it seems like you make it 1.25x, just asking

@chunkwanchan5503 Год назад

Thx so much! 18:25 I found that when init state and first click ".", an error occurs. state.currentOperand?.includes(".") seems to solve this edge case maybe.. Also, this calculator not support first operand to be negative value right?

@limeisrichard 11 месяцев назад

when writing html in VSC you can do element.className and it'll auto create element with the classname Ex. div.output would be div with classname output

@niharikagoel9975 2 года назад

Dear Kyle how can you be so fast ? Truely you breathe in React ! Kudos to your knowledge..

@AbdullahAdelx 2 года назад

You are the best , God bless !

@aadityashukla8535 2 года назад

great video dawg

@AsmaKhan-qf6gd 10 месяцев назад

amazing project specially if you want to make strong command on useReducer

@gamingwithhanu2159 Год назад

I recommend creating buttons from 1-9 with a function and pass the value as props

@sayedrenaq7747 2 года назад

learnt a lot!!

@ventsislavstoimenov4404 2 года назад

Great video!

@janaganziuc4568 8 месяцев назад

Thank you, Kyle :)

@ajayg2752 2 года назад

This is different man for a beginner

@Al-no2fm 2 года назад

Love this. Thank you!

@joshyjonckheere2461 Год назад

Very nice video! Thank you very much! Some edge cases that were not covered: 1. you can still add a 0 and then any digit 2. if you start with a ".", the application crashes (currentOperand is undefined) if anyone was wondering how to fix these: fix for 1 = add following check: // If a number is entered and the current operand = 0 then overwrite. if (payload.digit && state.currentOperand === "0") { return { ...state, currentOperand: payload.digit } } fix for 2 = add ? operator to check for multiple periods: if (payload.digit === "." && state.currentOperand?.includes(".")) { return state; }

@BJNizzle Год назад

I am a new React developer and I am getting "currentOperand is undefined" within my reducer function. Any idea how I can fix this? It is my only error at the moment.

@aileenchan3741 Год назад

Great video! : ) I wonder, you know when a decimal is 1.333333 and it shows a bar on top of the last 3 (meaning it repeats infinite times). How would we do that?

@tajuddinkhan5206 2 года назад

Did you handle the precision issue? What will be the output of 0.1*0.2 Is it 0.02 or 0.02000000000004?

@sikendongol4208 Год назад

Keep up the good work

@christian-schubert 2 года назад

So far haven't developed anything too fancy with React TBH, vanilla JS still comes more naturally to me I guess That's probably why I've never really gotten my head around the useReducer hook, but now that I saw it in action, it suddenly clicked. Thanks Kyle, REALLY gave me one of those light-bulb moments 💡

@hombacom 2 года назад

Im not a react developer but the word reducer and dispatch says nothing to me, I would call it something else.

@chrisstucker1813 7 месяцев назад

@@hombacomthe choice of names for some things in react are not very intuitive. Useffect is another one

@mesfinmulgeta6060 Год назад

I really thank you!

@muhammadazeem6077 2 года назад

@Web Dev Simplified please help if(payload.digit==="0" && state.currentoperand==="0") return state this part is not working it keeps on adding zero over and over

@CodeEnthusiast78912 Год назад

this is nowhere near beginner, but thanks for the video i learned a lot, even though i gave up typing with you after you went crazy with functions

@GrubyTolek Год назад

at 28:36 I think the final eturn in DELETE_DIGIT should be return { ...state, currentOperand: state.currentOperand.slice( 0, state.currentOperand.length - 1 ), }; because slice(0,1) just cuts the current operand to 1 digit

@keonheelee3666 2 года назад

period button cause an error when nothing is being typed and there is no current or prev operator is exist in the state what do we do ?

@kaiiemsawat2415 Год назад

Awesome tutorial!!! This is much complicated than I thought but you explain it very well. Only one part that I couldn't understand and still unsolvable is that if I click on '.' before clicking anything else, I got the error page

@jeffreyclaybrook Год назад

I had same issue but found this in one of the earlier comments which fixed it: This can be fixed by using optional chaining on the currentOperand: if (payload.digit === "." && state.currentOperand?.includes(".")) {

@kaiiemsawat2415 Год назад

@@jeffreyclaybrook Thank you. I only missed the '?' .....

@ikazak 2 года назад

Nice video! 🙏

@DraKoN101x 2 года назад

23:23 You forgot to put a statement to prevent user trying to divide by 0.

@JesseParentGP 2 года назад

It does display the Infinity symbol, which could be considered correct. Then you could add a check in the CHOOSE_OPERATION case to not allow any subsequent operations with Infinity if (state.currentOperand == Number.POSITIVE_INFINITY) return {};

@rajeshprasadh3717 2 года назад

thanks Kyle !

@timbittins 2 года назад

Kyle is on highspeed here. Must be a pizza in the oven. Very good introduction to react. Love it.

@kyawswarhtet3238 Год назад

This is a great tutorial and so helpful. Firstly, thanks for creating this video. Let me suggest the error that I found at the 18:10 part, if we do like this and when we start with (.) it happens the error and shows undefined value for reading includes. we can fix it like that (state.currentOperand?.includes(".")) by adding the optional operator (?). Great work and perfect.

@satyamraj2779 Год назад

Thanks a lot . It did help when i got stuck..

@aman12988 9 месяцев назад

Hi Kyle, when after refreshing the application & when there's no *currentOperand* or *previousOperand* inputted in the Black screen looking part of the calculator, & when I click on *.* (Decimal operand) of the calculator, then it throws an Error stating : *Cannot read properties of undefined (reading 'includes')* *TypeError: Cannot read properties of undefined (reading 'includes') at reducer* There's no useCase for this situation implemented.. So for this at *action.type* : *ACTIONS.ADD_DIGIT* case, we can simply write down condition : *if (payload.digit === "." && state.currentOperand == null) {* *return state;* *}* just before the condition *if (payload.digit === "." && state.currentOperand.includes(".")) {* *return state;* *}*

@farishuric2416 2 года назад

Where is the entry for video intro like in VanillaJS calculator ? That chair roll and straight look is so cool!

@ninjashot37 2 года назад

I'm having an issue. When coding the reducer I'm getting an error saying ${currentOperand} isn't defined at this point. switch(type){ case ACTIONS.ADD_DIGIT: return { ...state, currentOperand: `${currentOperand || ""}${payload.digit}`, } } I understand why it's happening since currentOperand is being defined in the same line that uses the reducer. function App() { const [{currentOperand, previousOperand, operation}, dispatch] = useReducer(reducer, {}); } but I have no idea how you managed to bypass this issue when you were coding it, any feedback on this would be much appreciated.

@ninjashot37 2 года назад

I checked the video again and it turns out you added 'state.' in front of currentOperand but cut that part of the video out for some reason. EDIT: You also forgot to mention to add a default: case to the switch case statement so that the data appended in the display.

@TheKbax33 2 года назад

@@ninjashot37 Thank you very much.... it took me so long to figure out what i was doing wrong... and this comment guided me there.

@claudiutamas79 2 года назад

@Lautaro Clerici Erhardt case ACTIONS.ADD_DIGIT: return { ...state, currentOperand: `${state.currentOperand || ''}${payload.digit}` }

@rickeyupadhyay6898 Год назад

Hi Everyone I am getting the below error when using the currentOperand , previousOperand,operation as property it shows undefined undefined undefined undefined till 1000lines. it is giving that error const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{}); {previousOperand} {operation} {currentOperand} Please help me out with these!

@brandonev Год назад

@@rickeyupadhyay6898 @ 15:04 he deletes the line "dispatch({ type: ACTIONS.ADD_DIGIT, payload: { digit: 1}})"

@BOSprodz Год назад

Buttons stay highlighted after clicking (looks like it in the video as well). I "fixed it" by removing the highlighting on focus from the css, but I wonder how to do it properly and keep the focus feature Thanks

@duynguyen-se9hr 2 года назад

does anyone explain the overwrite , how does it work ?

@uttamkamar6453 Год назад

the calcilator is perfect but when you click only "." then it will throw some error. Also when the anser is in fraction then it will shows large number after "." (point). there is no limit at all

@RahulPujari 2 года назад

How can you be so smart and good looking at the same time? 😂 Thanks a ton for the tutorial, appreciate it💯

@OkeCodigo 2 года назад

Perfect example indeed, the same example that I show in my course on Udemy to get started with React

@rpnrko3612 Год назад

This is anything but SIMPLIFIED!!

@AvikNayak_ Год назад

I watched many of his videos and I can surely say none of his videos make web dev simpler by any means.

@Daniel-uv6gs 2 года назад

I had serious problems getting the background-color on the body working. Does anyone know why? It just doesn't render.

@nica1 8 месяцев назад

I'm a true beginner in React and found this informative and challenging. Does anyone know why Kyle didn't include overwrite as a variable when he initialized his state with useReducer? He included currentOperand, prevOperand, operation in this statement: const [{currentOperand, prevOperand, operation}, dispatch] = useReducer(reducer, {}). Then he went onto to reference state.overwrite in his first if check in the ACTIONS.ADD_DIGIT case in his reducer function. How can you do that if you never declared what overwrite means in the first place?

@optimus_prime01 Год назад

watching your videos on 0.75x and it seems perfect for me.

@JesseParentGP 2 года назад

This is awesome content as usual! One small thing I noticed while testing this: When the calculator is first loaded or AC/All Clear, if you press the decimal(".") button first, an error occurs because the currentOperand is null This can be fixed by using optional chaining on the currentOperand: if (payload.digit === "." && state.currentOperand?.includes(".")) {

@codenamegrant 2 года назад

Good find. I replaced it instead with a check that will set the currentOperand to "0." instead. So users can type ".25" and it outputs to "0.25".

@C2W 2 года назад

Found this error as well, thanks for giving a quick fix. With testing it out, it automatically puts a 0 in front of it. Is this caused by the INTEGER_FORMATTER or is it due to something else?

@JesseParentGP 2 года назад

@@C2W That is exactly right! Kyle did a great job with this formatter. Specifically, this is the line that matters, where it formats the blank text in 'integer' to 0: return `${INTEGER_FORMATTER.format(integer)}.${decimal}`;

@abdullahtarofdear6849 2 года назад

@Jesse Parent, whats would be the return statement be though? tried multiple ways but the application still crashes :/

@edbean 2 года назад

Thanks for the content, your work is amazing! The app will error if you type a decimal point (.) as the first digit. I solved it by adding a check if the state.currentOperand was not empty.

@behradkayedi3195 Год назад

Some elaboration would be great, as I'm struggling to implement this.

@edbean Год назад

@@behradkayedi3195 On line 27 of App.js, I added this to the if statement: " && state.currentOperand". So the final if statement will look like this: if (payload.digit === "." && state.currentOperand && state.currentOperand.includes(".")) { return state }

@KuroganeRyujin Год назад

@@edbean You're a real one for that, thanks

@misskiwii 2 года назад

PLS HELP When I click on any operation, the dispatch runs CLEAR for some reason?? I'm at 21:00

@tylovset 2 года назад

Cool video. Some nitpicks: 1) Display should always leave a 0 after clearing last digit or AC. 2) It seems you allowed one leading 0 in numbers, which is no good.

@nicbongo 2 года назад

Cheers for the stretch. I first tried using a placehodler in currentOperand div. However as it wasn't state related, the field was still blank on first load. Next, I set the evaluate action to be set currentOperand to 0. This however didn;t solve the problem of first loading. Finally, when the state is declared with the useReducer hook, I set the default value inline there: const [{ currentOperand="0", previousOperand, operation }, dispatch ] = useReducer( Reducer, {} ); And that had it working as intended. Not sure on your second point. Do you mean numbers like "0567"? If so, ints beginning with zeroes are prevented.

@macramotiv6857 Год назад

2) if (payload.digit && state.currentOperand === "0") { return { ...state, currentOperand: payload.digit, } }

@ankitsaha1155 Год назад

Okay, in the formatOperand function, it's throwing me an error of "TypeError: operand.split is not a function or its return value is not iterable" How to solve that?

@subliminakeys1674 Год назад

It's amazing how much different this is than the calculator I built. I used regular js for mine cause I wasn't in react yet but our code is 100% not even close. I also had % and storage for history as well though. Side note - I was told never use eval for any reason ever as it's a huge security issue. I was essentially forced to find another option to evaluate my math which made my code more complex. Was I misinformed?

@rickeyupadhyay6898 Год назад

Yes you should never use eval , you can create calculator in 2 minutes using eval

@UsernameUsername0000 9 месяцев назад

Don’t use eval. A safer and more customizable approach for performing the arithmetic is using an object mapping between the operation type and a binary function. Something like this (used TypeScript here but it’s not necessary): /* Type specifying a function that takes two number arguments and returns a number */ type BinaryCalcOp = (arg1: number, arg2: number) => number; /* Type that indicates an object of string keys with values of type BinaryCalcOp */ type OperationMap = Record; const operationMap = { ‘+’: (a, b) => a + b, ‘x’: (a, b) => a * b, ‘/’: (a, b) => a / b, ‘%’: (a, b) => a % b, ‘^’: (a, b) => a ** b, } as const satisfies OperationMap; The nice thing about this is that you can now add something like ‘^’ to perform exponentiation. Using eval will treat ‘^’ like a bitwise AND which is not what you want, but because you are in control of the mapping, you dictate what it means. Now the main chunk of the evaluate function from the video would look like this which is much nicer imo: return operationMap[operation](prev, current)