The Perfect Beginner React Project

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:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:47 - HTML Setup
03:15 - CSS Styles
09:10 - Calculator Logic

#ReactJS #WDS #ReactCalculator

[electric.tlacuache]

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

[vengateshm]

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

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

[filipesommer]

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

[xsjadomonkey]

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

[adamlin]

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.

[marcoseghesso]

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,
|| ""}${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 === "." && { 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 :)

[em.pxthetic]

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.

[bigtimecoder]

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

[gaborbeszedics]

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! :)

[west-la-coding]

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

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

[strgglr]

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

[stevenbarkley]

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.

[danielbroadbent]

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

[traveltechtaste]

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

[Believer]

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

[lourdesrodriguezsanchezdel]

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

[nayangarg]

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