Build A React JS Weather App - OpenWeatherMap API

No video

Build A React JS Weather App - OpenWeatherMap API - Tutorial

Рет қаралды 156,465

Күн бұрын

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:
- Master React JS Course - bit.ly/Learn-R...
- Complete Web Developer in 2023 - bit.ly/Complet...
Learn to code here!
bit.ly/Code-Ch...
OpenWeatherMap API:
openweathermap...
Github Repo:
github.com/fir...
☕ Buy me a Coffee ☕
www.buymeacoff...
Instagram 💪
/ fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

Пікірлер: 248

@UnknownUnknown-mt1oi Жыл бұрын

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

@egebarsbozdeniz6257 Жыл бұрын

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

@codecommerce Жыл бұрын

Thank you!

@doobinl8505 2 жыл бұрын

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.

@codecommerce 2 жыл бұрын

That’s awesome man thank you! Code does become rather dated pretty quickly!

@archanarai2423 7 ай бұрын

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

@jessiefianu6881 6 ай бұрын

Hello there, please can you tell me how you went about the onKeyPress. It's deprecated in mine too so I'm stuck with the code. Secondly my background image only covers 3/4 of the browser, is there anyway I can fix this? Thank you very much and I am looking forward to hearing from you.

@archanarai2423 6 ай бұрын

@@jessiefianu6881 hi, since onkeypress was deprecated I used onKeyDown and it worked fine for me. And for covering your whole background image maybe use object-fit property

@Lamamaaaa Күн бұрын

Thankyou so much for this amazing tutorial

@the-boss-98 9 ай бұрын

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

@melssf7852 2 жыл бұрын

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!

@codecommerce 2 жыл бұрын

Thank you Mels! That’s awesome!

@obinnailoanya8730 2 жыл бұрын

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

@codecommerce 2 жыл бұрын

Thank you so much man! React makes things so incredibly easy!

@nanatieku5805 Жыл бұрын

How's the journey being so far Obinna? I started learning React a few weeks now. It's going quite well so far

@obinnailoanya8730 Жыл бұрын

@@nanatieku5805 I’m a pro now, I use it as the front end to the full stack applications I build, I use typescript too

@grzegorzmolin 2 жыл бұрын

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

@codecommerce 2 жыл бұрын

Awesome dude!

@simranbanwait 2 жыл бұрын

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

@codecommerce 2 жыл бұрын

Thanks man- I know that’s frustrating! Haha

@carlosarmandolariosrojas7870 Жыл бұрын

its simple but very useful, thanks man!

@codecommerce Жыл бұрын

Thanks man!

@vasiliskalfopoulos7848 Жыл бұрын

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') { axios.get(url).then((response) => { setData(response.data) }).catch((error) => { console.error('Error fetching weather data:', error); setLocation(''); }); } }

@codecommerce Жыл бұрын

Thank you sir!

@ElegantCoder Жыл бұрын

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

@pouyabh 2 жыл бұрын

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

@codecommerce 2 жыл бұрын

Glad it was helpful!

@chandrakethans5835 Жыл бұрын

Built my first react application thank you so much :)

@codecommerce Жыл бұрын

Awesome dude!

@varunupadhyay2488 Жыл бұрын

does this api still working? should i follow this video?

@chandrakethans5835 Жыл бұрын

@@varunupadhyay2488 yeah the api working it’ll take sometime to become active after that it’ll work just fine

@dharapandya2045 6 ай бұрын

Is it still working or not? Pls reply @@varunupadhyay2488

@tsekonya2141 2 жыл бұрын

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.

@codecommerce 2 жыл бұрын

Glad to hear it!

@majebell 2 жыл бұрын

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

@codecommerce 2 жыл бұрын

Thanks for the sub! So awesome!

@JehadiHellTransportAgency Жыл бұрын

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

@codecommerce Жыл бұрын

Thanks dude! Much love! 💪

@ganeshsaladi5932 Жыл бұрын

This is just brilliant , perfect tutorial exist , i made my first project for resume hurray

@usmansahi Жыл бұрын

thank you so much.this is really cool and easy to understand. wish you best of luck for more this type of quick learning videos

@knightridergaming1106 Жыл бұрын

A new subscriber from Pakistan , Thanks really simple and straight forward 🥰

@codecommerce Жыл бұрын

Thank you man!

@anupprajapati6843 3 ай бұрын

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

@codecommerce 3 ай бұрын

That would be a nice addition

@palomamorais2384 2 жыл бұрын

perfeeect , i was struggling to implement open weather, but you made it so simple, thanks a lot!!!!!

@codecommerce 2 жыл бұрын

Thank you Paloma!

@shanu3682 2 жыл бұрын

Hey.. I completed react js some times ago and looking for some beginners project. Can u help me with that..

@vinaygoswami5374 2 жыл бұрын

This is one of the best tutorial for using basic API

@codecommerce 2 жыл бұрын

Thanks Vinay!

@js_dev_uk Жыл бұрын

Mate, this was brilliant. Thanks for the tutorial.

@codecommerce Жыл бұрын

Thanks Matt!

@julianmartinez3154 2 жыл бұрын

Appreciate the video. Has made so many things very clear for me. Well done sir, looking forward to future videos.

@codecommerce 2 жыл бұрын

You’re awesome Julian, thank you!

@AparnaDhara-zs2kl 7 ай бұрын

Really educational for beginners!!

@coolguyike 2 жыл бұрын

im just learning react but i enjoy your teaching style, thanks brother!

@moradgrey1173 Жыл бұрын

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

@engbesher7479 2 жыл бұрын

keep it up best tutorial ever it works with me thanksssssssss

@codecommerce 2 жыл бұрын

You’re the man! 💪

@joaquin_carp 2 жыл бұрын

thanks for your video, i really help me! greetings from Argentina.

@codecommerce 2 жыл бұрын

Glad it helped! Thank you so much dude!

@thewpwing 2 жыл бұрын

Hi thanks for such a tutorial. First time using axios and find it very easy. Hope you will show such a small but important tutorial.

@user-ke9kx4tp7c Жыл бұрын

Thank you so much man!!!!! It was really helpful

@Charbasaur 2 жыл бұрын

Great tutorial, I learned a lot. I subscribed and I'm excited for more. Thanks! :)

@codecommerce 2 жыл бұрын

Thank you dude!

@ramirorenteria7333 Жыл бұрын

Thank you for the tutorial! Really learned a lot!

@Atesz0509 2 жыл бұрын

Really great and simple guide,subscribed!

@codecommerce 2 жыл бұрын

Awesome, thank you!

@maazmuhammad1013 Жыл бұрын

Increase the font size of Vs code so its easier to follow along. Thank you.

@codecommerce Жыл бұрын

Will do!

@andrei-petrulazar5564 2 жыл бұрын

Great content! I learned many useful things. thanks a lot !!

@codecommerce 2 жыл бұрын

Glad it was helpful!

@romanlupan7576 2 жыл бұрын

Great tutorial and also a good explanation of each step

@codecommerce 2 жыл бұрын

Glad you liked it!

@viniciusm.m.7822 2 жыл бұрын

Thanks, dude! Keep it up!

@IamPetrus 10 ай бұрын

Thank you for this walkthrough. On 7:48, did you add an emmet extension? figuring out right now how to get that Emmet Abbreviation suggestion to keep saving time. Current emmet extensions I have do not throw me options like yours

@DeyDreamMusic 9 ай бұрын

I'm wondering the same thing, way faster workflow

@duytien69 2 жыл бұрын

Thanks for such a great video! i love this

@codecommerce 2 жыл бұрын

Thank you very much

@malinosterberg9877 2 жыл бұрын

Thanks for a great tutorial!

@codecommerce 2 жыл бұрын

Thank you Malin!

@Hoesayyyyyyy 2 жыл бұрын

Hell yeah man thanks explained everything perfectly i am going to try making a train schedule app now

@codecommerce 2 жыл бұрын

Glad I could help - that sounds like an awesome project dude!

@Hoesayyyyyyy 2 жыл бұрын

@@codecommerce thank you my brother you helped me out a lot

@tarekmustafa2525 Жыл бұрын

Great tutorial, thank you.

@codecommerce Жыл бұрын

Thank you Tarek!

@sablecipher 3 ай бұрын

Thanks so much! This was great. Quick question, when it comes to pushing to GitHub, how do we hide the API key?

@mohamedboukhanouf 2 жыл бұрын

thank you so much for this video it was amazing project

@codecommerce 2 жыл бұрын

Thank you Mohamed - cheers dude!

@adtddeathcore 2 жыл бұрын

esta tan bien explicado que aun sin dominar el ingles se entiende perfecto, excelente tutorial

@codecommerce 2 жыл бұрын

Gracias 🙏

@sheikhrasel854 Жыл бұрын

Amazing ❤

@hcw1566 Жыл бұрын

This tutorial really helps me to practice React with API~ At the end of the course, I found that while refreshing the website , the unit of temperature would still exist .I’d say that because it was written in ".top" not in ".bottom" . Was it right? Then i am trying to change the backgroung URl via using Pexel API . Hope it works.~~~

@codecommerce Жыл бұрын

How are you making the API call?

@hcw1566 Жыл бұрын

@@codecommerce Pexel API can be used by searching pictures whatever keywords you want , with the location in weather website , it can search the weather and the pic at the same time ,and if i can't seacrh the city that i would use the default pic to display . But i did come up with a problem that i still can't figure it out , screen would flickered with the default pic while refreshing or searching new location . Sorry about that my English isn't really good.

@Andyruuuu 2 жыл бұрын

Fantastic, thank you!

@kingsleyezikeoha5023 2 жыл бұрын

an amazing video , thanks for this ,will be locked into your channel

@anask550 2 жыл бұрын

can you please help me at 11:11 , the star wont work, what else can i use instead of it?

@codecommerce 2 жыл бұрын

Thank you!

@JuNe-rm6pk 2 жыл бұрын

Very good tutorial! Really helpfull! 👍 Maybe can we wish for a tutorial about a travel map app. something like that? That would be great. Thank you! 🙏

@codecommerce 2 жыл бұрын

Great suggestion! That would really be cool - add in google map API!

@RohanSharma-dr1vy 2 ай бұрын

thanks for the video

@dannykennah2007 Жыл бұрын

what happens if the user enters something that isn't a city? its not really finished.

@nikebelias7527 Жыл бұрын

Use an extension to right import react from 'react'';.... This extension named: ES7+ React/Redux/React-Native snippets Then right rafce in each react functional component, for class based component rcc

@toyosisalami6453 2 жыл бұрын

Thank you so much for this tutorial! It was really fun and I learned a lot, including a previously unknown (to me) JavaScript method: toFixed()

@codecommerce 2 жыл бұрын

That's awesome man - Glad it helped!

@kevinm5898 2 жыл бұрын

Love the tutorial! First city entered is my city! Haha

@codecommerce 2 жыл бұрын

Haha bonus!

@bhargav8263 Жыл бұрын

great tutorial, thank you

@varunupadhyay2488 Жыл бұрын

does this api still working? should i follow this video?

@bhargav8263 Жыл бұрын

@@varunupadhyay2488 yes working,api works after half an hour

@juancamilomarin7985 Жыл бұрын

Soy de colombia muchas gracias por tus videos por tu enseñanza mil gracias

@ayxan3950 2 жыл бұрын

Thank you This video is helpful

@codecommerce 2 жыл бұрын

Thank you sir!

@lucaspereira5388 Жыл бұрын

hello men great video but the current API don't have the location parameter, only the latitude, and longitude

@tiagocosta2689 Жыл бұрын

Great video!

@codecommerce Жыл бұрын

Thank you Tiago!

@okage_ Жыл бұрын

hi, i made a seperate component for the search and for the actual information, how would i get the weather info from the search component to the information component so it can be displayed?

@Abduraxmonm416 5 ай бұрын

good job my frends bravo

@nedagholami374 2 жыл бұрын

Excellent🤩

@codecommerce 2 жыл бұрын

Thank you!

@javohirshirinboyev3533 Жыл бұрын

Thank you 👍👍

@jinda002 Жыл бұрын

Im not sure what im doing wrong but the ${location} in the URL string doesnt update from the input.. my axios is getting error

@lucasamaral5429 Жыл бұрын

Great video

@stanleylafond4650 2 жыл бұрын

Thanks for the tutorial. One suggestion: It would be helpful when you are setting up files to explain what you are doing rather than saying "let's do that there", 7:36

@codecommerce 2 жыл бұрын

Thanks Stanley - I'll try and be more specific

@GoodGuyHeffy 11 ай бұрын

at 26:46 I keep just getting axios 404 errors. On the open weather site I had to scroll way down to find the API call example in this video. Says its no longer being supported, and the newer version uses Latitude and Longitude. Anyone know how to fix? API stuff is where im the weakest rn and I have a React interview in 2 days :/

@lewisnt_ 2 жыл бұрын

good work bro keep it up

@codecommerce 2 жыл бұрын

Thank you, I will

@emiliafuks2594 2 жыл бұрын

Hi, thanks for this. Really helpful. I'm just wondering why you're keeping your API Key just hanging there out in the open? Any reason for that?

@codecommerce 2 жыл бұрын

Hi Emilia! No- I should’ve put it in a .env file 🤫😏 hehe

@chucknorris7995 Жыл бұрын

@@codecommerce Do you have a video on .env files? I've been meaning to figure how to use them. Also, the feature: get current weather data by city has been depracated. Is still works tho. I been trying to get the coordinates from their geolocation api and then pipe that in to another api call.Kinda struggling with it. lol Thanks for the awesome content!

@harshanabatagalla Жыл бұрын

Thanks !

@aurrelko 2 жыл бұрын

Thanks for tutorial buddy, just wanted to say that your warning it was in line 43 need to be ( !==).

@codecommerce 2 жыл бұрын

Thank you Aurrel- I appreciate that.

@hawks2271 Жыл бұрын

Good job👏🇧🇷

@florencioaverroes7104 Жыл бұрын

I made a project like yours, following all those steps and I've finishided it. But, my extension "Live Server" isn't working all at. I've tried every option to have my project displaying on my browser and I couldn't. The things I've tried: - host IP; - choosing another browser; - windows's default browser; - linking CSS to ReactJS; - opening the project with the directory of origin; - naming the folders correctly. Do you have another option to suggest me? -- If you can help me out, I will be pleased. I need your help 😢😢😢 Anyways, buddy, nice tutorial and great job! Congrats!

@vevagaanandanpillai 3 ай бұрын

I was scratching my head because of the back ticks in the "url" variable. 😂

@kevinleon4621 7 ай бұрын

Thanks papi

@jiyoungkim9258 2 жыл бұрын

So nice 👏

@codecommerce 2 жыл бұрын

Thank you sir!

@aymenbachiri-yh2hd 8 ай бұрын

thank you

@damienchung1409 Жыл бұрын

How can I deploy this project for showcase?

@codecommerce Жыл бұрын

Heroku or GitHub pages are both free & easy! I have a video on both - super easy! 🙌

@nehat786 2 жыл бұрын

Great content it would be great if we see some easy more stuff with some bootstrap or material css

@codecommerce 2 жыл бұрын

I should familiarize myself a little better with CSS libraries. I'm not a huge fan of bootstrap however I think material and tailwind is a little more appealing!

@corbinsbeats2540 29 күн бұрын

Yeah but when you type in a wrong cuty it passes an eeror 404 in the console exposing your api key. How to fix???

@michaellevi6743 2 жыл бұрын

Awesome work Clint. Is there a way to have it automatically display from your browsers location vs. searching for a location. I haven't watched your whole video yet so not sure if you covered it or not

@codecommerce 2 жыл бұрын

Thank you sir! I didn’t even think about that, but I’m sure you can!

@isurudeshan420 10 ай бұрын

thanks

@orielamar1620 2 жыл бұрын

I didnt understand what you did with the json file of the API result on 6:42. can i get an explaination of what was that and how to do it ? please :)

@vitslama Жыл бұрын

Mby use bootstrap next time it would save a lot of time with the styling

@phild5339 Жыл бұрын

how could you alter this project so that you have a "gallery" of the different weather data for differnet locations?

@xnetch2024 Жыл бұрын

20.01 for stating state main part

@fatmamostafaa8118 2 жыл бұрын

I have a proplem everything is going well except when i take the weather.json data inside the file are not shown can you help me please

@codecommerce 2 жыл бұрын

Fatma, do you have a gh?

@rohithuneeks7184 Жыл бұрын

Should this project contains 2 microservices communicating each other ?

@longsteinpufferbatch4949 Жыл бұрын

Why is my onkeypress slashed out? Any help will be appreciated

@archanarai2423 7 ай бұрын

It's deprecated now since it won't work in all browser, instead onKeyDown is used

@victoria-exito 2 жыл бұрын

Hi! Thanks for your video! It is excellent!! Could you set up the wrapping text for your code? That way we will be able to see your code lines at any time! God Bless you! :)

@codecommerce 2 жыл бұрын

Thank you - I'll try and keep that in mind.

@devenderkumar-pr6ig 2 жыл бұрын

I having a issue i am not able to see bottom details(humidity,wind speed etc)/below the page its showing white space only

@beeekle 2 жыл бұрын

@20:54 when I input the ${location} it throws the warning "Unexpected template string expression. eslint(no-template-curly-in-string)" and when i test it in the dev tools it gives a 404 error

@codecommerce 2 жыл бұрын

does it reference the line of code?

@vladislavmitkov1580 2 жыл бұрын

I have the same problem, and can't find a solution.

@biratdatta 2 жыл бұрын

I am having the similar issue with 404 not found . I guess it is not unable to fetch data from the API and also the onkeypress={SeachLocation} doesn't work for me

@camo4970 2 жыл бұрын

make sure you put this line of code in between backticks ` ` and no quotation marks ' ' . this as a template literal otherwise it wont work

@wh0knowsprez Жыл бұрын

@@codecommerce I have the same problem, It does not distinguish the ${location} between the api link (it counts it as one whole link). Any tips to resolve this?

@nyashamusanhu541 2 жыл бұрын

What if I want to print those responses to any specified file format like csv?

@codecommerce 2 жыл бұрын

Hi Nyasha, I would have to look that up. I am not sure off the top of my head.

@emmanuelmensah9279 2 жыл бұрын

Hey guys was struggling to fetch data from the API, was getting error 401 at some point and invalid api key. But after passing "{}" in the data and setData's useState it started working perfectly. I think the API response is in an object format. Hope this will be a bit helpful because I think similar people encountered same problem

@codecommerce 2 жыл бұрын

Emmanuel - yes, you are correct. You have to set your “data” state to and empty object.

@anask550 2 жыл бұрын

how? can you write it please?

@miguelcosta4450 7 ай бұрын

what you do to not exceed the request limit

@codecommerce 7 ай бұрын

unfortunately nothing..

@zaidtehsin7096 Жыл бұрын

Not working anymore event is deprecated

@codecommerce Жыл бұрын

Sorry :(

@michaellevi6743 2 жыл бұрын

Hey Clint hope all is well brother/ So I have a question for you, is there a way to make the hamburger sub menu auto close. As it stand now if you open the menu and increase the size of the screen the menu stays open and then you have to reshrink it to get the "x" back to close the menu out. Any suggestions?

@codecommerce 2 жыл бұрын

I didn't even realize that - sorry man! We should be able to add "hidden" in a media query.