Axios in React JS - How to Make API Calls Using Axios (From Scratch)

hey what's up guys i'm back with another video and in today's video i wanted to clone the popular google momentum uh plug-in here okay so this is actually what we're gonna build and this right here is momentum and if you're not familiar with momentum basically just gives you the time it gives you a little like daily mantra and some quotes down here and also the local weather this is just a free version you can do other things if you pay but this is nice here so but what we're going to do going to go back to ours basically i have the weather up here and we're talking to open weather map the api and i'm going to show you how to connect and talk to their api using axios so we're going to do that from the beginning also we have the time here we're using a react package called react moment i believe it is in time zone i'll show you how to install that package and how to utilize that and then kind of says good morning clan for the afternoon it says good afternoon etc and we have the date up here just basic javascript pulling out our date there and formatting it and then as well as down here we have a a quote that's getting pulled from go quotes it's an api and i'm going to show you again how to use axios to talk with that api and as you can tell when we refresh the page our background is going to change as well as we're going to grab another quote and i'm just using unsplash to generate some random images in our css file so we're going to use a little bit of hooks in here some use state and use effect as we when we work with axios to talk to our apis um if you're a complete beginner that's great i'm going to show you how to do everything exactly from the beginning from a blank terminal so if you're ready to get started let's get going okay so we're starting off here in vs code i just have a blank terminal open i'm going to press the control back tick button to open up the terminal here um what i'm going to do is i'm going to change the directory to the desktop just for me personally and we're going to create our react app so mpx create dash react app and then whatever you want to call it um i'm going to call mine momentum whoa momentum clone okay press enter this should only just take a few moments depending on what kind of machine you're running all right it says happy hacking i'm going to go ahead and drag over my folder that we just created and now we are in our project so let's go ahead and clean a few things up like i uh usually do here just gonna declutter a bit makes it a little bit easier to follow for everybody but delete that this will throw some errors if you start your server now so to prevent that we're going to delete this delete that and then our app.js we can get rid of all this we'll just keep our div and up here let's import uh react from not form from react okay so let's go ahead and i'm just gonna put a hello in here and i'm gonna start my server just to make sure everything is running properly let's have a look yes i already have one open this will be the other one here i should just say hello and there we go okay so back to vs code what we're going to do now is kind of just set up our file structure so we're just going to be working in the source folder we're going to create a subfolder called components and in here we're gonna our uh this application is made up of basically four separate components and uh you can create them whatever you like whatever order you'd like i'm gonna go ahead and do that now um let's do our weather.js we are going to have a time dot js we are going to have a date dot js and then also a quote dot js and we're going to do style components but we'll do that here in a little bit so we can close this index file then in here let's start off with our [Music] see let's start off with our weather so i'm going to close these for now and i'm going to use rafce it's a little um quick extension so if you want to go into your extensions here if you type react should top should pop right up now es7 react redux it's just um some quick extensions that you can install to kind of just speed up your your coding just a little bit here so rafce generates a functional component and that's what we're going to be using so let's go ahead and close the server down and we want to install axios because axios is what we're going to be using to talk with our api so just type mpmi axios and if you want to read some documentation just google axios i think it's like axios http.org or dot com something like that i'm not going to dive uh too deep into it but just google it if you want to a little more information so npm start we're gonna start our server back up and let's import at our top here axios from axios okay and we are going to use um hooks here we're gonna use the ustay and also the use effect hook to talk with our api and use axios i've scratched the surface with hooks with the ustay specifically in some previous videos i have not done any use effect videos i don't think this is not a video over use effect but we will be using it so up here let's do our use state here hook we'll go ahead and pull these in at the top so use state and also we're going to use the use effect so this is going to take two values here brackets not curly brackets i'm going to say data and set data okay and this is going to be used we want to give it a null value as default okay so in here and you know what let's go ahead and set up our since we're doing our api um let's go ahead and sign up for that so we we are going to use the open weather map um the open weather map api here so if you go to openweathermap.org i'm already signed in but just log in up here it's going to send you an email confirm your email then once you log in we're going to click this api and this current weather data is what we're going to be using and i'm just going to copy over this first one right here so copy that and i'm going to make a variable right here just called a url okay and what we're going to do is we want to inside quotes and don't forget to add https colon slash slash and then here it's asking for a few things it's asking for the city name and also your api key so i'm going to go ahead and enter dallas i'm in dallas texas so i'm gonna do that and then for your api key once you log in okay uh this is your login page here once you click the link there will be an api key here and here is your key so i'm going to copy that and we're going to paste that and it's this goes over the curly brackets as well so if you leave curly brackets you'll be getting some errors so also i want to do one more thing into a format um please click api here again then in the docs format so this is an easy way what are we going to be using we're going to be using this imperial right here so i actually don't need that so i'm going to copy that and i'm going to put it right here and then don't forget we need to add the emerson sign so there is our url now let's connect to it first i'm just going to show you guys real quick i'm going to copy it just to make sure it's working there it is so this is the data we want to pull we're only going to pull one or two things temp right here is the main one that i want but you can do the highs and lows um when there's all sorts of information in here so i'm gonna go ahead and close that you know i might leave it open just to reference back to it let's go back here and let's connect to the api with axios we're going to be using the use effect as i stated so use effect and it's going to take an arrow function and in here we're going to say axios dot get then in here you could type your url but since we already extracted it up top we're just going to call it right there dot then it's going to take a response with another arrow function and this is going to be set data so we're setting our state here set data okay and we went to response.data okay so we also want to catch any errors and we're going to put these inside an error an arrow function just to console.log out any errors i forgot our arrow there we go okay and also don't forget you guys the comma and some curly brackets here this will kind of end our loop otherwise your axios will start making infinite calls to your api here and this is just a free version on open weather map so i don't know what the limit is but you are limited and if it's making you know 2 000 calls a second basically then they will they will ban you so that's what we're going to do there and also really important you guys don't forget we want to do an if statement here if basically saying if the date if there's no data then return null okay so let's see if we have any uh anything coming out here so i've worked with this api before it's already known site but if you don't i'll tell you what let's do this we're gonna inspect and we're gonna console.log dot log the data okay before we forget we should probably import this here so let's go here and we want to import this is the weather okay if you press enter it'll auto import at the top which is kind of nice here so there brought it in for us so let's have a look okay so there we go this is our console.log this is our api what it's pulling we don't want all this information what we do want is see the main in here where'd it go main and we want the temp so and it looks like this should be an array i believe let's see here no it's not just an object so main let's go in here and we don't want what we want to type is data dot main dot temp and that will should it leave whoop wrong one opened up spotify okay there's our temp um perfect so if you don't want um the .84 there you can always just do some plain javascript um we can we can just write a two fixed uh you can do one decimal point or zero um i'm gonna do zero so should clean it up so 61 degrees that is the current uh weather here in dallas at this time so let's go ahead and let's see here that's basically it for the for the weather api we haven't done any styles we'll do that here in a little bit let's go ahead and go to our time um yeah we'll just go to our time here and we're not using any apis for time but we are going to use a react package i'll show you that so let's go ahead and type rafce to generate our functional component let's import this here auto import it there we go we can close the weather for now and in here what we're going to be using got it open here uh react moment and let's just scroll down in this moment time zone so that's going to make it easy for you to grab the time and kind of navigate through your time zones so i'm just going to copy that i'm going to close our server down i'm going to install the first one and i'm going to install this second one the moment time zone and i'll show you the difference between these two we do need both maybe you don't have to have both of them but for this tutorial i will be using both so let's go ahead and start our server back up yes okay there we are right where we left off and what i'm going to do is import moment from react moment and also we're going to import the moment time zone okay and in here we're going to use right in here we're going to use our moment inside of a p tag whoops moment okay and we want to use [Music] let me just show you real quick how this is going to look so that's what moment displays now remember we got the moment time zone and that's what i want to use right now so in let's go back it's really easy all you want to do is type in format lt and if we go back there it is 2 15 p.m that is the correct time now i'll just show you real quick the format you can read over uh react moment their white pages all their documentation um basically we could do um hours minutes seconds um you can do whatever you'd like to do see there is the seconds um but for this tutorial i think it kind of looks clean if we just do lt for now and what we wanted to say in google momentum let's see i would open here this is actually momentum what we're cloning we want it to have the time and we want to say good afternoon good morning uh good evening we want to based off the time we wanted to say the you know the right the right thing here the right greeting so to do that what we want to do i'm going to go in here let's see let's what we want to we're not going to use state or hooks or anything like that um just some plain old javascript so let today equals new date okay and then see here we're gonna have like a greeting okay so that grabs our date and then let's say like okay greeting we do an arrow function here and here it's gonna be about basically a bunch of if else statements so excuse me if today dot get hours is less than or equal to let's say 5 am sound good and day dot get hours is greater than 11 or less than 11 sorry we want to return good pointing okay perfect else if today.gethours is see greater than or equal to 11. and it is less than we'll say five o'clock which is 1700 return we'll say good afternoon clint okay another else if here oh today dot get hours we'll say if it is greater than or equal to five o'clock and today dot get hours it's uh see we'll do less than i want to say 24. what's a good time right return we're going to say good evening clint else let's just have it say hey let's see what are you doing up at this hour sound good all right so let's see we have to put this in down here and we're going to put it in a little p tag and what we're going to put in here is our greeting function i'm gonna save it by the way i have the prettier extension as well so if you go over here um to extensions sorry and type prettier whenever you save it that's all you need right there whenever you save it it makes it nice it aligns everything makes it nice and pretty so let's go see what it's saying there we go okay so it is indeed after uh was it 11 and before five so it's going to say good afternoon clint that is looking great let's go back to our code um i think aside from the styling that pretty well wraps up the time so let's do our let's do our date real quick that'll be an easy one quick and easy so raf ce we'll bring this in here date hit enter for the auto import at the top oh didn't grab it for some reason that's okay all right so in here what are we going to do here so for the date we are not using any um no hooks or anything like that basically just some some plain javascript we're not using any packages for this either so what i want to do just a couple variables here let today equals new date and essentially this is going to be like the same thing that we just wrote for the time very very similar today dot get full year this is just javascript you guys and you can do it this is going to be dividing up our date so get slash dash let's do slash here and we're going to say today.get month function and let's add in that and then today.getdate okay that should be it we're gonna put it in a p tag here and let's just call our date so what we're doing here this is grabbing our date and we can even console.log today we're saving it today and then the actual date that we're going to display we are playing off this date we're getting the full year because if we just did the date let me see here is not a constructor let's go back here where'd i mess up uh okay what does not want me to call it that so let's do this today today let's see if that fixes it here perfect so that's what we want to accomplish here that is correct but if we look down to what we logged here so this is what we logged and we don't want it to display of that there so let's go back to our code here and that looks great there we can comment that out we won't be using that and i think this is all we need to do aside from the styling so let's move on to our last one we're going to be doing our quotes here so we want a little quote to appear at the bottom right here every time we refresh we want it to grab a new quote so let's generate our functional component and not forget to import it there we go grab it at the top there so we're going to be using axios again and similar very similar to the weather um dot js file we did here we're going to use state as well as use effect okay and let's have our const url i'll leave that blank for now and let's go ahead and grab our our url for the for our quotes we're going to be using go quotes api this looks like it's it right here there we go so this is what we want right here you don't have to make an account just copy that over and we want oh well let's give it a shot here and we want the post count to be one there we go that's perfect so delete that let's go back into our code here and then inside the parentheses or the quotes sorry and don't forget to add the one now let's do our state so say const and our two values we can use the same thing that data what do you state and again we want it to be null and let's do our use effect here oh forgot we have to import axios axios from axios there we go and where we're at there we go a little arrow function here and in here when axios dot get our url then we want a response the arrow function and it's going to be set data to response dot data okay and again whoop just dated not set data we want to catch any errors put them in a function to console.log error and again we don't want it looping through anything there and also we want to if data if there's no data return null okay so let's go ahead and console.log data so we can look at what we need to grab it is so we're still logging the uh the weather here we can cancel it out right here is our console.log for our quotes and this one here quotes this one right here is in an array and zero since we are looking for one post count we have to just access the first item in the array and that is going to do that by zero and it's the text that we want and we can grab the author as well so let's go back in here we can comment that out and then down here we're going to put that in some p tags i have two of those so what we want to do data dot quotes and we're looking for the first item the array dot text and then again we want data dot quotes first one and instead of text we want the author save that so it's nice and pretty let's go have a look so there we go and as we refresh it grabs a new a new quote there so i'm going to tell you what i'm going to do kind of like a little dash there there we go so we know that's the author so everything is looking great now we just need to do some some styling i think that's everything let's do the styling now so what i want to do first is uh in momentum we have that beautiful background and we're gonna pull one over from unsplash and what we want to to do is we want this background to refresh and grab a new background every time we reload the page so here's how we're going to do that well first i'm just going to give this a minimum height of 100 percent and then in here background url okay and let's go to unsplash and splash.com where is it featured see say source dot splash there it is so slash random um i want a theme though let's do featured with um we can do a search feature i think that's gonna be it so let's copy that let's go see here okay let's put that in okay [Music] and no repeat this is just css we're doing right now guys center center fixed and then um or you know here let's do a background size of cover whoop add that in there and i'm gonna give it a color of it basically off white now i'm gonna add a little overlay in here just to make it kind of cool looking so that was done under the body so to do that we're gonna type body before and we want our content with position of absolute top zero right zero bottom zero left zero we want to take up everything let's have a background do black with let's do 0.5 so this should be bringing in a picture right now let's have a look there it is all right so let's we'll close this that's a little dark let's refresh let's maybe just lighten that up just a tad there all right so it's kind of where we're going here not bad not bad let's style these up here and we're going to do that with styled components so close the index and see we'll start off let's go and let's go start off with the date here so what we want to do is close our our server here and we're going to use styled components is this it react moment actually goes here it is so i'm just going to copy that over feel free to read through the documentation here basically this is what we're going to be doing it just kind of explains it in more detail i'll explain a little bit as we go along so let's install style components and what we're going to do now is i'm going to create another file called date styles instead of css it's going to be a js file because this is basically styling in javascript start our server back up and what we want to do here we'll say import styled from style components and that is in our styles our styles file here and then in here we want to here's what we're going to do so we can just replace these divs the date you can call this whatever you like i'm going to say date container and then i'm going to say a date so in here we have to call these at the top so we're going to say import date container whoops well that technically that first one would be right and eight from our date styles there our data whoops i need to fix that i'm gonna rename that date styles okay so make sure it works okay great so now after we import styled from styled components here's how we do our styling very similar but we have to first select our date container which is a div so export cons what we named it which was the date container equal styled dot div since it's div the other one is a p tag so it's going to be a p tag div and then two back ticks and then here we're going to enter in our css so right 0 top zero we want our position to be absolute because this is putting our date in the top right corner of the page which is right right where we want it there we go that should be it and make sure my server gets started up and our date should move over there oh importing date is not exported let's have a look okay i understand so what i did not do is called that date we're not actually not even using that we could just say p here there we go so that should be working properly let's give it a refresh so there it is so i did not style the p tag i just left it as it is that was the error we were getting so let's move on to these we can actually let's do the uh let's do the weather next so go back to our man i keep clicking sorry keep clicking on spotify down here close the date and the date styles and we'll create a see what weather styles dot oh there we go trying to create a css file so js in here what we want to do is see our import styled from styled components and we have i believe it's a div yes a div and a p tag here and never did this but i can just say dallas texas okay and what we're going to call right here is um let's just call it weather container okay and then here i'm going to call it temp and here a city we need to import these which we haven't created yet we're going to import them from our styles folder our styles file file so our weather container temp and city from weather styles so let's go in here and we need to do our weather container our temp in our city the weather container is a div so did oops style div do our back text and we'll do our other one temp this is a p tag and let's copy that down but that is going to be for the city let's do our css earning a margin of one ram position absolute and this is just staying in the top left corner so it's really not going to take much styling let's give it a font font size of two rim give it a color let's do our white and no margin and then for our city text a line we want it to be just below in the center and we'll give it just a slight margin four pixels on the top and bottom only let's refresh that so there it is perfect our date looks good our weather there looks good 61 degrees now let's go in and i forgot how we put degrees sign let's see here look that up there let's see if that does it yeah there we go perfect all right and why close those we don't need those let's do let's see we still have our time and greeting here and then our quotes at the very bottom so let's do our let's do our time we can close these here we want to create our time styles dot there we go okay okay and let's go our time here and we what we want to do we'll probably do like um like this div here let's do a call it whatever you like but it's kind of like our welcome our greeting here so i'm going to say welcome and this p tag i'm going to call it timestamp and we'll just make this greeting let's import these so import welcome there you go just notice that welcome time stamp and greeting and that is from time style save that get it all looking nice give it some room here believe the first one was the welcome that is a styled div and see we had time stamp styled p tag and our last one was greeting already so for our div just a few styles here we want the padding to be one rim what is it doing i don't know why it's taking these shortcuts here that i do not want let's delete that that will just present some issues all right and look at that and it is doing it again i'm sorry guys i don't know why it's doing that automatically either way we are done with that one now let's do our p tag and this one's going to be pretty big uh font size let's do eight ram but wait let's make it pretty hefty there 500. we don't want any margin no padding okay we're going to do a media query again midi query pretty easy this way basically it's the same way but you're able to do it under the same on the same uh css here and let's do 600 pixels make it better go get some room here let's make this one [Music] more ram but weighs me a little bigger as 3600 again no margin and no padding we're just gonna drop down the text size just a little bit three rim let's have a look here oh wrong one all right that's looking great we have our date up here at the top right our weather up here and then our nice big timing with good morning clinton the time has changed here so let's go back and pull our quote we want it right down here in the middle so let's do our quote next uh we're going to create a quote styles.js and in here we want to import styled from styled components and we can close out these timing components and there we go in here let's do [Music] see a quote container we'll call our div that our first p tag actually we can just make these the same we don't need to do anything extra there okay now let's bring them in here let's board the cons quote container style div and the other one text all right so let's give this some styling fix position text align let's center bottom zero width we're going to do 600 pixels left 50 margin left we're going to make this exactly half of the width here sorry if it's a little bit confusing the way i'm doing this guys there is there are a bunch of ways to to do things in coding so if this looks a little strange i apologize 350 pixels but it achieves the job it gets done what we are needing to get done that is what matters okay and let's just change this font size 1.2 all right guys i think that about wraps it up in this react app here um i showed you how to use axios to talk to a couple different apis such as the open weather map and go quotes i'm going to put the link to both of those open weather map and go quotes in the description below so you can find those a little bit easier they are free accounts um open weather map at least go quotes you'll even have to sign up but yeah we have our temperature up here at the top left uh our date that is correctly formatted in the top right we have the time here good morning clint and then also a quote here and everything um when we refresh everything changes so i'd say that's pretty close here to momentum which what that's what we were trying to do um i think we accomplished our task pretty well so if you learned something if you liked the video um i really would appreciate you consider subscribing to my channel i'm going to be putting out some more react content just like this and some more technologies here in the near future but yeah i appreciate a like on the video help the youtube algorithm there as i grow my channel if you'd like to see any other uh projects or anything specific please put that in the comments below and i'll try to get to that and um thanks for watching you guys i hope you enjoyed it i'll see you on the next one

Channel: Code Commerce

Views: 182

Keywords:

Id: dTahxuXRmfk

Length: 45min 32sec (2732 seconds)

Published: Fri Nov 19 2021