Build a Weather App in React JS | React JS beginner Tutorial
ฝัง
- เผยแพร่เมื่อ 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 TH-cam
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)
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
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 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
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()}
This was super helpful! I'm currently interviewing for a position that uses React, and I've never done much coding with it.
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...
This is very begginer friendly, keep up the good work. Thanks a lot Tyler.
Glad it was helpful!
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 the awesome tutorial. I just added a few lines to view different picutures depending on the weather
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
I am a beginner and I really loved this in my initial learning.
you just import everythings you need in react, it's wonderful
Learned a lot from this tutorial, helped me build mine !! New sub
thank you this was DOPE! learned a lot on css and react.
Glad it helped!
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
Thanks, man. It was a good night
I Love your channel! Thank you for all your tutorials
Glad you like them!
Great tutorial. I like how there was no fluff in it.
Thank you! 😊
amazing tutos ! amazing channel ! kepp going ♥
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
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?
Quick, to the point and EXCELLENT work man. I learned a lot from this video. God bless you. (y)
Well done. I learned a lot.Thanks!
Glad it was helpful!
You are awesome dude 💓
Love from India
Great tutorial, I learned a lot.
This is very therapeutic
Thank you so much brother
Thank you so much
The code was clean and very easy to understand.
Thank you again
Really Nice content broo, it helps me alot :)
thank you so much! greetings from Mexico
I declared the transition for app warm class and it worked
"And the arrow function which takes the D....heh...heh...heh" LOL Made my day.
lovely tutorial .... straightforward to understand and easy to follow thank you... thumbs up from me
Thank you!
Great Video Man. Thanks!
Glad you liked it!
verry clean thanks alot sir
Cool Video! Keep making
Thank you so much ,it was useful for me
Amazing. Thanks!
I love It! Ty very much
thanks for the awesome video , really like it
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 video! thanks very much :)
Thanks for the tutorial.
God Bless you i learned a lot from this video thanks mate
Greate tutorial learned both react and CSS also
Glad it was helpful!
That is a amazing work, thank you!
Awesome tutorial, thx
Glad you liked it!
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!
Great Tutorial
Glad you think so!
"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 🇳🇬
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
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?
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;
thank you for this
thank you so much sir this amazing content
Glad you liked it
thanks! awesome!
Thank you;
You genius thanks alot !
You're welcome!
great video
nice tutorial mate
Glad you liked 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?
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 man
Nice video!
Glad you enjoyed it
Thank you!
You're welcome!
For the person who saw React yesterday first time that took time to understand
Thank you so much
muy buen video ...me funciono muy bien y aprendí mucho del tema que estoy estudiando💣💥💥💥💥💥💥
Amazing
nice one here
wow thanks
awesome video, thanks!
wow , thanks!!
You're welcome!
thank you
Thank you
You're welcome
got teh openweather api and key myself, but getting 401 unauthorized error...
Subbed great tutorial
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 :-)
I missed it. Thanks to notifications am here. Dont delete the video pls
Hi, I won't delete it ever! 😁
at 4:33 time in video
FROM WHERE HAVE YOU TAKEN THE BASE !!!
after the key input
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 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
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!
@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.
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
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.)
You forgot to put the unit of 0.4 Correct one:0.4s ease-out
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)
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?
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
Hey!
I have the same issue here, how did you solve it?
Thanks a lot
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?
thanks manh.
You're welcome!
I am not able to fetch weather api data from the key and base written by you. How I write as I am using free version of Open weather map
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
Hello Tyler , I keep getting this “unexpected ( in promise ) expected a json “ error in my console. Please any help?
Arrow function takes the d...hahahaha
Thanks for the tutorial, really appreciate it.
How to get api Base url?
Hi, thanks for your video. Is it possible to use 'backgroundImage' to change the background picture?