Build A React JS Weather App - OpenWeatherMap API - Tutorial

[@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]

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]

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

[@archanarai2423]

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]

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]

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

[@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

[@codecommerce]

Thanks man- I know that’s frustrating! Haha

[@obinnailoanya8730]

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]

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

[@melssf7852]

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]

Thank you Mels! That’s awesome!

[@carlosarmandolariosrojas7870]

its simple but very useful, thanks man!

[@codecommerce]

Thanks man!

[@the-boss-98]

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

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

[@codecommerce]

Thanks for the sub! So awesome!

[@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]

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

[@Mahmoud.MFA.Fouad.]

Thanks a lot , the way you explain makes everything easy to understand , I really appreciate it 😊❤❤

[@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) })

[@grzegorzmolin]

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

[@codecommerce]

Awesome dude!

[@pouyabh]

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

[@codecommerce]

Glad it was helpful!

[@Lamamaaaa]

Thankyou so much for this amazing tutorial

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

[@buenvia]

Mate, this was brilliant. Thanks for the tutorial.

[@codecommerce]

Thanks Matt!

[@AparnaDhara-zs2kl]

Really educational for beginners!!

[@palomamorais2384]

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

[@codecommerce]

Thank you Paloma!

[@shanu3682]

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

[@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

[@IamPetrus]

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]

I'm wondering the same thing, way faster workflow

[@ganeshsaladi5932]

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

[@ParthPrabhune-v2w]

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

[@moradgrey1173]

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

[@tsekonya2141]

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]

Glad to hear it!

[@coolguyike]

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

[@ramirorenteria7333]

Thank you for the tutorial! Really learned a lot!

[@vinaygoswami5374]

This is one of the best tutorial for using basic API

[@codecommerce]

Thanks Vinay!

[@engbesher7479]

keep it up best tutorial ever it works with me thanksssssssss

[@codecommerce]

You’re the man! 💪

[@viniciusm.m.7822]

Thanks, dude! Keep it up!

[@thewpwing]

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.

[@knightridergaming1106]

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

[@codecommerce]

Thank you man!

[@GoodGuyHeffy]

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

[@julianmartinez3154]

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

[@codecommerce]

You’re awesome Julian, thank you!

[@Atesz0509]

Really great and simple guide,subscribed!

[@codecommerce]

Awesome, thank you!

[@malinosterberg9877]

Thanks for a great tutorial!

[@codecommerce]

Thank you Malin!

[@Andyruuuu]

Fantastic, thank you!

[@Charbasaur]

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

[@codecommerce]

Thank you dude!

[@tarekmustafa2525]

Great tutorial, thank you.

[@codecommerce]

Thank you Tarek!

[@duytien69]

Thanks for such a great video! i love this

[@codecommerce]

Thank you very much

[@romanlupan7576]

Great tutorial and also a good explanation of each step

[@codecommerce]

Glad you liked it!

[@sheikhrasel854]

Amazing ❤

[@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

[@sablecipher]

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

[@maazmuhammad1013]

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

[@codecommerce]

Will do!

[@lucaspereira5388]

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

[@RohanSharma-dr1vy]

thanks for the video

[@tiagocosta2689]

Great video!

[@codecommerce]

Thank you Tiago!

[@joaquin_carp]

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

[@codecommerce]

Glad it helped! Thank you so much dude!

[@andrei-petrulazar5564]

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

[@codecommerce]

Glad it was helpful!

[@dannykennah2007]

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

[@mohamedboukhanouf]

thank you so much for this video it was amazing project

[@codecommerce]

Thank you Mohamed - cheers dude!

[@adtddeathcore]

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

[@codecommerce]

Gracias 🙏

[@orielamar1620]

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

[@medulla1291]

thanksss!

[@ayxan3950]

Thank you This video is helpful

[@codecommerce]

Thank you sir!

[@kingsleyezikeoha5023]

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

[@anask550]

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

[@codecommerce]

Thank you!

[@abhay_Awasthicarguy7777]

I make this after seeing your video by myself.

[@Abduraxmonm416]

good job my frends bravo

[@kevinm5898]

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

[@codecommerce]

Haha bonus!

[@nedagholami374]

Excellent🤩

[@codecommerce]

Thank you!

[@javohirshirinboyev3533]

Thank you 👍👍

[@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?

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

[@lewisnt_]

good work bro keep it up

[@codecommerce]

Thank you, I will

[@lucasamaral5429]

Great video

[@juancamilomarin7985]

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

[@beeekle]

@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]

does it reference the line of code?

[@vladislavmitkov1580]

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

[@biratdatta]

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]

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?

[@jiyoungkim9258]

So nice 👏

[@codecommerce]

Thank you sir!

[@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

[@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

[@codecommerce]

Thanks dude! Much love! 💪

[@camo4970]

on minute 20:20 , why did you initialize the first state with {} as an object and the second one with "" as a string? how do i know when to use those?

[@archanarai2423]

I think it's because the data is gonna refer to whole json data object where as location is used only to store city name so it's initialized as empty string

[@Denn-t5t]

Which VS code theme do you use? It seems like Dracula, but not exactly. Thanks for vid

[@harshanabatagalla]

Thanks !

[@hawks2271]

Good job👏🇧🇷

[@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

[@stanleylafond4650]

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]

Thanks Stanley - I'll try and be more specific

[@JuNe-rm6pk]

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]

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

[@vevagaanandanpillai]

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

[@michaellevi6743]

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]

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

[@toyosisalami6453]

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]

That's awesome man - Glad it helped!

[@anupprajapati6843]

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]

That would be a nice addition

[@anask550]

what can i use instead of the star at 11:11 ?

[@soumyadipsamanta33]

What happened in 6:43 I didnt get it and how the weather(1).json changes into like that

[@codecommerce]

So I just copied the response and pasted into a js file. When I saved it, the data was formatted nice and “pretty”. I’m using the “Prettier” ext to format all of my code.

[@phild5339]

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

[@aymenbachiri-yh2hd]

thank you

[@nehat786]

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

[@codecommerce]

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!

[@aurrelko]

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

[@codecommerce]

Thank you Aurrel- I appreciate that.

[@vitslama]

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

[@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! 🙌

[@emiliafuks2594]

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]

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!

[@corbinsbeats2540]

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

[@aiortairaan5458]

Which extention have you used for creating div with classname directly using the dot operator?

[@codecommerce]

That is with vs code “emmet”. I believe it comes natively.

[@aiortairaan5458]

@@codecommerce yup got it sorted

[@nyashamusanhu541]

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

[@codecommerce]

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

[@fatmamostafaa8118]

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]

Fatma, do you have a gh?

[@kevinleon4621]

Thanks papi

[@Nomanzafar-g8q]

OnKey press is not working in my visual code can you please tell me

[@longsteinpufferbatch4949]

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

[@archanarai2423]

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

[@rohithuneeks7184]

Should this project contains 2 microservices communicating each other ?