React Axios API calls and map function

[Music] hello everyone and welcome back to the channel in today's video we're going to be using react we're going to use the map function we're going to be using axios and we're going to be using some bootstrap um so in today's project we're going to be making this contact card we're using a an api the faker.js to get all the contact information so let's get started and please everyone if you like these videos and would you please consider subscribing to my channel and hitting the like button it would mean a lot to me thanks very much okay so let's jump into the vs code okay so we're going to need to install some dependencies first so we're going to install npm install axios we're going to use axios and we're going to install react bootstrap so to install react bootstrap we just go to react bootstrap to have the documentation here and we need this line of code here so we just copy this and paste it in there we don't need npm installed again so we're importing axios and react bootstrap bootstrap okay press enter on that and let npm install it for us i'm just going to pause the video for a second less important okay so then packages are installed now so inside in our app.js file i've removed everything all we have is our function and the main div for the class name of app so let's start our development server so i'll do npm start okay so when everything is cleared over fjs we just have a complete blank file um i'm going to be using bootswash bootswash provides three teams for bootstrap so it changes the default teams inside and bootstrap and the one i used for this project is this one here superhero so to use that for just download and we download the bootstrap main.css file click dash and wait for that to download okay and once that's downloaded then just drag the file inside into your source folder okay now once we have it inside in our source folder we go to our index.js file and we'll just import that css file in here so say import slash bootstrap dot min dot c ss just rename that i already have one in that folder this way you renamed it okay so go into our import save that file now it's compiling and then if we go back to our app we see that we have a different background because this css file is applying different um teams to our project okay so let's jump back into vs code and we'll start on the project okay now so let's start on the navbar i'm going to create a inside the source folder i'm going to create a folder called components okay inside this components folder we'll start with the with the navbar so nav bar component dot js and i'll be using the extension es7 react redox graphql react native snippets and i'll show you what this does it's a shortcut for setting up the functions in react so just close that if i type in rafce and press enter it automatically creates a function with the name and it exports it as default down at the bottom okay so inside our navbar we're going to use a boots some bootstrap so up at the top i want to import and we're going to import container from bootstrap i'm going to import the navbar and we're going to import that from react bootstrap okay so in here then i'm going to have a nav where this is just our bootstrap navbar who wants a sticky so it'll always stay on the top i want to set it to the top and we're going to give it a background color of primary which our new css is going to have a different color for primary compared to the original bootstrap and we'll give it a variant we're going to set that to dark okay close that tag never so inside the network we're going to search a container and then in the navbar we're going to have nav bear i won't have a brand new beard up brand um set to href is going to be equal to home and we're just going to give it some text of contact farm okay we'll save that now so inside in our app.js then we'll bring in dash nav bar so just create a line and okay a shark content to import the navbar from that file is just go to the very last letter after the navbar and press ctrl and spacebar and now it's after finding into components folder first so we press tab and now it's after importing that component for us and if that doesn't work you just have to type it out so we'll save that now we'll just wait now for the finished compiler okay so we have an error here whatever is after happening just quickly okay okay let's go and see if so oh i have a typo here okay so it should be navbar dot brand which a capital b so let's go into our project again and now we have our contact farm navbar okay so next on the list is contacts so inside in our components folder again we're going to call a file creation file called context dot js and we're going to use the shark push again r a f c e okay so for our context in we're going to be using a button and a card from bootstrap so we're going to import them going for the button and card import him again from react bootstrap okay now all right so next we're going to create a contact file so we go back to our components folder plus and we're going to create a contact dot js okay so in our contact js file and we're also going to need a contacts okay so contacts okay now so inside here i'm going to use the shortcut again r a f c e now we want to import so inside here we're going to use fragment then we're going to have a use effect so we want to import to use effect and we're also going to be holding some station here so we're going to bring in new state okay so we're going to import axios as well to make the api card so we're going to import axios from axios and we're going to use some bootstrap as well to sort of import column and row so we can kind of have a grid effect for the cards for all the contacts we're going to import kyle and row we're going to import them from react bootstrap okay so we're going to have some stage at this top here we want to say this is going to hold our contacts after our api call so const i'm going to use the use date so we're just going to say contacts and we want to set contacts so we want to give that initial stage of an empty array and so we're going to have in my loading stage as well so once the api is complete then we're going once the api call is complete we're going to show all the contacts so we're going to set a loading piece of state or boolean i'm going to say set loading then we're just going to have a used and we're going to give the initial value of false okay now we're going to make our api card so we're going to say we're going to create a function called get contacts and we won't use an asynchronous function so we're going to say async okay so we're going to use a try catch for our asynchronous so we won't say try catch so first thing he's going to try is going to try and fetch the data from the api so we're going to set a con variable of res so we'll say res is going to be equal to a weight and then we're going to say axiorys.get now so i'm just going to get the api url here i'm going to paste it in so i want to make an axios get requested to [Music] https.randomuser.me api question mark results equals 12. you can set this to and you want i've just set it to 12 for this uh tutorial so what this does here is just making the api request and it's bringing back 12 contexts so that's just a query inside that okay so once we make that request it's going to await the results so once the results come back we're going to set the contacts that's our set contacts is our use state on line seven so we're going to store the array here so we're going to say set contacts i'm going to set it to response res.data always returns response.data and inside in-dash um api request is going to be results so we want to set it to the results okay once that's turned in we're going to set the loading to true and on the error if an error comes in we're just going to alert the error so we're just going to let dr.me yes that message okay so to get this function to work then we're going to put it in a use effect so just above our state then we want to say a new line so we're just going to use the use effect function um we don't need that part we wanted to just run once once the page loads so we just use some empty square brackets and in here inside use effect we're going to call this function we just made get contacts which i just noticed are spelled wrong okay so okay let's go back to our fjs and we bring in the contacts that's after important automatically with react if it didn't import automatically for you just type in this line of code and line two import contacts from dot components dot contacts let's save that context.js use dish is not defined context gs just a typo there use state save that now okay we're just getting some warnings because we're not using these dependencies yes so let's go back to our contact form nice inspect element i'm using the react dev tools add-in so just you can install this if you just go and go to the google web store just type in react devtools developer tools and this is the one i'm using if you download this and install it it's very handy for debugging and seeing what state you have in your react app so i'd recommend downloading that so we'll go back to our app now and inside in our react dev tools and inside contacts if we click this state you open the state now we can see all our api all the contacts that the api call has brought back for us and just to show you how i got the api so if we copy this line of code here just to address copy that go back to google just paste in that address press enter there's the api call and this is how we brought it back when i said response that data.results here's the results so bringing back in all the contacts so you can see it's bringing back genders location addresses time zone email information so if you create an application you just want some fake information to fi to fill it up and get it going quickly okay so we go back to the app now so down in our return i'm going to change this div to a fragment react fragment first thing we want to return we're going to say is a row right so inside in a row i want to use some javascript inside here so we use our curly brackets and only when the loading is true so initially starting up with files and when the api returns it's going to be true so only when it's true use two double ampersands we want to map through um all the contexts in our state so we're going to say contacts map and what for each contact inside there we're going to return we're going to return a react bootstrap column right so inside a react bootstrap column we're going to use the small medium and large to make responsive so let's say on the small screen it's going to be 12 white on a medium screen six and on a large screen we're going to set to four now what i said the key is going to be equal to the contact dot login dot uuid so that's going to be any key where i got this from is inside in the api call and contacts login let's just find one notes so our login and here's the uid so that's a unique identifier for each one okay so back to our app again just close that for a second okay so so let's just return something first and we'll see how it's looking so um we'll return the contact and we'll go back to our api call and see what we can return so we'll bring back our first last name so it's going to be contact dot name dot first so contact dot name dot just check do they have a capital if no okay so we save that now go back to our app okay so you can see all the names is coming back and you see that the way it's been separated into three columns you go down to the smaller one s1 column that's because we're using the row and the columns on the smart screen is going to take up 12 that's where react boot trap works 12 is going to be the full screen say extend 6 is going to be half dash so we get two once you go see there's no six and six is twelve then on the large screen then is going to be four so four goes into twelve three times it's going to take up three columns so that's not very good at the minutes so we'll finish off our app and bring back the proper contact card is not very useful like that okay so instead of bringing back just the first name we're going to create just a contact component so [Music] we haven't made this yet so just create this now quickly so a contact i'm going to pass through a proper of contact is going to be equal to the contact okay now so over in our components folder again create a new component and we're going to make it the contact that we've just used in our context.js file okay contact sorry contact.js um so we're going to use the snippets again rafce okay so back in our contacts js we'll just bring in that so let's say or we can try our shark wash again we can scroll down here and after the t press ctrl spacebar and there's after finding that first so if we scroll back up let's see is after importing it for us so we save that everything is good okay we go into that contact.js file now and we create each individual contact so we're going to be using a bootstrap button and card here so i'm going to import them from bootstrap so import and if we're going to say button i want to import them from react bootstrap and in here we're going to bring in a button and we're going to bring in the card okay so just use an empty fragment okay so we won't bring in the card from react bootstrap i'm going to set a class name you know of some of some react bootstrap classes class okay so we're going to give it a margin on the top and the bottom my s react for that of tree margin top and bottom we're going to give it a pattern of tree and we're going to have the card rounded corners so we'll add a rounded glass and we're going to give it a height of 90 okay so in our card in we're going to have a card image card dot image i'm just going to add some inline style in here so i'm going to say style it's going to be equal to so i'm going to say object fit contain and that contains the image inside the card first in the top and then we're going to use some boat strap we're going to set a variant to the top to put the image on the top variant equals top and the source so the image source is going to be so from our contact it's going to be the dot picture and we want to set it to the large image so where i'm getting the image from inside in our api so our results and we scroll down to picture here's the picture here's the large and my staff returning is just url address for that image okay so we need to we've passed in our prop so we wanted to structure it in here contact okay image is a self closing one so we delete that okay so after our image we're going to start to carry that body card dot body inside the card up body we're going to set a card title and for the card title we're going to set it to would you use some backticks and we're going to use a dollar sign and two curly braces this allows us to add some variables into a string so we're going to set it to the contact name so we're going to set to the first name and we're going to create a space then the contact contact.name dot last okay we'll see if dash we have an error here of two card titles get rid of that which is set to close which are card save dash okay let's go into our app and see if this is working okay so now we're bringing back the picture and the names of each person okay we're getting there now so after our card title and our card image we're just going to bring in a card subtitle so d card dot subtitle i'm going to set some more bootstrap classes in here so we're going to give it a margin bottom of two i want to set the text muted okay so in here we're going to say address let's save that we'll just quickly go back in i don't know why that keeps going to point the card on the button keeps changing save that go back to our app and now we can see address and the text up muted makes it slightly gray okay now we're starting inputting some more information so we're going to use a card card.txt so inside our card.text we want to put in a div so inside this div we're going to say strong tag and we're going to say number we're going to set the number then to the contact location the street number so this is going to be the start of the address we're going to say contact that location that street that number and where i'm getting all these from if we go back to our api so we're bringing these back from here see the location street and then number okay and then under that then we'll create another div so i'm just going to copy this and uh altered so paste that in this is going to be instead a number this is going to be street and instead of number here this is going to be name okay so i'm going to do the same again we're going to copy this and instead of street this time we're going to have city just after notes and i have a typo sdr okay so city contact location street this should be city copy it again for the next part of the address it's going to be state change the city here to state all right so okay we'll save that now and just see if it's all working okay okay so yep we have the image the name address and we're bringing back okay we have a typo we're not bringing back the state and decision oh we need to get rid of street on the city we need to get rid of street and the state save that now go back in now now everything is as it should okay so i'm just going to add in some extra things here now we're going to copy this line of code on 17. and reload the character text we paste dash and instead of address now we're going to push in phone and we're going to copy this i want to use a character.text again just after changing again for some reason so the character text paste in our div we don't need a strong tag this time and we're going to say contact dot phone okay we're going to copy all of this again one more time instead of phone this time we want to have email and we push email here okay just save that and see did i copy it right email and phone okay so then we're just going to use a bootstrap um button and i'm going to wrap the whole thing in an a tag to make it clickable um first i'm just going to bring in the button i'm just going to place some style into this button so once this style is equal to i'm going to say barter i'm just going for a border radius of 20 pixels and we're going to set the class name is equal to we're going to use some bootstrap again we're just going to say the width dot 100 and that's going to set the width of the button to the 100 to the cart and we'll just set a variant of primary and it's not going to be the blue like you'd see with the normal bootstrap is going to be set to orange because we we have the our different css brought in we have boots watch brought in so it's going to be a slightly different color save that now go back into our app now we can see our buttons we have not named them yet so so just inside in the button we're just going to have contact written inside the button now see our buttons and the boots washes out adding some hover effects react um react bootstrap and they're both swatched now limit they're very good to get your site up and running very quickly under the hood stuff now so i'm just going to add an a tag around the button and we're just going to so i'll say i'm going to set the href now the href is going to be equal to we're going to use some backticks again and use some javascript in here and we're going to say mail to now we use our dollar sign and our quarterly brackets to do some javascript in here i'm just going to put in contact dot email just close our tag there and we move the closing tag of the a and bring it down to the end of our button so we just after wrapping our button in in an a tag and what the hrefmail2 does is it'll open your default mail browser and put in the contact email as where it's going to be sent to so let's save that now this won't work it'll be a fake email address but if you're making a contact kind of farm for your own website and you wanted the user to be able to contact the person this is a handy way of inserting their email address we go back to our app just make that larger and if we click on a contact now you can see the email is after popping up with this contact's email address let me just try another one as an example now we have one for another contact with this email address so that's just a handy thing for creating a link to pop up an email with the person's address in it so if we click on some other email address it pops up our default email with the user with the contacts email address so it's very handy okay that's just a quick little tip okay so we're going to add a container on the main page to make it a bit narrower so we go back to our app and go to our app.js so we're just going to want to wrap the contacts in a bootstrap container okay bring the contacts inside the container and we just import dash so that's actually important save that now go back to our app now you can see is after tidying it up everything is wrapped inside in container first and we just go into our div tools and you can see bootstrap and make a responsive for us so we've finished the wrap now and and if you wanted all the text to flow to the right like what bootstrap normally would do just go back into our app we're going to our app.css we don't need any of this css here because we're just using react delete all that if you want your text then floating on the left just come without that save your file go back to our app and now the text is on the right and we'll see that our responsiveness is still working now thanks very much for watching and i hope you enjoyed the video if you enjoyed these videos please hit the like button and subscribe to my channel you'll be notified when all new videos are posted thanks very much for watching i will see you all in the next video

Channel: tommykelly100

Views: 1,825

Rating: 5 out of 5

Keywords: react axios, react axios tutorial, axios react, how to use axios with react, axios react hooks, axios react api, react axios get request, react axios async await, react axios cors, react axios post request, react axios crud, react axios api tutorial, react axios http request, react axios put request, react axios login example, react axios get json data, react axios get bearer token, react axios get request with headers, react, axios, http request, post, json, javascript, tutorial

Id: Qi8-20BhgbY

Length: 45min 39sec (2739 seconds)

Published: Mon Feb 22 2021