How to build a temperature control app in React | Beginner React Projects

[@kevinweakley3970]

I appreciate you how explained what COULD happen, depending on how specific, key pieces of code were handled. Also, addressing the "Why?/How?" to how the program acted/did NOT act, as expected, if certain code blocks were set up was a great help. Finally, how, at the end, only "...return;" was needed - with the temperature reading limits - since there was nothing to input, & therefore no braces needed. Thanks!

[@BEAGAMER]

i think this is the worlds best tutorial i ever see

[@Kynetic4ce]

This is a great tutorial for a beginner. Especially after going through the React Docs and looking to practice. I love how you've simplified the approach at every step and how one can improve their code. Thanks! My React Journey is definitely going to be sweet with these kinds of resources. Highly appreciate your time and efforts.

[@carlosl-f2433]

Damn...you explain this soo well...I was hitting a wall learning react and this just got me inspired again

[@kensei1412]

thanks for the tutorial, the recap really helps a lot!

[@traezeeofor]

Thanks so much fo rthis very basic React project tutorial. Much needed for a newbie and much appreciated👍

[@jeetsingh-sy5ij]

Hey Chris, I rewatched your video, and i really love how you deal with the codes. I learnt something new again. Thank you very much.

[@rohitpal6496]

this project is assign to me in and i have made done thanks for this video .keep uploading this video love from india

[@shamrosekjan598]

really appreciate this video i am a beginner and it helped me alot ...thank you so much

[@abhikgupta]

Here's a cleaner approach : import React, { useState } from 'react' const App = () => { const [temperatureValue, setTemperatureValue] = useState(10); return ( {temperatureValue}°C { if (temperatureValue > 0) { setTemperatureValue(temperatureValue - 1); } }}>- { if (temperatureValue < 30) { setTemperatureValue(temperatureValue + 1); } }}>+ ) } export default App;

[@antomac4332]

Great tutorial Chris, thanks!

[@jennyggf3556]

Great idea for a beginner project! tnx

[@ajeigbejohnoluwaseyi8458]

Thanks, Chris! this is so good for beginners like me!

[@ChrisBlakely]

Thanks for watching man it really helps at this stage!

[@sergeiiurevich8976]

Thank you so much, Chris. Gonna practice the project today!

[@ChrisBlakely]

You're welcome Sergei thanks for the comment!

[@vikashsindhania6149]

hey thanks a lot Love from INDIA..🙂

[@pedrofernandez6799]

Really useful videos to get into React! Thank you.

[@ChrisBlakely]

You're very welcome!

[@AdnS008]

good staff , thanks mate

[@kamaleshpparmar]

Thank you Chris

[@TopTalentBridgecanada]

Thank you so much it's was really helpful for beginner in building logic

[@ChrisBlakely]

I’m glad you enjoyed it !

[@Richislav]

Hello, thank you for your video!

[@WillSmith-qt7me]

Great tutorial. Thanks.

[@mtzfox]

Liked the tutorial a lot! Only issue I noticed is that the color doesn't change orange or blue on the value you'd expect. When increasing it changes orange at 16, but when decreasing it changes blue at 13. Of course I could update the values to fix this, but I'm wondering if has to do with the component only rendering after the next cycle, and if there's a better way to organize my component to update the color on the expected value (15 and 14).

[@woofcode3383]

Thank you, great tutorial

[@paulinegitonga6808]

heeey ..this was really helpful thanks

[@stanfarshtei1291]

Thank you for the project. I was wondering how we can make the buttons keep increasing or decreasing the value while pushed in? Can you make a tutorial on setInterval using React? Thank you for your share, a great beginner project!

[@ChrisBlakely]

Hi Stan! Yeah its possible, you would use the onMouseDown event to call a function that would increment the state by 1 every second (using setTimeOut as you mentioned). Then use the onMouseUp event to stop the timer/function from running. This is a good idea for a mini react project! I'll add it to my list - Thank you!

[@ThePercivalGlyde]

Thank you!!

[@flyflor599]

Thanks!

[@lawalmukhtar1456]

Amazing ❤️❤️

[@ChrisBlakely]

Thanks Lawal!

[@lawalmukhtar1456]

@@ChrisBlakely looking forward to more of this educative content.

[@andybeable8650]

Hi Chris, really enjoyed this. I'm new to JS/React but found this super helpful. One question - I was trying to add an 'else if' statement to the decrease temperature function. I wanted to try and change your eg slightly to have the temp color as hot >= 15, neutral between 5-15 and cold below 5. I thought the following might work, but I must be doing something stupid here.. const decreaseTemperature = () => { const newTemperature = temperatureValue -1; If (newTemperature < 15) { setTemperatureColor('neutral'); } else if (newTemperature

[@ChrisBlakely]

Hey Andy, thanks for the message! Do you want to drop me an email and I can help you a bit better? [e-mail]

[@mohitsaud2071]

In Nepali we say excellent as "kada" and this tutorial is kada

[@ChrisBlakely]

Thanks for watching!

[@Pareshbpatel]

{2021-12-19}

[@ssk7690]

It is imp to note that he uses new temperature instead of temp +1/-1. Just do that in your react app and you'll know why I made this comment.

[@dpak141]

= 30}>+