Build A React JS Weather App - OpenWeatherMap API - Tutorial

what's up guys clint here back to another video and in today's video i'm going to show you how i built this weather application in react js yes it is the most commonly built uh application in react i would say so a lot of people are doing to-do lists and weather apps but uh for a good reason if you're learning react this is a great way to do it we're going to work with the api open weather map and you really get to learn some basic base fundamentals of react so here's what we're going to be building right here basically i just have a nice stretched image out here with an overlay to help give some depth to the the data that we're going to pull and display on the screen so we have an input bar here and it's just going to take in a city here so we can type in somewhere like denver boom and this is all data coming from our api so coming from open weather map so it's going to play our city here our degrees in fahrenheit we are in the us so uh some weather description here clear rainy cloudy stuff like that and some more weather data here at the bottom and you can go and enter another city boom miami and you can just keep entering cities here so that's what we're going to build here today and guys i have it on a smaller screen because that's what i originally designed it for you can open it up a bit and it looks nice just has a nice little container around it but really it's meant for smaller screens for example if we look at the chrome dev tools here we can have a look this is what it looks like with a iphone xr so it looks really nice there so if you're a beginner to working with react apis this is going to be a great video for you i'm going to show you how to do it from the beginning we're starting off here in a blank vs code editor so without further ado let's jump in all right guys so we're starting off here in vs code blank slate so what we're going to do i'm going to press the control backtick button here to open up our terminal here and i'm just going to change the directory to the desktop and what these two end signs are saying is basically if we change directory successfully then i want to execute the next command which is going to be npx create react app okay so we're going to create a react app and i'm going to call this weather app dash react there we go go ahead and press enter this will only take a second you guys all right so it says happy hacking here that means we're ready to go i'm just going to go and pull over my folder that we just created here our our create react app so this is what we're going to have here on our basic react application so we're going to be working outside of this or inside of this source folder so don't worry about the node modules or the public or anything down here and in fact i'm going to go ahead and clean this up a bit i'm going to delete some things that we're not going to be using for this tutorial so the app.css app.test the logo report web files and setup test let's just go ahead and whoops not rename but let's just go ahead and delete all of these here so we don't want to start our server yet we'll get some errors and that's because uh we have some dependency sears that we deleted so let's get go ahead and get rid of these here and here in the index.js done with that then our app.js let's go ahead and remove some of this in here and then we can get rid of this here actually we'll just replace it with a import react from react there we go so and let's go ahead i'm going to press the control back tick button for our terminal here now i'm going to go ahead and run npm npm start here to start up our development server so there we go i'm going to change this over so we can get our image here shortcuts just make sure everything's working and let's have a look there we go perfect so let me go ahead and get rid of that so what we want to do is uh install some dependencies that we're going to be using so you can either close this little terminal down or you can just open up another one that's what i'm going to do so we're going to be using axio so go ahead and install axios npm i axios and so to install that that's how we're going to be accessing our api so let's import axios here at the top import axios from axios we're also going to be using the ustay hook so let's go ahead and import that as well all right now i'm just going to close that server here so first let's go ahead and uh access our or go ahead and gain access to our api here so i'm going to go to open weather map here this is a really great api to use has lots information and it's uh it's really easy to use so sure i'm just going to sign in here all right so all right so now that i'm signed in here i'm going to go ahead and click on api and this is the one we're going to be using right here this current weather data so i'm going to go ahead and click subscribe and i'm going to get the free one right here so let's click get api key so i already have mine what i'm going to do here come down here to my api key and this is it right here so i'm going to go ahead and open up this api here and grab our api doc so this is what we're going to be using right here i'm going to go ahead and copy this and over here let's go back to our code editor and i'm just going to add this in here define it const url and i'm going to put some fix in there there we go so let's grab our api key so go back over to here api keys boom right there and if you copy this one it's not going to work so make sure you get your own there so go ahead and we're going to put this over our brackets there i'm going to paste that in there and this is the city name so we're going what we're going to do is pass in from our input we're going to pass in there but for now i'm just going to say a city like dallas there so and we do have to add this http yes there we go all right so now that we have that we can go ahead and comment that out and what i'm going to do here what i like to do actually is uh let's go back to this code editor here and i'm going to grab this api and just make sure everything is working properly so i'm going to go ahead and put this in there ah perfect perfect so that's what we want right there and in fact i'm gonna go ahead and put this um i'm gonna save it here that way i can just bring it in to my i'm gonna close it what i like to do is bring it into vs code so let's see downloads and this is it right here boom so i'm going to save that so it formats here what happened there we go okay so i'm going to split this over to the right so i like downloading this so i just so i can have a quick reference and um we're not going to really use this file we're going to reference on the data that we want to display so we can go ahead and shrink this thing back down here i'm gonna go back to our application close that so i'm gonna go ahead and move that over since we're not really gonna be using that right there make this a little bit larger for you guys okay so what we want to do first here and we're working in our app.js so what we want to do is let's go ahead and let's go ahead and style our seller application so i'm going to just change that to a lower case kind of start over here and uh yeah let's do that there so let's go ahead and start with some jsx here and we're going to go ahead and code out the how our website is going to look so in here we want to create a div here i'm going to use a container here boom just like so and within our container i'm going to have a top portion and then also we're going to have a bottom portion that's how we're going to break up our site here so we're going to have a top and then also a bottom there we go and in our top here what we want to have go ahead and make an indention there so i want to have a location and in this location i'm just going to say i'm going to say dallas right now we're going to hard code some data in there just so we have something to look at and something to style so after the location we want to have a temp boom there we go and for our temp i'll just say 65 and i'm just copying over degrees here we're going to be using fahrenheit i'm going to put this inside of an h1 we'll say let's say 60 degrees fahrenheit perfect and then also underneath the temp here let's do a description boom description and in here we can just say um we'll say clouds all right so that's it for the for the top part here and then what i want to do next is go down to our bottom here and inside the bottom part of our page we're going to have that's where we're going to have our little box so we're going to have the field like in here we'll just say div with class name of feels and we'll say 65 degrees let's wrap this actually uh put a p tag 60 we'll say degrees perfect and then also have a c humidity and we'll say humidity is 20 and what's our next one going to be the wind so let's do dot wind and we'll say 12 and ph they're pretty windy out so that's all our data here that we're going to be using so let's go ahead and style this thing and have it looking the way we want it to look and then we can go ahead and come back to um to access our data from our api so let's go ahead and i'm going to bring over um i'm going to create a little asset folder here even though i'm not going to have one thing here i just like to follow the common you know conventions here so i'm going to bring over a file here this is going to be our background that we're going to be using so like i said i want to follow best practices while i'm learning react so i think that's the best way to set yourself up for success so this is the only image we're going to be using it's going to be used as our background and the way we're going to style our application is we're going to style everything in um basically in this index.css so it's a small application we're not going to have multiple components or you're not like a full site build so there's all different ways to build your project and so basically you just want to kind of build it the whatever makes sense to you so this is how we're going to do it in this project here and i have some fonts i'm going to be using i'm going to be using the outfit font i've used it before so you can just grab it from fonts.google.com or anything else you want to use so i'm going to go and import that and i'm going to define some some global styles here so select all i'm going to define a border box not border box or sorry box sizing sorry box sizing is border box here and then i'm going to set the margins zero and also the padding to zero there we go and um let's go ahead and just get rid of that there so i'm going to grab our font here and like i said it is outfit just like here at the top there we go and uh just leave all that doesn't really matter delete it um what i do want to code is uh some font sizes so p tags i want them to be 1.6 ram and then let's do h1 i want them to be font size is going to be six ram that's going to be our our our degrees there and let's go ahead and work on our background so our outer container here is app we'll work with that and we're gonna have a width of 100 height of 100 viewport heights we want this position to be relative because our we're going to have a background image but we're also going to have an overlay to kind of make things stand out a bit so our background color we're going to do uh rgba black and then let's do a try 0.4 so this is our little overlay here you can tell if we go darker it's almost going to be black and then one you'd probably be able to notice the difference so i'm going to leave it at 4 for now and i want our text to be everything inside our application to be uh to be white so let's go ahead well let's go ahead and do that now let's attach our image here the way we're going to do that we're going to use that before selector here so before and we're going to set the content sorry about that content we're going to set to an empty string here and now for our background for our background let's type in our address to that image we're going to use and we're going to go outside the directory into the assets and sunset there we are now we need to position this dale we need to position this absolute and we'll get over here here let him close that off position this absolute since we're on top of our relative container here and the width is going to be 100 and also the height 100 percent top zero left zero align everything here and let's give the z index so it's right below that uh our overlay here so whoa so this is it uh you can't really see it because we need to add some extra styles here so let's do center we need no repeat first of all no repeat center and then center and let's cover full width of the screen there we go so now as you can tell let's have a look it kind of moves with the full screen so that's what we want right there that is perfect i'm going to open this up i can't do it anymore that's okay hope you guys can still see everything fine let me know in the comments and i won't do that again next time so let's go ahead and move on to the top part what we're going to do is display that top part there so let's start off with uh start off with our container i believe is next here so what we want to do access our container let's give it a max width of 700 pixels so um like i said we're going to have this thing set up we're styling it for the for small devices primarily like mobile devices but also um we want it to look decent on a decent on phone screen device as well so margin i'm going to set to auto here then some padding we don't want it jammed up against the edges so let's do zero top and bottom one ramp on the left and right let's position this relative we're going to be moving some divs around within it up i want it to kind of display about 10 percent in the top there that looks good perfect now let's do display next and flex direction we want to do column and then justify content space between so it can kind of go on the top and bottom to the pages there perfect so that's going to be our box down here at the bottom now what we want to do let's go ahead and tackle this uh we got the top part yeah let's tackle this top part here so what i'm going to do is a app then this top part here we want a width of 100 and a margin one rim auto there we go perfect perfect and also let's get our description here so app description and we want this to be positioned relative i'm going to slide this over here let's try 90 close that off here so we want this to move all the way over there so that might be too much but we want to turn it to we want it to face uh vertically so way we're going to do that transform origin there we go and then we want to transform there we go let's rotate let's see that that looks a little bit sideways that's the other way try 268 629 270. yeah i'm gonna go 269. all right so that's it for for that one there so that that concludes our top part now we just want to style our bottom part here real quick so let's jump in here to app and uh let's say bottom and we want to display this as flex here there we go and we also want to justify the content let's do space evenly here and that's going to shove everything across the width of the screen perfect there i wonder why that miles per hour there is small we'll come back and have a look at that so text align center let's do with a hundred percent uh margin we'll do one rim and then auto on the sides here and padding we'll do one ram we'll do a border radius of 12 pixels and a background color let's do i have a little um rgba action here so we'll do instead of the setup black let's do white so 255 255 255 and then let's do 0.5 let's do two let's do 0.2 and then i want to have a bold selector okay 700. all right so looks pretty good here let's see how it's looking here denver so we need to add we're missing a few things here also we can we looked like we left a few things off there so let's go m.j yes so it's down here in our bottom part what's this here we'll say feels like there we go feels like perfect and then let's do like so humidity we'll do wind speed this needs to be there we go let's give this some classroom as well bold all right that's looking good there looks pretty comparable there all right so the next thing we want to do is connect to our api so this is our url here so let's do that one here right now okay so let's think about what we want to do here so what we want to have is an input box here at the top and we want to take in a value it's going to be a location and we're going to pass that location into our url here that's going to be talking with our api so the way we're going to do that is by using some state so let's go ahead and open up the state here and we're also going to use state for our api as well so the state you state is going to take in two values in here so i have my comma and then we're going to end with a use state and we're going to set this to an empty object and my two values going to be data and set data now like i said we're also going to be doing uh the location here so i want to have a uh another state for my location so we'll say location and set location like so and we're going to say equal to use state and we'll set this one as an empty string perfect now we're going to be using this url so we can go ahead and uncomment that and instead of the dallas here that i've already passed in what we're going to do is we're going to get rid of that and we're going to type a dollar sign there some open curly brackets and this is our dynamic value that we're going to be passing in and we're going to be passing in the location here now we don't have that yet because we don't have an input bar yet so let's go ahead and still connect to our api so and we want this to happen all on a search function so i'm going to enter this within the search function so let's uh define our search location we'll call it it's going to be an arrow function and in here we're going to run our axios dot get we're going to grab our url then we're going to get a response passed in here through our arrow function and we're going to set our data to response.data and also i'm going to go ahead and console.log response data as well there we go now we want this we're not going to have a button wouldn't have uh submit our input on the enters button so we're going to wrap that whole thing in a in the if statements here so we'll do if event dot key equals to use the enter button proceed with this code here so let's just go ahead and cut that and paste it there we go and oh we're not we need to pass in the event there we go now let's go ahead and um let's go ahead and add in our input so let's put it outside of the container so it's not within the flex properties here and we're gonna have a search div there and inside we're going to have our input type text is fine and i'm going to go ahead and separate this on multiple lines so it's easier to read so for our value we want to set this to our location and also we're going to have an on change because whatever we type in there we want it to be says our value so in here we're going to pass in an event and set that to the search set location event dot target dot value there we go that's what we need there and let's just give it a little placeholder and we'll say the placeholder is enter location there we go and also we need to have our key press to run our function so on key press since there's no click during the key press we want to run search so on key press enter here we're going to run this search location so let's go ahead and just style that real quick um well we'll put it right here so we're gonna hit app.search let's put it that in the middle with the text align to the center and give it a padding of one ram there we go and let's hit our input here let's do 0.7 ram and 1.5 from the left and right zoom font size 1.2 rim give it a nice little rounded edges and a border one pixel solid and we're going to use rgba here um whoops we're going to be using the white i was trying to scroll down and save some time here that's okay we'll say zero point it webs will come back we'll say eight come back and see how that looks and for our background there we go point two let's do a little bit there we go a little bit less there perfect now that's what we want our inner location placeholder text a little bit hard to see we can select that with place holder there we go and let's just set that to a color of kind of off-white there perfect there we go all right so that's what we want right there perfect perfect now let's go and open our chrome developer tools here i'm gonna go to the console here refresh this now i'm gonna go ahead and enter dallas hey there we go so let's see if this is really dallas boom there it is let's try another one try actually we want this after you notice that our text is still there what we want to do is set that as an empty string so let's go over here and we'll say after we connect here let's set um location empty so let's try that again here so i know it's kind of hiding our bottom part there it's okay so we'll just try um there and i'm miami change this color to white real quick see how that looks all right perfect so it looks like we're grabbing our data just like everything is working correctly that's perfect so now the functionality of our website or our application is working correctly see dallas make sure we're getting the correct one each time denver [Music] new york perfect so everything is working properly now we just need to display it on our site here so i'm going to go ahead and close this so it's a little bit easier to read now let's go down here and see in our container here the top part or dallas right there so we actually we want to use if we go over here to our json file here what we want to display is the name so the way we do that is just access here i'm going to close this out here and we'll say i don't know why it slides over to the left there data dot name let's go open up our console again here let's see here it should be entered there it is sorry we didn't log it but there it is perfect so that's what we want there over if we refresh it resets perfect that's what we want so next let's go to our temp here so let's go over here the next it's going to be under main there's an object here with temp so looks like that's kelvin too i think let's have a look in here i'm going to select select that and we'll say data dot main temp oh we get an error no we access that right cannot read properties of undefined temp okay so what that's saying is this temp here is a child element of this dot main and basically it's trying to access this temp before it's returning the main that's um since it doesn't return this one here this one is undefined so that's where we're getting this this error here so this one basically doesn't exist because this one is unable to be found so the way we can get around that is i'm just gonna type up here to open up a new slot here basically we're gonna check to see if the data dot main is available and then we're going to proceed down if it is so the way we do that is just type we're going to say data dot main and then we can actually just inject our h1 here here goes sliding over to left again and then we're going to say data.main dot temp there we go otherwise display was returned null so let's just delete that because we have our h1 in there and let's see what we get oh hyper cloud's over here we'll just say denver perfect so they have our degrees here it is in fahrenheit um we didn't add in our our degrees fahrenheit which we will come back and do that in just a minute i'm going to go ahead and just put that back in there anyways and boom there it is and we'll come back and fix that here in a moment so let's go ahead and do the next one here so the next one is uh we're going to do the same thing here so we'll just do this right over there so what we're going to do here because the clouds is found that's not it we're looking for this is the main right here so the way we access this where is a data.weather then this is inside an object it's a base level object there it's going to be 0 and then dot main so the way we're going to check for that dot data.weather and if so we're going to add in our um let's see data dot weather i forgot to add that there we go first array there dot main this actually needs to be inside there close out else there we go so there we have it off there it says clear let's go delete that as clouds perfect so that's what we want right there now let's go down here to the feels like i know i'm kind of covering it down i'll just drop that for now so if it feels like we're gonna have to do the same thing on that one here so i'm just gonna enter that down below what we're gonna say is it feels like is over here data dot main feels like so what we're going to say is data dot main then open this up here and we're going to put this inside p tag data dot main dot feels like it's null save that and scoot that over and i'm just going to take this little degrees here as well put that right there and we can delete that now for humidity we're going to be doing the same thing and we can give this class name to bold as well so there we go and so same thing we're doing here and the humidity is under the same data.maine.humidity let's say data.main and this is going to be class name bold here let's do that over data dot main humidity that's null perfect and next get rid of that and that was add a little percentage sign here then the next thing we're doing is wind and we're going to do that right here so data dot wind dot speed so let's do that we'll go and delete that there for our wind whoops for our wind we'll just replace that here and we'll say data dot wind throw in our p tag here with a class name of bold and this is going to be data.wind.speed we'll say this is miles per hour no small cool let's go ahead and save that let's see how it looks here feels like wind speed oh we forgot to have our humidity here as well let's see boom there we go perfect so that looks like everything is working properly we're taking our data there are a few issues though for one it's in kelvin i don't want that and number two this is displaying down here and i don't want anything to display unless we are um until we pass in and get some values so the way we can do that where's our our bottom part i'm gonna give it some room here so we know where we are working so with this bottom part basically if there's no data dot name and everything's unfined then we want to just not show anything in there at all so what we're going to say is data name oh we'll throw everything in there let's save that perfect now let's make sure it works all right there we go now next thing we need to do is change this uh from kelvin to fahrenheit so let's have a look at that um let's go look at our open weather map once we're in our open weather map here let's pull this open just a tad so we can look we're going to be looking at api here we just want to find the docs and then it should say somewhere in here format here we go this is what we're here units with the units to be we're going to use we're going to be using imperial so the way we can just pass that in over here where's our url there it is we scroll over so we're going to pass that in right after our location and what we have to do is type where's our and sign here and we're just say units because that's what it asks for imperial there we go now let's have let's have a look getting an error down here it's okay now let's uh go back over here and see if anything has changed let's refresh and we'll type in york hey there we go perfect uh let's change this i don't i only want i don't need to see the 0.62 so let's go ahead and just use some javascript for that where's the temp right here we'll just say dot to fixed boom there we go and we'll say same with the down here at the bottom as well so we can go ahead and close that we don't need that anymore so humidity let's do the feels like boom and the speed let's fix that as well perfect so let's scroll open large screen see make sure it still has our container around it perfect everything is working properly let's pass in dallas say denver notice everything is changing perfect so there it is you guys we have finished a basic open weather map api working in react js very basic just a one-page application here but we learned how to connect with using axios to connect with our api and passing in some dynamic data here with our use state so hope you enjoyed it you guys was a fun little project i got to work on today so if you did please give the video a like and consider subscribing to my channel i'm going to be putting out some more react content just like this and getting into a little bit more in-depth videos as i uh continue learning react so it's been fun you guys thanks a lot for following along i'll see you on the next one

Channel: Code Commerce

Views: 93,714

Keywords:

Id: UjeXpct3p7M

Length: 36min 52sec (2212 seconds)

Published: Thu Jan 20 2022