How to Create JSON Server in React | JSON file as a server for fake API in React JS

hi in this video tutorial we will learn how to use a Json file as a server for fake API in react.js so this is useful when we want to test our application without relying on the real API we don't need to read API here we will test our application with this file this file run as a server with as so by using this Json file as a fake API we can easily Mark API response and test different scenarios without making a real API calls so let's create this so first of all we will create a file in our react app okay that is db.json I hope I named it db.json then I have just wrote a few recurs in it you have these records and after that we will install Json server to install that we will simply write npm install Json server after installing you will see that in the package.json see here let's come here see json.0 I have already installed it so now we will learn our Json server to run the Json server we will simply write Json server watch db.json and assign A4 to this 1331 this quote I will assign to that so let's run it see our server is running so now let's check it see we have these three cards in it okay this is the URL this is a local house slash users so now let's create a program to fix data from our server I will come here and just try it this and I will use the use effect hook face the data in it okay so let's write a dependency and now here I will write I will fix the data now so I will use axis library for fetching the data okay axis I access is imported dot git so here I will write the URL see let's copy this URL and let's paste it here after it we will get a response start you have a response and so now let's assign our data to our variable I will create a state const that would be data is equal to sit data I will use use effect to use statehook and it is in Array type it as so now let's assign our data to that data I will just write result.data sign out the data and if there was any errors we catch that okay here so we can sold that error yeah we pitch our data and we store that in this data variable so now let's display the three cards so to display that I will create a table for that and I will assign a class name to this that would be table and here we'll just we can pick the columns also dynamically so I will just write it manually that we have ID name and email section ID and email so now we will fetch our data so I will use body so here I will use map function data.map and here we will have data in an index so let's write return create this tag and assign a key to this that would be I and now let's print our data in a TD tag here we will print our data D dot ID and same to that email end name name name and after that email and before this I'll just dial it container imagica would be I uh let's run our server npm start so first I should import this Json server in index page okay let's import it Json server and let's get this and I will use it instead of table let's save it so now let's come to the Chrome and let's refresh our page we have this data okay see there ID name and email and we have these data so we got the data from our server using the API okay so same to this so you can use post and delete and update with this server so you can do that easily so it was creating the Json server so if you like this video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 31,026

Keywords: json server rest api in react js, react json server, json server react, react, json server, json server tutorial, json server react js, react crud with json server, react js crud operations using json server, react js crud operations using json server rest api, json server tutorial for beginners, react using json server, json server rest api, json server fake api, react tutorial using json server, react js with json server, json server with react, using json server with react

Id: _j3yiadVGQA

Length: 5min 57sec (357 seconds)

Published: Mon Feb 06 2023