React Native tutorial #46 API Call | Fetch Rest API

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
hi everyone so now we learned that how we can call Api in react native and maybe in your mind there is some questions like what is API why you have to call Api in react native and all we'll talk about this also but before that see this is not a last video on API in reacting we will learn more things like apis method how we can just plot a list with the API and how we can re-render or create Dynamic components with the apis and all right so there will be around 7 to 10 videos on this topic now let's talk about what is API see API is something that can fetch data from backend and we can integrate this data or we can display this data on the UI why because see JavaScript or front-end applications like Android applications iOS applications or web application directly cannot connect with the database right for that we have some server side scripting language like a PHP Java Python and role so that's why firstly we'll create API in the server-side scripting language and after that we have to integrate this API in the front-end technologies that could be angular react react native or it could be any mobile application uh technology right and you don't need to worry about like how we can create apis do we need to learn about database and all no that is the part of backending back-end team will handle it at all right if you are full stack developer then you may may need to create apis and all but if you are a front-end developer then you don't need to worry about that you just have to uh the API URL API data and all and then you can integrate it simply all right so now let's talk about the points of this video so first of all we will call uh we will create a function to call Api then we will store this API data in a state and after that we'll display this data on the UI and at last we'll cover some important interview question zones also next thing you can ask like we don't have any API then how we will integrate these API so this is the site let me just show you there you can get lots of free apis right even let me show you here you can see that this is the example how we can just call apis in JavaScript right after that these are the types of API here you can see that this is the format of API response that we will integrate and some other apis also like apis have some methods like get method post method put batch delete and we will learn all of these method with the in a separate separate video right this is a simple API call so I am not talking about there I am not going to talk about what is get and what did what is post and all that we will talk in the upcoming video just integrate this API for a moment right and what API will integrate so here you can see that this is a small API right so we have that user id id title and body so we will display this data in our application and the similar kind of API will be developed by the backend team and they will give you the URL and other details and after that you are able to uh just integrate this API in your JavaScript or in your any front-end technology mobile technology and all right so now what we need to do we can just jump on the code here you can see that there is a just simple code there is a we already know what is that do but after that now just that we will start writing the code for E5 so I am creating a function let's say get API data there is a one just small task for you just let me know what is uh full form of API and you can just answer this in a comment section right after this we created that function right and let me just print something there let's say hello and now how we can call this function and if you especially if you want to just call the API on the page load that time we can use use effect cook right so let me what is use if I took I already created the video over there just use effect you can import it this is the hook as I already told you in the previous videos link is given in the description box for complete playlist if you haven't just watched that video right so there I am putting a a blank array so that it will just call only on first time and there we can call this simple function get data API this one this function right don't forget to put the brackets at the last save it and here you can see that hello this is just coming from this console.1 that means this is working perfectly fine great now we can call our API there so for that what you need for just get API you need only URL nothing more than it and uh let me just uh take a variable let result and here we will use fetch this is the method or you can say that the yeah this is the method that will be more accurate word for the beginners right and if you are the advanced level then you can understand that this is the API in the JavaScript right fetch okay so now we can even you can just take a another constant with the name of URL and just save your API URL there and now let's pass this API URL like this perfect and now let's check what we are getting in this Result One let's save it and here you can see that we got just some uh known readable or weird alert why because this is basically written a promise so to just handle this promise we have to create this function as a async and need to put await before that right so that data could be just synchronized and now again you will find some lots of data there right when you just check it out there there is a status and all there is a huge amount of data to distribute reduce it what you need to do just create uh one more line there result equal to result because I am just using this result variable again dot Json I am just converting this result to the Json because this is in the readable stream not in actually the uh data and now you will find okay and again we have to use their await and now you will find that we are getting the same data whatever we have in the uh API so let me just zoom it out for a moment here you can see that user ID write title and body and everything right here you can see that user ID and node so now you can store this data inside the um [Music] a state right so let me just click const data and set data this is a normal State we already talked about lots of time about this right so use State you need to import it from react not react native by default it could be anything let's say I'm just putting it undefined and after that what you need to do just simply uh [Music] um yeah just simply put their set data and store result inside it right there will be no impact for your application because we are not just displaying something and after that just come there and check if data is present if data is not undefined then let's just show a view there right let me just close it also and if there is nothing if this is undefined then just print the null we don't need to print anything right but there is some data then let's take one more text even we can just click text till the next line just put their hello that means there is some data hello is printed there okay we can just simply use tile to just show the bit bigger size of text perfect right but now how we can just print this data we we got this data we called the API we would store this data in a state but how we can print it printing is very simple just simply use the data this is a state let me Define there right data dot ID and now it should print one here you can see that y1 because we have a ID and user id1 similarly you can do that one more thing put there user ID store it and here we get one more thing after that let's say choose a DOT um Titan right and last key is body also so let me just print that body also use the DOT data dot body and here you can see that we got the old data there right so this is a simple API we call and basically this is the get method so what is get method and all don't worry I will tell you in the next video so if you just learn something there then I'll request you to please like this video subscribe my channel and just put some feedback in comment section and this is my paytm number four dimension in next video we will learn that how we can just uh use this post API this is there is a lots of that right what is get API how we can just uh display all of these data right right so thank you so much for watching this video and I'll request you to please subscribe my channel thank you guys
Info
Channel: Code Step By Step
Views: 5,598
Rating: undefined out of 5
Keywords: React Native tutorial, API Call, Fetch Rest API, fetch api in react native, React Native api call, react native tutorial for beginners, react native get data from api
Id: NuKQk7nbk0k
Channel Id: undefined
Length: 10min 27sec (627 seconds)
Published: Fri Jul 28 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.