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

what is up fellow developers my name is Tyler pod selling this for there will be playing Avery act app the reactor will we will be creating is this weather app so we create a web for app in vanilla JavaScript now we're doing it in react so as you can see here if now I go in and I change this so currently it's Nigeria it's quite warm in Nigeria so it's got a nice warm background but if we was to let's say go to where I live which it's not going to be so great as you can see it's it's quite cold but the the background has changed based on the weather and that's what we'll gonna be building today this whole mini web for application so without further ado let's get started okay so I've just moved this over to the right so I'm going to create a new react app into terminal by going create react oops sorry on create yum create react - app and then we're gonna give it a name when the coldest weather react hit enter and this is going to basically generate our files and once I stood we will crack on okay guys so we have the is now done as you can see here it gives you this it says happy hacking and done in 51 seconds so not too quick the time but not not too long to be honest so we're gonna CD into the app so wife of react we're then gonna say yum stub before I do that we're going to say code dot you guys don't have to write code don't you just have to open up your file in your text editor of your choice I'm going to move this where is my theme done where has my finger on mine every time I record a video my theme disappeared it's like hey Tyler how you doing you want a theme in there you just go and blind community there we go yeah that makes me happy close that okay so we've opened up now in our terminal last thing we need to do to say yarn start and it's gonna start our react app you'll see you update over on the right side or it might open a new tab who knows nope it's real it's updated on the right side so once I update you'll see a blank or a react boilerplate app so first things we're going to do we're gonna move into our source file ash except the right is now updated we've got this lovely nice spinning reacts logo so on this on the left side we've got a few files here we've got app CSS which actually our app components specific CSS we have index with indexes as index CSS is our like main CSS file we're actually only going to be using the main today we're not going to be bothering with component-based and we've also got logo and all these other stuff so deep this surface stuff is not needed right now if we were building a big production out maybe it would be but for now is not easy so I'm gonna get rid of app tests I'm gonna get rid of the logo not rename it I just want to get rid of it or delete it I'm gonna delete this don't worry about the right side all erroring because that would be fixed once we go into our app J's file and we sorry and we removed the logo and this and then remove it from our or remove this whole header section so if I it's say for the app you'll see on the left so which have a blank canvas if we just say hello safe you'll see updates say hello which is perfect so the first thing we want to do is actually get our API key from the the open web map so we did this in a previous video but I'll show you once again so if we open up a window a bit bad we just go to the open web map dog forward slash API this is the documentation so you can read up on all this but if you don't click sign in at the top and then your email and password once you're signed in you can then go to API keys and you can grab your API key from here so if you want a new key you put in here you get a name we'll call this react app and we'll click generate and now we have a react app specific key so if we grab this and we bring this in here we can now create a constant called API which we're just going to set equal to an object which says the key oh that's right and then we're gonna give it the bass API URL the bass API URL is this I will paste this in so we don't have to go searching for it so it's the HTTP /ap I'd open way from Apter org data then the first sugar number off the API you want to use I believe if you're on the free plan you can only use the latest so so yeah let's close this and let's bring this back now we've got that information already we can crack on with the rest of the video we also want to quickly bring out actually will do what we need it all so people go use state but we don't need it yet okay so let's build the actual design of this app so I'm gonna bring over a screen and XD screen I have these two images I have definitely completely went and taken these photos myself but yes definitely I went to the mountains and took them waited until the time changed of course yes so let's export these images of export one succesfully exported before but let's export me into our current projects our YouTube rewear for app where for react public or source source and then we're going to create a folder in here called assets I'm going to create and then in here I'm just gonna update this to say which one was Sister Sister warm I'm gonna say warm background JPEG it was too warm one good so now we're going to export a cold one it was a cold background JPEG and I would close this and I can just discard that nice perfect so we have those open and set I'm going to rename the app from app to app because I preferred lower case in the name and then inside of hit we're gonna have a main tag out happens every time main tag aren't on maytag god damnit main tag when I'm gonna have a search - box we're just going to create that well then going to set up an emboss input in here so we go say input and we're going to say type is to text we're gonna break these down because I don't like people being on one line so we have type is equal to text the the class name is equal to search bar and finally the placeholder it's going to be equal to search so just for those you're wondering class the reason we're doing classroom and not class because class is every search name in JavaScript so we can't actually use two class because I'll still think you're creating a class anyway let's carry on so that is all we need for now let's hit save and you'll see over here we have a search box which has appeared up there let's go start styling this so let's go into our index let's get this and remove all of this and let's stop right margin:0 padding:0 and box-sizing for the box what I'm gonna say body it's just gonna have a font type in the family of month Surat and sans-serif what I'm gonna set the app to have a background image of URL and then we're just gonna get that image we have set assets and then we're gonna have the cold background to start with and then we'll just go say background size cover we're gonna say background position let's be such a notice and we'll just go say bottom because I want to sit at the Bob and I'm gonna say transition transition 0.4 ease out when we actually change the image it will fade through so if I hit save nothing happens that's useful it's because we need to now go main and we need to give this a height with this a min height a hundred feet H if we hit save that should have a date okay guys so I have figured out the issue and it was a fairly obvious one yes I use background positions of image so if we hit safe you'll see now it has a my bad that was my bad now we're going to set a class quickly called AB dot one and if we have AB dot one we're gonna set the background image this time yes to URL and we're going to say dot slash asset slash warm background dot jpg hit save and now if we go back to our app and we just quickly update this with warm you'll see it starts for a warm background if we go back it'll be a cold background so that is that so now in our main quickly we're just gonna give this a background image as well we're gonna give it a linear grading cuz I don't want it to be this right the actual background I'm gonna say to bottom gif in our GPA of zero zero zero zero point two and then I want to give it enough for our GPA of zero zero zero zero point seven five hit save and there you go you've got this nice dark gradient going down it which basically just makes it look a bit better in my opinion instead being so bright because obviously we're gonna have content on top of this and we don't want the white to clash with the white and I'm also gonna give the whole main a padding of 25 pixels so you can see that search bar comes in so let's start up the search box well there's a search box we're gonna give it a width off a hundred percent a margin of 0 auto 75 pixels which isn't gonna do anything of course actually why do we have that I just need the margin bar ahem we're gonna have search box search bar and the search bar is going to be displayed off block a width off a hundred percent a padding of 15 pixels and we're gonna do appearance none background:none board and then outline:none that's a lot of reset and then we're going to actually set background color equal to our GBA and we're gonna say 255 255 255 0.5 so if we get safe that's what's looking like so far pretty nice we'll give a board of radius and this one is gonna be syrup Ixil syrup it's also 16 pixels 16 pixels oh it's safe they dope so now it's got radius at the bottom but now I want to do margin top and I'm gonna say minus 25 pixels and now it's gonna bring it to sit at the ferry top of this header it's gonna pull it over for the 25 pixels of padding we have around the main I'm not gonna say bog shadow and I love this trick is you can basically just make a really cool-looking border and we're gonna say probably 0.2 it's safe and they don't we got his nice little underlying border which curves round looks really nice you can also then add a border to which sits around it it looks even cooler but I'm not gonna do that so let's stay color is equal to 3 1 3 1 3 1 but the font size gonna be 20 pixels whereas the transition on this it's going to be 0.4 ease we're gonna say search box darts search bar on focus and we're just going to change the background color to be lighter so we're gonna say RGB a 255 and I want you to say 75 hit save and there we go - this was looking like if we have 3x it goes dimmer and brighter dimmer and brighter there you go so that is what we as what we're doing in there let's go back into the app now and now in the app we want to basically go under search box and we want to add in a diff container we don't want to give it a locator which is one we want location - box and inside the lokay your box wouldn't have a location and we're also going to have a date and I knew what diff class name equal to date and in the date we're actually gonna basically get today's date board do them in one second so we're gonna do the location first and then the location we're just going to write our place now we're going to say new you're if I can spell New York City us it's safe you'll see that appear on screen and that is perfect and in the day we're actually going to create so called d-date builder a function which wouldn't get a pass through a new date oh that's not right a new date so we did this in the previous video but for this video we're gonna redo it so let's go back up underneath app and we're gonna say Const date builder it's equal to an arrow function takes a D which is which takes D which is equal to the date and then we're going to get some we're gonna actually paste in to set for a raise here so this one has all the mumps in an array and days has all the days in an array I'm just gonna close the side there so you have a bit more space and I might go zoom in one because I feel like that would be beneficial to you guys I don't get to say let's day and I'm gonna say let day equal days and we're going to get d dot get dead and it's gonna return a number between 1 and 7 or Cyril and 6 I think sorry and that will basically get us the day out of the days we don't go say let's date not late ain't let's date equal D don't get date which is gonna give us our date well then go get the month god so date gets it this what gets us a number between 1 and 31 month is going to be equal to mumps again so we're going to look through an index in our regular CD get month and this returns a number between 0 and 11 which we'll get as one of our monks and finally we're going to just say let lucky doing that let me hear equal deed get full yeah and this will gets the full year so for example 2020 and then we're just going to return that in an attempt in template strings which gonna say day date month and then we're gonna say yeah it's safe and there you go we've got the day already printed out on screen it's a Saturday the 11th of January 2020 that's great now we just want to actually underneath the location box we're going to create enough a box called the weather box the wafer box and inside the weather box we're gonna have the temperature so temp which is going to have in it let's say 15 degrees there's a starting point and then under the temperature we're gonna have dot weather and the weather is going to basically just say something such as sunny so you could actually change your background based on what we get for the sunny when we actually make the request of the API to if it comes back saying sunny you can make a Sun appear in the background if it comes back saying raining you can add rain if it comes back saying snowing you can have like a snowy mountain range or stuff like that for now I'm just going to base on the temperature but you can mix it all up and create a really cool dynamic where app and if you got if you manage to do live updates if maybe you said to run every minute and it updated you'd see this with update and the background would update too if anything changed of course which would be awesome so let's carry on and so this is actually all our markup we need let's actually go style it really quick so let's go to our index dot CSS and down [Music] sorry down below the search bar focus with us a location - box dot location and in here we're gonna say it's we want it to be white oh cool color FFF we're gonna say font size of 32 pixels a font weight of 500 where we have any text aligned off-center I'm going to give this a text shadow and the tech shadows gonna be free pixels free pixels are rgba and this is going to have probably 50 50 70 0.5 it's safe and there you go we've got this nice-looking background text shadow we're gonna say location box dot date and the date is gonna have a color of FFF a font size of 20 pixels a font weight of 300 a fun style again off its Halleck and maybe a text a lauren off-center so we're going to show you what this does and there you go that it's now bringing it under there quite nicely you know I actually didn't do this before but I'm gonna say text shadow and I'm gonna give this 2.2 pixels to pixels rgba and we'll give it the exact same one as the previous one so this one here and there you go it's got and it makes it stand out a little bit better so underneath the date we want to save the weather box we'll see I say well with - box and we'll just go say text-align:center when I'm gonna say weather box temperature and we get a position of relative we're going to display it in line block we're gonna give it a margin of 30 pixels Auto to Center it and bring it away from the upper pieces of content there you go we're then going to say background color and the background color let's go beat an RGB a 0 to 55 but we'll go set to 2 look if a border radius of 16 pixels let's have to look what that's looking like it's alright we'll give it a padding of 15 pixels 25 pixels a color off why a font size off 102 pixels a fun way of 900 and then a tech shadow of 3 pixels 6 pixels rgba and we're gonna give it again the nice color there there we go that's looking good I think I say text-align:center which is just gonna bring me if this was off slightly it bring it in and actually we're gonna give this whole thing a box shadow equal to 3 pixels 6 pixels and I will just could say rgba 0 0 0 point to a gape so it's got a nice little box shadow down there so it kind of looks really cool and then finally we're going to go under I'm going to say whether box dot wafer know what's right sorry in my bag and we're getting fake color off-white a font size of 48 pix also quite large a font weight of 700 and a text shadow are free pixels free pixels RGB a and we'll give it this one again it's safe and there you go that is now looking exactly how we want it now we just need to get the information dynamically and employ it into here so back into our app KS we want to go back up right up to where APIs we're going to say Const I'm gonna set sake up good query and we're gonna say set query is that equal to you state which could be a string and we actually need to get we need to say react and then we need to get this D structure and say well set state sorry or use state from react and then that will get this would then need to do enough of one which is called the wafer and then we're gonna get set weather and that one it's going to be equal to an empty object we're then going to create the faculty research function which kirby search is equal to Fe T which stands for event it's gonna be an arrow function and we're going to say if Fe T key is equal to enter so if it's equal to enter we are going to say fetch we have template strings and we're going to get the very API dot base so what we've set up here in the API thing we're going to get that when I'm gonna say whether that's again not how you spell wafer wafer we're gonna do a query where say Q is equal to an organization our query so whatever we've typed in our query or set our query to will be what we're searching for go see and unit is equal to metric we're gonna say and app ID and now this where we have to sell API key so we say API key we're then going to tab under here and say then we're gonna get the result and the result is gonna return rest off Jason and we're gonna say dot then once again I'm gonna say result it's gonna be equal to set wafer and we're gonna say result so this is the function we're going to use now to actually get our weather so it's a simple fetch get request where we're going to get from the API base wouldn't going to set the weather we're going to get the waifus of ice what we're getting we can also put forecasts there but we don't want the forecast we get the query which to query the units metric app ID and we've set all those of this string and that is going to basically send a record a P I request a get request to this this API URL and we're going to get this or this endpoint and we're gonna get the response we're going to actually straight away just get to JSON from the respond and we're gonna basically a JSON promise which is then going to pass it through to another promise which is going to equal to the result and we're going to set the wafer equal to the result so that is exactly all we need to do outside of our return function so now inside the file return function we're going to set a couple of things we need to first set up the input and the place I'll go save on change we're going to say unchanged is going to be equal to e set query and I'm going to say Y target dot value so we're going to get the value of this input we've typed in what I'm going to we need to bind to this value equal to the query and then once we've done that we can say onkeypress is equal to and we're going to say search and also in search once we have done all this I actually want to probably put this in here cuz I actually want to do two things not just this we want to set where but we also want to say set query and we want it to be equal to an empty string again just so once we've submitted it we can then start type in a different place again so this is this is exactly what we want and what you can see so I'm actually going to console.log the results or console.log the wafers well where we go where are we so console dot log whether we're gonna say that and I'm gonna open up the terminal there we are I'm gonna open up the console from terminal and now we're going to search for North Hamilton hit enter and it's an empty it's an empty array but that's because the dis hasn't updated yet I've just realised that's not gonna work we actually should get the result and that's going to tell us exactly what we again so let's try that again let's say no fountain and there you go this is what we're saying anywhere for two so we've got this wafer in here which you can tell if it's cloudy or broken clouds exactly what's going on we're going to get the main temperature which is going to be our temperature we're going to round this up or down depending on if it's but above 0.5 or below and we're going to getting restless information out like the country so let's click back in here let's go down to our we've got this information now let's actually sell it so location we're going to set to and we're gonna say weather dot name because that is what gives us back for the name of the city when I'm gonna say weather dot size dot country and if we hit save we're going to have nothing there so it's going to error and the reason it's going to air is because we actually need to make a check before we do this in soft location box so we actually need to say if type of weather domain it's not equal to undefined so if it's not equal to undefined we're going to say do a question but why aren't you going to get this n bit we're going to wrap it round to the bottom of this but that's going to error to this ternary operator only works if there is one element surrounding me so we're going to say we'll just add a empty diff which is going to hold this information so we're going to set that back let's set that back this is confusing there we get perfect and if we I think now it's correct so let's just have a look so if we hit safe this is saying expected TS oh it can't be empty ask me a string sorry so there we go now it's just an empty page and as we search if we say a fountain hit enter you can see it now says no fountain us if we say London it says London Great Britain enough a place Paris Paris France so we're getting that information updated so now let's change the temperature so in the temperature we're just going to say we're going to say math dot round and then we're gonna get the wafer dot the main dot temp I'm gonna hit save so let's say Paris so it's sixth currently six degrees also we also need to enter ID so if I press alt shift and eight on my keyboard it gives us degree key and then we also have this Celsius let's try it again let's say somewhere else let's say where someone called Spain it's still only six degrees in Spain I should've thought about that probably makes sense so that is that so we're rounding it up if we didn't round it up for example and we typed let's say North Hamilton again we get this and now exactly we don't want that so let's put that back nice rear ound it and now we're we've got weather we're gonna say weather don't wear fur then we're gonna get out the first one so this can sometimes come back with multiple depend on how big the city is but we only need the first one I'm going to get the main and which is going to return us what the actual weather is so I think that it's everything except right there so if we now hit save and we go back we can now say for example let's say France second I guess frog see I it's 31 degrees there but if we went to Paris it would be six Greeks awfully frogs actually a city somewhere else and if we say what London again but if we say London us you can see in London us it's 14 degrees so let's now set so that's good but nothing's happening in the background so if we went somewhere like Nigeria he says 35 degrees but nothing's happening and that's because we need to add our class to our main or our class name up here so we're going to set instead of writing this we're gonna do we're gonna actually use a or we're gonna basically pass with some charge to it we're gonna say we're for domain it's not equal to undefined because we have to make sure we have to check it's not equal to undefined or you know we could probably build this outside off no no we're not gonna mess around fit so if it's not equal to undefined then we're going to get the once again another weather domain temperature and if it's above 16 degrees what I'm going to say at war else we're gonna say app and also we need to also set a nothing else outside of this which is just gonna say app so that's a bit confusing but if I break this down to a new line for you and we okay we're gonna have to expand like this so what's happening is we're checking for the type off whether we can actually point bring this down and then bring that down and then that down to match that and then this down to match that okay that makes a little bit more sense or to say I don't know I'm probably just confusing people now right so what we're doing here we're saying type of weather domain if that's equal to underfund so if we have done a search query yet then we're just going to make it app but if we have done a search screen it's not equal to undefined we're going to basically check if it's then equal to where for domain temperature it's above 16 degrees if it is above 16 degrees we're going to add the class of warm else we're just gonna return app I'm gonna undo all that tapping down there we go safe and now if we go to somewhere let's say Nigeria there you go but the background has changed but that changed quite suddenly once we went to Northampton it's not doing the transition you transition anything did I break the transition you transitioning back to top transition zero point four ease out now this should be transitioning nicely and slowly across but for some reason is not and we will get to the bottom of this maybe we might not that should just try and transition it naturally there's no transition right if I spell f it cows right why don't you just do ease let's try going to Nigeria again nope apparently just wants a job that's great okay guys if you can find out how you would fix that please let me know in the comments it worked for the previous one not for this one weird right okay guys so thank you for watching this video if you enjoyed and learn so can you don't forget to hit that thumbs up button and if you know around here don't forget to hear that subscribe button so you get updated with all the information as soon as possible so guys thank you for watching this video and always do it on my own so I gotta get through it and the only thing I know is to love what I'm doing never give up never slow till I finally prove it never listen to the nose I just wanna move keep my

Channel: Tyler Potts

Views: 132,440

Rating: 4.9305711 out of 5

Keywords:

Id: GuA0_Z1llYU

Length: 33min 3sec (1983 seconds)

Published: Sat Jan 11 2020

Reddit Comments

[u/shadowpreachersv]

I'll try this out later, thanks!

[u/AbraxasNowhere]

I did a weather app like this recently just to pad my portfolio (I'm a beginner myself) and looking through this sub, seems like making a weather app with the OpenWeatherMap API is like the FizzBuzz of React. 🤣

[u/isakdombestein]

Does anyone know where I can find his wallpaper?

[u/Ms-mousa]

Good stuff buddy! Nice tutorial!

[u/seemslikesalvation]

Something that bothers me about this code is that the search function and the onKeyPress event handler are re-defined on every render, which happens quite frequently because the input field updates the state of query on every keypress.

The search function can't be moved into a useCallback hook, because it depends on the value of query, so the callback hook re-runs on every render as well, to close over the value of query in that render. We can't use useRef for the same reason (the ref would refer to a stale value of search).

If this were a class component, the onKeyPress and search functions can both be declared as class properties. The search function can access the value of search directly with this.state.query. The search function does not need to be redefined on every render, because it does not need to close over the current value of query.

How to accomplish the same thing as a stateless functional component using hooks?