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

In this beginner react project we'll build a temperature control app using React Hooks

🚨 🚨 Jump to 2:10 to skip the creat-react-app setup

What we'll learn:

- How to set up a React project
- Using state to display values
- Changing CSS depending on state
- Updating state using onClick events

COME SAY HI:

This is a new channel so would love your feedback in the comments.

Don't forget to like, share, and subscribe! Thanks for watching!

[kevinweakley]

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

[kensei]

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👍

[carlosl-f]

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

[Kyneticce]

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.

[rohitpal]

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

[shamrosekjan]

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

[jeetsingh-syij]

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.

[abhikgupta]

Here's a cleaner approach : import React, { useState } from 'react'

const App = () => {
const [temperatureValue, setTemperatureValue] = useState(10);

return (
<div className='app-container'>
<div
<div ${temperatureValue < 15 ? "cold" :
</div>
<div
<button onClick={() => {
if (temperatureValue > 0) {
- 1);
}
}}>-</button>
<button onClick={() => {
if (temperatureValue < 30) {
+ 1);
}
}}>+</button>
</div>
</div>
)
}

export default App;

[jennyggf]

Great idea for a beginner project! tnx

[paulinegitonga]

heeey ..this was really helpful thanks

[TopTalentBridge]

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

[ajeigbejohnoluwaseyi]

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

[pedrofernandez]

Really useful videos to get into React! Thank you.

[stanfarshtei]

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!

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

[andybeable]

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) {

} else if (newTemperature <= 5) {
setTemperatureColor('cold');
}

};

[mohitsaud]

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

[SSK-KiNGz]

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.