Build a Weather App in React JS | React JS beginner Tutorial
HTML-код
- Опубликовано: 10 янв 2020
- 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 RUclips
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)
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
True hero
@@Thejusticier44 Kappa
Initially I thought why this comment got so many likes but now that I am building my own App
@Joshua (Nakjun) Paik i got u my g
{new Date().toDateString()}
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
||
let today = new Date().toLocaleDateString()
||
let today = new Date().toDateString();
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
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.
@@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.
no way it Elon Musk!!!!!! 😱
I learned a lot about CSS in this React tutorial lol.
I knew someone will say it.
What we learned?
------------- CSS 75%
----- React 25%
@@ramitpanangat7855 likeeee
I had never done this much CSS in my previous tutorials! Thanks, buddy learnt a lot...
thanks for this awsome tutorial, that was clear, well explain, never too slow or too fast ! Great job !
Thank you for the video! You're great at explaining and straight to the point
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...
Thank you so much for this tutorial, I loved it! and BTW you have a lovely personality which make this video more enjoyable.
Oh thank you!
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=["रविवार",'सोमवार','मंगलवार','बुधवार','गुरुवार','शुक्रवार', "शनिवार"]
my code not working! please help! i am using npm. ..cant fetch Api
This was super helpful! I'm currently interviewing for a position that uses React, and I've never done much coding with it.
This is very begginer friendly, keep up the good work. Thanks a lot Tyler.
Glad it was helpful!
Thanks for the awesome tutorial. I just added a few lines to view different picutures depending on the weather
Learned a lot from this tutorial, helped me build mine !! New sub
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!
my api is not working ...plzz help!
Yeah I noticed afterwards 😂 My bad thank you! :D
@@snehaagarwal6451 Mine didnt work too
@@luisacavalcanti3665 why not
@@snehaagarwal6451 what error?
you just import everythings you need in react, it's wonderful
I am a beginner and I really loved this in my initial learning.
thank you this was DOPE! learned a lot on css and react.
Glad it helped!
Thanks, man. It was a good night
Great tutorial. I like how there was no fluff in it.
Thank you! 😊
you are the only youtuber that make real projects, keep it up.
Thanks, will do!
Thanks for sharing us your knowledge! you are amazing... I've learned a lot thanks to you :)
Thank you! :D
I Love your channel! Thank you for all your tutorials
Glad you like them!
verry clean thanks alot sir
Thank you so much brother
Thank you so much
The code was clean and very easy to understand.
Thank you again
amazing tutos ! amazing channel ! kepp going ♥
Transition Error you must type s after the number
transition: .4s ease;
My bad... I was so tired when I recorded this... haha Thanks!
@@TylerPotts Hope you got some rest :D
@@TylerPotts About the audio: in your video editing software, delete the trash audio channel, then make the right mono channel as stereo.
it still not worked
thanks bro
This is very therapeutic
Great tutorial, I learned a lot.
Well done. I learned a lot.Thanks!
Glad it was helpful!
lovely tutorial .... straightforward to understand and easy to follow thank you... thumbs up from me
Thank you!
You are awesome dude 💓
Love from India
Quick, to the point and EXCELLENT work man. I learned a lot from this video. God bless you. (y)
"And the arrow function which takes the D....heh...heh...heh" LOL Made my day.
thank you so much! greetings from Mexico
Amazing. Thanks!
Thank you so much ,it was useful for me
Really Nice content broo, it helps me alot :)
Great Video Man. Thanks!
Glad you liked it!
Cool Video! Keep making
I declared the transition for app warm class and it worked
thanks for the awesome video , really like it
Thanks for the tutorial.
That is a amazing work, thank you!
for that transition i used
-webkit-transition: all 0.2s ease-in;
and it worked pefectly. tnx for tutorial its great
Thank you! :D
Great Tutorial
Glad you think so!
God Bless you i learned a lot from this video thanks mate
Awesome tutorial, thx
Glad you liked it!
great video! thanks very much :)
I love It! Ty very much
Greate tutorial learned both react and CSS also
Glad it was helpful!
great video
thank you for this
thank you man
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❤️
You're very welcome!
thanks! awesome!
Thank you;
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?
"The arrow function takes the d" *laughs- that got me XD. Great content mate, keep it up🤘🤘.
Works perfectly!!! (: thanks a lot
You're welcome!
Great project 👍from 🇳🇬
Nice video!
Glad you enjoyed it
Hi! Great tutorial! You fotgot the “s” of seconds in the transitions atributte.
Answer: transition: 4 east-out;
Correct Answer: 4s east-out;
Thanks for that!
Thanks
Any idea how I’m going to save everything so i can open it after I’ve closed it?
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;
You genius thanks alot !
You're welcome!
Thank you so much
nice tutorial mate
Glad you liked it
thank you so much sir this amazing content
Glad you liked it
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
Thank you!
You're welcome!
nice one here
wow thanks
Amazing
Thank you
You're welcome
thank you
muy buen video ...me funciono muy bien y aprendí mucho del tema que estoy estudiando💣💥💥💥💥💥💥
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!
Hahaha I was a little tired when I recorded this... my bad xD Thank you :D
Why isn't this comment at the top? Thank you :-)
wow , thanks!!
You're welcome!
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.
I’m ready, will be here in 12 hours! :-)
Whoops, I'll have to head home and set it for 3 😁😂
Tyler Potts Hahaha did you mean to set it for 3PM?
@@tasjehale It was supposed to be 1PM UK time today... xD
For the person who saw React yesterday first time that took time to understand
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
awesome video, thanks!
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?
You went to mountain XD 🤣
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.
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.)
@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.
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.
Yeah I was just being blind xD
got teh openweather api and key myself, but getting 401 unauthorized error...
Hi, thanks for your video. Is it possible to use 'backgroundImage' to change the background picture?
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)
Subbed great tutorial
at 4:33 time in video
FROM WHERE HAVE YOU TAKEN THE BASE !!!
after the key input
Thanks for the video Tyler. Wanted to ask that, can we make the background change using just vanilla javascript(not using react)?
Yes, absolutely
32:22
in the index.css it should be
transition: 0.4s ease;
you left out the s or seconds for the timing
this worked for me. thanks!
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
thanks for much for this. can you point me in the direction of refactoring so that i can have multiple background image classes, ie for snow, rain, sun, clouds etc? i have the idea just not the logic.
How to get api Base url?
thanks manh.
You're welcome!
I missed it. Thanks to notifications am here. Dont delete the video pls
Hi, I won't delete it ever! 😁
What changes should i make if want forecast instead of weather?
I am excited looking you code
Happy my code excites you!!