Build a Weather App in React JS | React JS beginner Tutorial

Learn how to make a Weather app in React JS, we use the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch AP along with React hooks and conditonals.
A React JS Project
Day 11 #31Days31Videos
Source Code: github.com/TylerPottsDev/weat...
// JOIN THE DISCORD
/ discord
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
FOLLOW ME ON TWITTER!!!
/ tyler_potts_
LIKE, SUBSCRIBE & SHARE
Music
DEAF KEV - Invincible (NCS Release)
Neffex - Grateful (NCS Release)

[@crazycat2969]

14:00 Guys u don't even need that long code to build date. You can just easily take the date object and convert it to string (date object return day, month year...) For example: let date = String(new window.Date()) date = date.slice(3,15) In my case date returns: May 25 2020

[@axeljacob4632]

|| let today = new Date().toLocaleDateString() || let today = new Date().toDateString();

[@gallant7661]

I have these issues. What did I do wrong? 'api' is assigned a value but never used no-unused-vars 'day' is assigned a value but never used no-unused-vars 'date' is assigned a value but never used no-unused-vars 'month' is assigned a value but never used no-unused-vars 'year' is assigned a value but never used no-unused-vars Unexpected template string expression no-template-curly-in-string

[@alexsmith-rs6zq]

You don’t have to but it allows you to format the date in the way you want it to display. It’s a stylistic choice not bad practice.

[@PeachiiWubs]

@@gallant7661 in vscode get the extension eslint. then hover over the code with "no-unused-vars" and hit quick fix then click the disable no-unused-vars for the whole file.

[@NoobMaster-nr3jw]

no way it Elon Musk!!!!!! 😱

[@dremiq6670]

let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

[@Thejusticier44]

True hero

[@dremiq6670]

@@Thejusticier44 Kappa

[@tejasvigupta07]

Initially I thought why this comment got so many likes but now that I am building my own App

[@dremiq6670]

@Joshua (Nakjun) Paik i got u my g

[@bhagyashingale5663]

{new Date().toDateString()}

[@Haldinyar]

I learned a lot about CSS in this React tutorial lol.

[@sidheshwartiwari9834]

I knew someone will say it.

[@ramitpanangat7855]

What we learned? ------------- CSS 75% ----- React 25%

[@preciousegwuenu2938]

@@ramitpanangat7855 likeeee

[@ELGANDUZ]

Thank you for the video! You're great at explaining and straight to the point

[@antoine483]

thanks for this awsome tutorial, that was clear, well explain, never too slow or too fast ! Great job !

[@Lohitpant]

Thanks for this tutorial bro. While going through the Weather API site, I noticed that it provides info in Hindi also which is my native language. I added lang parameter in my api query and changed the days and months name in Hindi. Voila! I have a weather app in Hindi now. let months=["जनवरी",'फरवरी', 'मार्च','अप्रैल','मई','जून','जुलाई','अगस्त','सितम्बर','अक्टूबर','नवम्बर','दिसम्बर']; let days=["रविवार",'सोमवार','मंगलवार','बुधवार','गुरुवार','शुक्रवार', "शनिवार"]

[@snehaagarwal6451]

my code not working! please help! i am using npm. ..cant fetch Api

[@deekshithanand3094]

I had never done this much CSS in my previous tutorials! Thanks, buddy learnt a lot...

[@buncha1499]

Great tutorial, thank you bro! One tip that is a great new feature, you can use optional chaining to replace the ternary for truthy or falsy results...

[@arshanaatapattu]

This is very begginer friendly, keep up the good work. Thanks a lot Tyler.

[@TylerPotts]

Glad it was helpful!

[@nicksmith9640]

Great tutorial. I like how there was no fluff in it.

[@TylerPotts]

Thank you! 😊

[@khuloodfahad7485]

Thank you so much for this tutorial, I loved it! and BTW you have a lovely personality which make this video more enjoyable.

[@TylerPotts]

Oh thank you!

[@jessicaterryberry8795]

This was super helpful! I'm currently interviewing for a position that uses React, and I've never done much coding with it.

[@PeachiiWubs]

thank you this was DOPE! learned a lot on css and react.

[@TylerPotts]

Glad it helped!

[@teacherissagadem2769]

you just import everythings you need in react, it's wonderful

[@mohanedesmail]

Transition Error you must type s after the number transition: .4s ease;

[@TylerPotts]

My bad... I was so tired when I recorded this... haha Thanks!

[@vishaldaryanani7757]

@@TylerPotts Hope you got some rest :D

[@klarnorbert]

@@TylerPotts About the audio: in your video editing software, delete the trash audio channel, then make the right mono channel as stereo.

[@manmeetsinghchhabra3923]

it still not worked

[@rafeeque3593]

thanks bro

[@wesamal-shaibani8157]

Thanks for the awesome tutorial. I just added a few lines to view different picutures depending on the weather

[@MegaMagnax]

Learned a lot from this tutorial, helped me build mine !! New sub

[@ZK27RS08]

I am a beginner and I really loved this in my initial learning.

[@thatdudelos9074]

Trust me I learned way more from you than you will from me. The reason the transition wasn't working in your CSS code was due to not adding the "s" per the documentation for the transition property. Rather than just having transition: 0.4 ease-out; it should actually be //added an "s" transition: 0.4s ease-out; This was an amazing walkthrough and lesson. Thank you!

[@snehaagarwal6451]

my api is not working ...plzz help!

[@TylerPotts]

Yeah I noticed afterwards 😂 My bad thank you! :D

[@luisacavalcanti3665]

@@snehaagarwal6451 Mine didnt work too

[@Ebishenmansfield]

@@luisacavalcanti3665 why not

[@Ebishenmansfield]

@@snehaagarwal6451 what error?

[@imagine9085]

I Love your channel! Thank you for all your tutorials

[@TylerPotts]

Glad you like them!

[@anthonygrear6226]

Well done. I learned a lot.Thanks!

[@TylerPotts]

Glad it was helpful!

[@MohamadMohamad-pl4eb]

you are the only youtuber that make real projects, keep it up.

[@TylerPotts]

Thanks, will do!

[@jeremyAr]

This is very therapeutic

[@nick598l4d]

Great tutorial, I learned a lot.

[@hayfachouchene1285]

amazing tutos ! amazing channel ! kepp going ♥

[@khoilam7569]

verry clean thanks alot sir

[@diegoalfredo2467]

thank you so much! greetings from Mexico

[@MrRonzy123]

Thanks for the tutorial.

[@santiagotorres8680]

Thanks for sharing us your knowledge! you are amazing... I've learned a lot thanks to you :)

[@TylerPotts]

Thank you! :D

[@TomWalshHud]

great video! thanks very much :)

[@nargesnahri1651]

Thank you so much ,it was useful for me

[@mustknow58]

You are awesome dude 💓 Love from India

[@michaelguzman2294]

Amazing. Thanks!

[@dimalavrenov3916]

Thanks, man. It was a good night

[@ManishKumar-xt6kf]

Thank you so much brother Thank you so much The code was clean and very easy to understand. Thank you again

[@iconicwebdesigners6764]

lovely tutorial .... straightforward to understand and easy to follow thank you... thumbs up from me

[@TylerPotts]

Thank you!

[@ilkhomjonkhudoyberdiev5619]

thanks for the awesome video , really like it

[@syednomanahmed3526]

Quick, to the point and EXCELLENT work man. I learned a lot from this video. God bless you. (y)

[@aayushkumar2736]

I declared the transition for app warm class and it worked

[@ragulmurugesan7182]

Great Video Man. Thanks!

[@TylerPotts]

Glad you liked it!

[@JovanMatthewIvander]

Really Nice content broo, it helps me alot :)

[@mstfsgdc]

Awesome tutorial, thx

[@TylerPotts]

Glad you liked it!

[@avinashmahanthi6688]

Greate tutorial learned both react and CSS also

[@TylerPotts]

Glad it was helpful!

[@mrdjanz5177]

for that transition i used -webkit-transition: all 0.2s ease-in; and it worked pefectly. tnx for tutorial its great

[@TylerPotts]

Thank you! :D

[@cannacare4467]

"And the arrow function which takes the D....heh...heh...heh" LOL Made my day.

[@osamayousuf6135]

God Bless you i learned a lot from this video thanks mate

[@rushdude87]

Great video, very helpful! I find your syntax highlighting incredibly useful, mine is just orange white and blue. It makes it difficult for me to distinguish variables etc. Is that a VS Code extension or a theme of some sort?

[@aganithshanbhag2296]

Great Tutorial

[@TylerPotts]

Glad you think so!

[@lucianomariano]

I love It! Ty very much

[@The-Empowerment-Engine]

thank you for this

[@adithyaajay1097]

Cool Video! Keep making

[@tuanconandoyle9674]

That is a amazing work, thank you!

[@avinashmurmu9070]

i didn't know how to use free apis because everytime they had this api key stuff and i used to get stuck all the time. Also I learned how to query and onKeyPress handler thing and search only when the user hits enter🔥.... Thank you so much❤️

[@TylerPotts]

You're very welcome!

[@metquadi]

thank you man

[@stanis_ts]

thanks! awesome!

[@TylerPotts]

Thank you;

[@hoangcongson4146]

Thank you so much

[@vikramjeetsingh1766]

nice tutorial mate

[@TylerPotts]

Glad you liked it

[@abubalo]

Great project 👍from 🇳🇬

[@ezeibarra3110]

Hi! Great tutorial! You fotgot the “s” of seconds in the transitions atributte. Answer: transition: 4 east-out; Correct Answer: 4s east-out;

[@TylerPotts]

Thanks for that!

[@justturner9702]

Thanks

[@justturner9702]

Any idea how I’m going to save everything so i can open it after I’ve closed it?

[@abanerjee3704]

"The arrow function takes the d" *laughs- that got me XD. Great content mate, keep it up🤘🤘.

[@CK-uv9zu]

great video

[@zyan5544]

thank you so much sir this amazing content

[@TylerPotts]

Glad you liked it

[@yossia4389]

You genius thanks alot !

[@TylerPotts]

You're welcome!

[@luisacavalcanti3665]

Works perfectly!!! (: thanks a lot

[@TylerPotts]

You're welcome!

[@chicagonorthside613]

Thank you!

[@TylerPotts]

You're welcome!

[@adityawanjale2000]

Great video 🔥... The way to fix transition - add a unit ('s') after the transition value in index.css file... Like - transition : 0.4s ease-out;

[@tasjehale]

I’m ready, will be here in 12 hours! :-)

[@TylerPotts]

Whoops, I'll have to head home and set it for 3 😁😂

[@tasjehale]

Tyler Potts Hahaha did you mean to set it for 3PM?

[@TylerPotts]

@@tasjehale It was supposed to be 1PM UK time today... xD

[@dannyman2200]

Nice video!

[@TylerPotts]

Glad you enjoyed it

[@nehemiahlimocheburet1411]

nice one here

[@fertuna5714]

Thank you

[@TylerPotts]

You're welcome

[@Hamza-so9wx]

wow thanks

[@yoga-world369]

Very nice tutorial. btw, I have a question. how do you usually build/deploy react app to production with NO source map? The files are minimized when I use "react-scripts build" (created using create-react-app), but I get the complete source code and source map from Production deployed app. Appreciate your response on this.

[@electrotsmishar]

thank you

[@MD-dw5ee]

i like your desktop background wallpaper could you plz tell me where did get it from or did you make it on your own, great tutorial btw

[@StreetCertifiedRecords]

Hey mate, really appreciate the content here! I am just starting out with React and I am wondering if you can recommend any must-have plugins for your IDE? I am running Sublime Text at the moment. Thanks heaps.

[@lostnfound8014]

use visualstudio or webstorm (many plugins are available there one of the best is live loader which will load all the component you changed act as a watcher, then colored brackets to make your code readable etc.)

[@NERO-ez1mn]

holy shit the IF ELSE statements are so advance for me haha and the TYPE OF should have a seaparate tutorials and FOR LOOPS please we need an in depth noob lesson here haha if it is ok for you please. the way you code is mindblowing in a good way. a brain workout haha

[@AMITYADAV-nw9mx]

Thanks for the video Tyler. Wanted to ask that, can we make the background change using just vanilla javascript(not using react)?

[@TylerPotts]

Yes, absolutely

[@JKTCreation]

Nice video. I got a question, can we turn this app (developed in reactjs) into android/ios app? or it needs to rewritten completely in react native? because one thing in react native, everything is compiled into the apk, so slight layout changes needs to be recompiled and deployed to app store. cmiiw

[@juliollina]

muy buen video ...me funciono muy bien y aprendí mucho del tema que estoy estudiando💣💥💥💥💥💥💥

[@AjayDavis1995]

Yo thanks for the great tutorial bro. I just have a question. How can I change the background image based on the main property from the json file? Like, if I have an image for clouds and another for rain, how do I change that?

[@34rbie]

wow , thanks!!

[@TylerPotts]

You're welcome!

[@mihai-alexandrubujor9826]

Hey! I have a small issue. At 27:28 when you type the name of the city and press enter I don't get anything, my page remains blank(not really blank, but you get the point). Do you have any idea on why is this happening?

[@arfataara4329]

It needs an active internet connection, that could be one reason, another reason is that the city doesn't exist, like due to a typo or something

[@carolinacarrilho1289]

Hey! I have the same issue here, how did you solve it? Thanks a lot

[@daitoakyoeiken7735]

The transition property should have a 's' appended to time as per documentation. However,I was using Firefox so I still didn't get the transitions. Then I viewed in Edge and it worked fine.

[@TylerPotts]

Yeah I was just being blind xD

[@paulrodriguez3198]

For the person who saw React yesterday first time that took time to understand

[@yakubyakubov7799]

Amazing

[@jaihind28]

at 4:33 time in video FROM WHERE HAVE YOU TAKEN THE BASE !!! after the key input

[@MrBradubes]

@Tyler Potts Thanks for the tut, just one thing though, the font is very tiny. It would be better if you bump it up a bit on your next vids.

[@calebcadainoo]

32:22 in the index.css it should be transition: 0.4s ease; you left out the s or seconds for the timing

[@tefomotaung]

this worked for me. thanks!

[@manonfire3]

Hi Tyler, I really appreciate this tutorial! For someone trying to learn JavaScript/React this was extremely helpful! Quick question for you. At about the 21:17 mark you wrote "const [query, setQuery] = useState('');" and what I'm trying to figure out is what that is called by setting those variables within the array? Is this the same as declaring query and setQuery equal to useState(''); but in just one line rather than two? This is the first time I've seen an array used after const. Would this work the same with var? I appreciate the help for a beginner like me!

[@manonfire3]

Ah shoot I should have looked further. Realized I was focusing on the wrong thing here. For anyone new to React that was confused like me, this is part of React's Hooks: reactjs.org/docs/hooks-reference.html Again thanks for the tutorial Tyler!

[@melissaarias2444]

I missed it. Thanks to notifications am here. Dont delete the video pls

[@TylerPotts]

Hi, I won't delete it ever! 😁

[@rafeeque3593]

thanks manh.

[@TylerPotts]

You're welcome!

[@WebDevSurvivalGuide]

For anyone following along who cannot get the transitions to work, you need to make the ease out transition be 0.4s (s for seconds) instead of just 0.4. Nice tutorial!

[@TylerPotts]

Hahaha I was a little tired when I recorded this... my bad xD Thank you :D

[@jayfiled]

Why isn't this comment at the top? Thank you :-)

[@kamalsharma2839]

Which extensions are you using to automatically space (enter space on pressing enter and retain the space after saving) and auto renaming and auto closing tags??? I have Prettier and Auto Rename and Auto Close extensions, but they are not working as usual in React Projects like in HTML, CSS, and JS projects (Vanilla JS)

[@Carrum250]

25:00 onkeypress fires everytime a key is pressed, so when i try to type in my location, it basically searches when i type in one letter, as opposed to the entire string. Any advice?

[@TylerPotts]

Make an if statement for the key you want to press instead! So do if (event.keyCode == KEYCODE) { SEARCH_FUNCTION} Hopefully that makes sense

[@leomonz]

got teh openweather api and key myself, but getting 401 unauthorized error...

[@Vyp3rs]

@25:29 - What did you mean by ‘it hasn’t updated yet’? Not sure what part I overlooked, but I thought that was it was fine to console log weather at that point in the code

[@surajoberai]

No, updating the state is asynchronous, so it takes time . if you wanna log weather , you can use useEffect hook.

[@ninad1902]

hey your tutorial is awesome, just had 1 question- if we observe the website you created on a laptop(laptop resolution) then the background image gets zoomed in, do you have any solution about this? (i think the website is either not responsive or the there is a problem with the image) please respond

[@arbros9093]

The website is not responsive ... the images he chose for the background are for mobile resolution.

[@jonasc8569]

Hi, thanks for your video. Is it possible to use 'backgroundImage' to change the background picture?

[@darknessfalls6478]

You forgot to put the unit of 0.4 Correct one:0.4s ease-out

[@patrizian2809]

On line 15, for the transition, you are missing the 's' It works with: -transion: 0.4s ease-out;