Build A React JS Weather App - OpenWeatherMap API - Tutorial

Build a React JS weather app using the OpenWeatherMap API. We will be using axios to connect with our API. There are probably a million ways to build a weather app and this is on a more basic level, but a great way to learn a few core fundamentals in React. Let me know what you think in the comments below.

ZeroTo Mastery:

Learn to code here!

OpenWeatherMap API:

Github Repo:

☕ Buy me a Coffee ☕

Instagram 💪

🔥 My Coding Equipment 🔥

[UnknownUnknown-mtoi]

This is my first React project and you made it so simple, interesting and attractive.

[egebarsbozdeniz]

I came here because I was struggling with the undefined reading of temp part. Great solution, very straightforward. Well done!

[doobinl]

Thanks for such a great video, one of the few videos where I was able to follow along the whole way without much hassle and refactoring the tutorial in a modern way just so it works.

[archanarai]

Hey clint awesome work, followed along and completed it.
Made some changes as onkeypress and event is deprecated, and played with css styling too.
Had an idea about axios but didn't implement it, it was fun playing around with code.
Thanks a lot:)

[obinnailoanya]

I started Learning React Last month and it felt different from Vanilla Javascript but you made it simple, after seeing this video, i play around with Rapid API, i am forever subscribed to this channel and if you decide to leave youtube, i will follow you to anywhere so i can learn whatever you know, lol. YOU MAKE IT VERY VERY VERY VERY SIMPLE. Thank you so much Sir

[the-boss-]

I was actually building a similar app by myself and this error 28:07 had me stuck the whole day. Thankfully found this video.

[vasiliskalfopoulos]

very good job
you can also add .catch in search location ,

in case someone type a location that not exist, like dradubau

const searchLocation = (event) => {
if (event.key === 'Enter') {
=> {
setData(response.data)
}).catch((error) => {
console.error('Error fetching weather data:', error);
setLocation('');
});

}

}

[melssf]

this tutorial exceeded my expectations and made things so much easier for me thank you so much! :) i will be following and using your tutorials going forward!

[simranbanwait]

sir you have no clue how much i struggled to find a way to run a function on a key press, , this video helped alot, thankyou so much

[grzegorzmolin]

Yeaaayy! Such a joy making the first reactive api webpage!! 🥳 Thank you very much!

[carlosarmandolariosrojas]

its simple but very useful, thanks man!

[pouyabh]

i'm learning react and i have to say it was a great video for beginners thanks for sharing it

[ElegantCoder]

Great video again just completed it here is the code snippet to check if no city is found
=> {
setData(response.data);
}).catch((error) => {

})

[majebell]

Great tutorial. I've just found your channel, and helped already me a lot! Subscribed! Hope you upload more tutorials/short projects like this!

[Lamamaaaa]

Thankyou so much for this amazing tutorial

[chandrakethans]

Built my first react application thank you so much :)

[moradgrey]

a good extension of that would be changing the background depending on the weather condition

[tsekonya]

Have to say thanks for these videos, was struggling with react for so long but watching these vids has helped me so much. Great content.

[anupprajapati]

What if you entered the city that does not exists, you should add condition to display "City Not Found" for that matter. Otherwise its 10/10 app Great!!!

[Ronifromearth]

man i create apps fine but learning CSS with you really helped me a lot thanks from INDIA brother loved this project a lot