Build a Responsive Weather App in React JS | Beginner React JS Tutorial

🚀 React 18 + TypeScript Course - 50% Discount

My take on responsive weather app in React JS, we use the OpenWeatherMap API to fetch current weather data. We will use react hooks and modern JavaScript to build this application. This project is beginner friendly.

✅ Source Code & Assets

🌎 Connect:

📚 Material:

#react #weatherapp

[malhareshivam]

This is easy to understand instead of creating extra variable.

//dynamic Background Image

if(data.temp>20){
setBg(hotBg);
}
else{
setBg(coldBg);
}

[abhishekkumar-felw]

how do i get icon url, you opened the image by already finished project of yours, how do i access it?

[muhammadraflipratama]

Thank You Mate, You are very good at explaining things that are difficult to understand, can't wait for the next amazing project !!!

[BrianKarmo]

Thank you for going into detail from the css to the final build, i refined and refactored this project a tad bit and now is my go to on my portfolio for now lol🙏

[dilyafruzik]

Hi! It's the first video in english i've seen for my it-studies. It's clear. Thank you

[SolzheBitsyn]

I'm three minutes in and I can already tell this is going to be a fantastic tutorial

[joaquin_carp]

Yash enjoyed your video very much, thanks and greetings from Argentina.

[tomastefan]

Can you give me some hints on how can I add an Autocomplete on the search bar for the cities ? Thanks !

[sulemanimtiaz]

Can we access data other than Open Weather API???

[vinaypanchal]

Really loved your video one my first api project is was planning to do thanks bro.

[manojkumarparuchuri]

Another amazing tutorial you are changing so many people lives thanku so much

[aloksharma]

I'm building my first project in reactJS and tbh for the first 30 mins I was super happy but after that I felt like a shit. But great work man! Great video. ✨✨

[sunbirdthewayoflife]

Anyone facing a blank screen even if your codes were working just fine. Any suggestions?----
I was using the default value (null) and it causes a blank screen after reloading the screen but using (' ') as a default value solves the issue. Thanks 🙏

[chunkwanchan]

for text content of the unit toggle button, can I use
{units === "metric" ? "°F" : "°C"} or
is it more common to change it with DOM.innerText in the video?

[raneemaljamal]

I try it its amazing thank you for this tutorial

[sanyamjain]

Please make a shopping cart app using reducer and context

[tejusgroup]

Good Morning, Rock Star Yash.. This is amazing weather app using React and CSS, Responsiveness is superb !! and Your Camara quality is good and sound quality is crystal clear🔊
Happy Coding Brother

[YALITTLLE]

im a starter, so i could not understand one thing, from where did you get the six datas of icons? please answer 😢

[jritzeku]

How do you go about deciding which option to use for css on a React project(css, tailwind, bootstrap ) ?

[troynelson]

What if you live in the US and wanted to add the state? We have several cities with the same name and I don't see the state attribute in the openweatherapp api