Axios with React like a Pro | Create A Reminder App

I'm telling guys home doing and welcome to benefit Oriole from Ibis today we are going to see a complete tutorial on mastering Axios going from zero to hero and of course allowing yourself to make HTTP requests like a pro so for those of you who doesn't know what is ax here's axis is an HTTP client library it is super advanced and super super powerful and as well it is famous clusen here has a 75 ka stars on github and it is super powerful as I've said before the API is super robust so if you want to just if you're a new new beginner and just starting off with you know web development and stuff it's gonna be super easy to use and the other hand if you're advanced developer and you're just like you know consumed Pro features and pro functional tees Axios gonna allow you to do that as well so they both help you achieve exactly what you want to do and of course this is clear sign here open sources all be put on github and yeah the whole documentation here it's actually in github because it's super lightweight and it has like a lot of features and the support is actually tremendous from all of different stuff like in here and you can of course govern an installer using NPM or whatever you can even huge deals deliver and package I've heard of different stuff and you can take a look on examples in the hair of course it is based on the promise API so hallelujah yeah yes for JavaScript some es6 developers they all love promise based api's and here it goes you've got Axios for that so I'm gonna be using actually are trying to build some simple application which allows us pretty much to create reminders for our like for our day to day lives so every example you got like you want to bright groceries later on or just walk with the dog or something like this at the end of the day so she's gonna put the reminder at there and create this application and of course we are gonna consume the restful api is using axiom so i'm going to be creating the client application that's going to consume the api is using access so here's actually the of course have gone before throughout this and of korea something really simple where is this at least that's there you go so this is actually localhost 3000 this is the application here we got simple form that's gonna allow us to add the reminder obviously using ID reminder the exact reminder what we wants to be reminded off and of course the time when the reminder is gonna fire off of course just like the timing is not gonna work properly it's just like for you know just an example and here and you mean got the reminders and here we're gonna see the full list of the reminders right now we don't have nevermind ders and the code is actually not working because we simply just got reacts application in here and we got just like some simple reminders nothing is being rendered or fetch it from the database so for the restful api that I'm using using JSON server which is also well an open source JSON server just like feeding in with just like a JSON database and of course it's gonna allow you to use accrued api and then because it's actually the JSON or the database i'm using reminders because ID reminder and time and so on and so forth it is super basic so you can go and check it out and get humph with a JSON server and you can pretty much use it so as I've said in here we first I'm going to be doing gonna be using Axios to fetch the providers from the database and of gods a server running on port 9000 is gonna allow me to fetch it down here and of course accrued so occurred API which means I can create delete updates and of course requests whatever then I wants for that server so it's all being post right there really nicely for me so here your first things first what you need to do is of course as we always do I'm going to install Axios so I've already done that but just going to go ahead and do NPM install Axios make sure to save it as a dependency and there you go you are actually ready to go and really start for that particular case so after installing Axios and everything I'm gonna create a file called axials or gifs and here exclusive using CRA or clear reacts up project and I'm putting a gotten Axios file on here so what it wants I want to just export for instance of Axios from here and this is the really loved thing from Axios what I do love it is actually also to create instances with a default configuration then you can share and use it or reuse these instances without rewriting the whole code in a super super mental in that particular case so I'm gonna be doing in here I'm gonna be reluck doing important access from access simple dance and eventually I'm going to do like exports Axios instance equals exhales creates there is a static method in here which I which creates with a default configuration and then provided with the base URL so this is actually the base URL you're gonna be using in that particular case so the base is your one on here I'm gonna be using the local hose and 9000 port what you can do with that pretty much everything you can have like a default headers and of course lowercase hitters you you can have hitters in here I don't think of butts yeah I need to come in here so as I said you can have hitters in here and you can pretty much put whatever type of hitters you want for example an authentication or off hitter with a default value and all the request is gonna be made using this Axios in this is gonna be returned from the create function all of them gonna share the same headers and those headers gonna be sent in here you're gonna can create like simple off and yeah we can we can pretty much do whatever hey you can put the timeouts so how much does it take to timeout the request and for example you can save 3,000 for 3 seconds for the timeouts and you can you can do pretty much a lot of things you can like override or pretty much mock and change the response before hits like the final rule you know endpoints of the final callback and I think or you can do like max college links max redirects different kind of configuration check out the documentation for the dads but the most important part in here is actually you're gonna return an instance in here that we can reuse this instance with this default configuration most importantly is actually the base URL I'm going to be using right here so now we've got Axios from a base URL I'm gonna be doing here is actually the important Axios and of course it is a name import so I'm gonna be doing from Docs Axios and there you go we've got Axios this is actually the instance we have imported from there and yeah we got access inertia we got ratios listening to the localhost 9000 so if you go for example to localhost 9000 in here just to quickly check out what we do have and will be our key working with and they go on reminders so there you go we've got the list of reminders of course is gonna return an array of all the reminders you've got just by hitting this so we're gonna be doing in here first to get the list of the reminders what we need me to is simply just hit this API and localhost 9000 four slash reminders and using a get request obviously and I'm gonna be just getting that so here is actually the main application and all of the requests gonna be putting in some of this up components and I'm gonna be using hooks because we want a modern minimal like application API to work with so I'm gonna be using Reax hooks in here there are many stories out there covering how to use it with regular react components I want to just like coverage and how to use it specifically with hooks because a lot of people love to use in hooks including me of course anyways now here I'm gonna be first creating a state and that this day is gonna be like holding up reminders and you have set reminders and I'm gonna use States so you stays in here after is gonna take an empty array because firstly we have no reminder stretches whatsoever once the application of course is firstly mounted and after that I'm gonna be creating a function it's gonna be named get reminder so this function what is gonna be doing is pretty much gonna return a list of reminders and it's gonna fetching it from the server got a pair so I'm gonna just have like a response and using Axios so we just do like Axios dots and of course it's actually the instance you're created and here we can pretty much call a lot of like pre-made or methods of you godlike post Gantz we just need gets in here and the guest here tastes like whatever we want you want oh I can't speak from the base you are review to find because if defined this is actually the base you are also I'm gonna be doing and ads we wanna for example like reminders so that's gonna be doing exactly here I'm gonna forward slash reminders and we have no compilation so you can put it's like you know extended configuration there and I'm gonna be using cash so if it has any errors or anything doing comes along yeah yeah there you go so you got yourself an error and most important here make sure to Marcus asked asynchronous because I'm gonna use async awaits so you're gonna simply do a waiting here and obviously as I've said before it uses promises so you can do if you don't want to use a way to async why you can do in here you can just go didn't use then and then it receives a response and you can do the normal call back you way but I would prefer to use you know a sinker it's much more clear in or looks like a synchronous code in here now if the response is really great I'm gonna be doing just gonna do sent reminders and yeah I'm gonna be having blinders yeah response top geared up and appear is response and response time data make sure to double-check both of these not only advanced yeah so here we're going to be doing here this comes along whenever Erie renders I'm gonna have the reminders and giving good just for you guys to see exactly what I mean by reminders now this get reminder or get reminders very much very reminders functioning when we're gonna be calling this is actually once the components is mounted so on dismount hook and here we're going to be using the use effects lurking here and these effects here can hear if you just leave it like this it's gonna run every single render we wanted to run every single render we wanted to run only once at the beginning of the first mount so it's gonna act like and components the mounts life cycle so by just adding this empty array which means it just like happens to work and run only once and I'm gonna simply just call get reminders and everything's gonna be populated the states in here in the rain is gonna be populated or that it wants the DNS fetch and yeah super great I'm just gonna save that this says builds compile so Rapunzel candy yeah response I kind of like not spell incorrectly and a finger just gonna expects in here and if go look on the console sorry clearly seen here regards in array so there's actually the reminders we've got ID reminder so on and so forth so we got the full array now if you want just like to see the full DNR for example let me just gonna do console.log response so what the exact Axios response has together just like console.log the response in here and there you go so response in has a data so of course the response DNR what we are actually using has a response headers the actual request you firstly sense so you can have access to that a statues which is an HTTP status code and statues text which means either ok or timeouts different kind of like status texts and here's actually the configuration that helped to build and send the request obviously there so this is exactly what the response of an axial irks like it's super super simple and clean yeah you can use it whatever you actually exactly wants to work with now super simple we've got the reminders what we need to do next I clearly created before a reminder components which obviously didn't render every single reminder by just like you know feeding with a deanna laughter the reminder time ID and difference yeah are we gonna be needed in this case so what I'm gonna be having is actually I'm gonna be looping against all of that so I'm just want to do it in here it's first I'm gonna check if there's no reminders when I create the variables called no reminders which means the reminders array this array is actually empty or it's not valid so if it's like no reminders either no or undefined or if reminders I should be valid and we got reminders dot length equals zero which means it is a valid array but it is zero so this one is gonna equal to true otherwise if it is valid is gonna equal to false of course following this naming convention right over there so I'm going to be doing in here like knots they're reminders and then just like do reminders got map so I'm gonna map every single reminder and I'm gonna have it index so I'm gonna be a poignant reminder I'm just gonna put the props data in here because it just like takes the same names so I'm just gonna pass directly the reminder data and make sure whenever you render a collection which means you're actually rendering it array using a map on the reacts make sure to just like provided with a key otherwise it's gonna like super messy you're not gonna be doing it okay and yeah there you go serious in here we call reminders we firstly fetch the reminders using Excel super simply against we provided with the URL from the Axios instance and there we got everything happening to work exactly how anticipated and eventually of course by rendering that is super simple we ask you created States do that we of course make sure to check out this you can even add something like this like if you have like no reminders and you can do something like a ch3 or something no reminders okay you can have like an MC no reminders thing and here's the actual mike rizzo first step of this example or application is actually fetching all the reminders and there we go got all the reminders now what we need is actually to use this form in order to be able to add a single reminder to the database using the API and of course more specifically going to be using Axios in that particular case so yeah that's gonna go in and like create another function I'm gonna name this function and reminder so the add reminder function in that case is yeah so this is this is all gonna be done for add your reminder and before any reminder we need to grab the DNR from this input so this input also needs changes in here we need to just like update the error on a react state in order to keep track of this piece of data which means every single input all of these so I'm gonna be doing is actually creating another state I'm gonna do like form data and set form data screws in here using hooks versus regulates components or cost components is actually much better than class components it's super easy to work with and if just like need to provide something real quick or set up something real quick it can help you a lot doing that so I'm gonna be screwing like you stand in here and I'm gonna just provide an empty object because there's no DNA at first so this for India and I'm gonna create another function it's gonna handle change and the hell do chain gonna take an event which is either I totally forgot about es6 or our syntax and once the handle Val gonna just like do set form data so I'm gonna get form data which is was before because every this this method or this function is gonna handle every single change of us like a single input in here so this event is gonna just like be responsible for every single input so I'm gonna be doing here I'm gonna get event the targets dot name which is name of this input in that case and providing this name so for example ID or name equals reminder whatever so I'm just gonna like say this is the name I'm gonna be using this as a variable of course and equals the target value so it's gonna equal the value of the inputs as simple as that now we've got the set form data here has been set for us and yeah it should be successfully set all I need to do in that particular case is just like the unchanged so once it changes you're gonna pull handle change okay I'm gonna pop it base for all of these for reminders for ID and for the time inputs and yeah so now if you'd like for example we want to select you input something here this form variable is gonna be our changing and we're gonna have it with the other we know and now we got all the day enough for the form data inside of that object okay of course use this to pretty much add that there I'm gonna be doing in here make sure to mark this as a sling because when you use like a single weights and I'm gonna do response the ways I'm gonna use the access instance we created you create pretty much as many access instances as you would like to or as you need so this is a super important step to be thinking about I'm gonna do Axios Dodds post so I'm gonna use the post request in that particular case and they're gonna be full of flash reminders because we may just like do a post to the reminders you want our land here you provide it whatever you want all you want to just like hit with a post request with a post HTTP request in our particular case which is like reminders then the second parameter after the URL is I see the piece of the nav honor to ride in that case we've got our form data so you can provide a JSON data dependent on your server but does it except in our case we're not working with a JSON server just like provided with a JSON you know skim off idea just like provider like that which is a key value pairs and of course it's gonna work for our case and if you can you can of course add like a simple configuration for that particular request they will need to do that and of course you're gone so if any error happens you're just gonna use the catch I'm going to error and obviously I'm just gonna pronounce the actual error they're super easy and yeah we've got the response there so if we got the response we're gonna be simply doing it's in our case we just like gonna be refetch in everything you're just not gonna be recalling the get reminders function but in other case you would pretty much like go ahead and populate pretty much the way by yourself because you don't want to just like do an intensive request on the server and intensive request on the I met you work yourself so you wanna do over handle like that but in our case just like for a simple step so I'm just gonna do this again this is really bad thing to do so yeah you think you need to think about a better solution if you are gonna give production there are a case yeah it is super okay to go work with that simple enough now we're gonna do it since this bond is actually a type submit' so whenever we submit this whenever we click the button or lock we click enter enter this form the unsub may is gonna be fired up so I'm gonna just by catching the unsub method or call back right here and then just do like add reminder simple F now what we're gonna be doing is yeah it should be real Kareena so for example we got ID sex you're gonna add ID and this idea in here in the our particular case because my server is actually working it's not a real word server pretty much so we need to provide the ID but for you in some cases or pretty much in overall cases we're going to be doing you're not gonna be providing the ID it's gonna be also generated for you I don't know take shower or something okay let's remind ourselves you're taking a shower because we work a lot and it's gonna be 6 a.m. ok so I never click enter yeah there we go got take a shower and he mistakenly just put that in here doesn't really work that well but there you go we got to take shower it gets added for us and it gets refreshed exactly as we want it to be so he works find as we anticipated to be working now the second one which is adding or using post for creating using Axios is actually working pretty much fine and working with reax application so seriously now you got somehow an idea how everything works now the last i'm gonna be doing is i should be able to click on this cross or this like delete button and of course get rid of like one of the reminders we're gonna be the leaning in that case now if we go to the reminder components regards this delays emoji for the span and once we click on is i'm going to be like doing on glaze we passing it the ID of the currents reminder we wish to delete and of course this callback is going to be just passed through our props so i'm going to be doing is simply just gonna passing through out the props on the reminders and on the leads function so i'm going to be doing here calls police reminder we're gonna take the idea of the reminder we wish to delete and obviously i'm just gonna do like a request for the late in then have a response and from wait i have a sink in here so make sure do a safe then i use Axios and of course as always Axios has a delete method in that case so the list makes it takes the part of the URL you need to hit for deleting which is for example in our case reminder i'm gonna use like es6 literal syntax just to murder concatenate your strings i'm gonna be putting the ID so this is actually the format of the URL for deleting a single how much reminder just put the reminder then we give it whatever your ID wants and we send a delete request for that depending on your case so it depends on what request you're gonna be sending a message just like it depends on the server you're actually hitting in a case so eventually going to console.log hey there you go super simple now check if it has like a valid response and everything what we're gonna be doing is of course refresh the reminders by just calling get reminders again and here so I'm gonna be doing and there's um on deletes I'm gonna be delayed reminder simple enough and how we call the delete reminder and everything being hooked up exactly as you want it to be so for example you've tried to like go buy groceries we finished that reminder we did it and everything so just gonna cross it off the reminders list to click that's yep it doesn't seem to be exactly working so I think this should not be a reminder it should be reminders so we want just delete groceries and there you go we want to delete buy a birthday gift boom there you go I got all that and of course you can still refresh those are completely gone out of the debate system can add like different stuff or you want just like whatever in here and you can do for example for Pam click enter especially whatever in here we still can be able to delete that and whatever manage to much whatever we wants in here so screws in here Axios works pretty well for that particular case I just wanted to show you exactly how to work with Axios including reacts and different rendering stuff and different scenarios so how to include exertion Reax in that particular case from going from black and noob to pretty much a pro on working in different stuff like so just want to show you how exactly work with us because a lot of people should intend to love and work with Axios and still can't figure out how to exactly make it work the perfect way or the right way with reacts application and do all the rendering and stuff like that so you can take a look on the project gonna find the link in description below you can find it in my github repositories yeah you can find this projects you can clone it and you can play with it however you and yeah so thanks for watching I really hope you guys have your Victoria from ones like more videos like that yeah pretty much just push don't like bottom because gonna help me a lot and just gonna give me that you know super positive thoughts positive power so yeah I appreciate that Gaza make sure to go and subscribe because a lot of you watching my videos are not subscribed so really appreciated if you just like hit that subscribe button without further ado guys without further saying I was catch you all in the next videos adios

Channel: CoderOne

Views: 20,190

Rating: 4.9103141 out of 5

Keywords: React, React.js, React javascript, React Hooks, Hooks, React 16.8, React the one with hooks, Javascript, Web Development, React developer, React javascript developer, React hooks 16.8, javascript developer, React library, UI/UX, React Components, React useState, Web Developer, Frontend developer, React Frontend, Why react, Why frontend, Axios, RESTFUL API, http client, Axios http client, rxios react, react fetch, react http, react restful, react graphql, react restful apis

Id: AirWT_XpEpM

Length: 26min 1sec (1561 seconds)

Published: Thu Jul 16 2020