Create your own API for react App

React.js is a popular JavaScript library for creating beautiful UI interfaces. We need a dummy API to study React.js with. However the majority of APIs are not free to use. As a result many newcomers became stuck at a point where they thought on their own API. So, in this article I will demonstrate how to create our own API and use it in our React application.

Step - 01

In the beginning we will create a JSON file and add some dummy data to that file.

[
  {
    "id": 1,
    "firstName": "Izak",
    "lastName": "Feltham",
    "age": 19,
    "gender": "Male",
    "email": "[e-mail]",
    "phone": "260-539-5575",
    "address": "2275 Anthes Center",
    "image": ""
  },
  {
    "id": 2,
    "firstName": "Wynn",
    "lastName": "Spragge",
    "age": 88,
    "gender": "Female",
    "email": "[e-mail]",
    "phone": "304-813-6647",
    "address": "05337 Chive Lane",
    "image": ""
  },
  {
    "id": 3,
    "firstName": "Olympe",
    "lastName": "Heimann",
    "age": 80,
    "gender": "Female",
    "email": "[e-mail]",
    "phone": "158-902-0204",
    "address": "3 Huxley Place",
    "image": ""
  },
  {
    "id": 4,
    "firstName": "Woody",
    "lastName": "Fensome",
    "age": 92,
    "gender": "Male",
    "email": "[e-mail]",
    "phone": "652-643-0255",
    "address": "505 Schlimgen Circle",
    "image": ""
  },
  {
    "id": 5,
    "firstName": "Nessa",
    "lastName": "Bonny",
    "age": 26,
    "gender": "Female",
    "email": "[e-mail]",
    "phone": "584-541-5884",
    "address": "12 Dixon Lane",
    "image": ""
  },
  {
    "id": 6,
    "firstName": "Thaddus",
    "lastName": "Baurerich",
    "age": 28,
    "gender": "Female",
    "email": "[e-mail]",
    "phone": "659-106-8320",
    "address": "02 Pierstorff Point",
    "image": ""
  },
  {
    "id": 7,
    "firstName": "Scarface",
    "lastName": "Skeermor",
    "age": 34,
    "gender": "Male",
    "email": "[e-mail]",
    "phone": "896-768-9573",
    "address": "00 Buhler Terrace",
    "image": ""
  },
  {
    "id": 8,
    "firstName": "Harris",
    "lastName": "Morecomb",
    "age": 21,
    "gender": "Male",
    "email": "[e-mail]",
    "phone": "627-118-4075",
    "address": "605 Moland Hill",
    "image": ""
  },
  {
    "id": 9,
    "firstName": "Augustin",
    "lastName": "Stove",
    "age": 56,
    "gender": "Male",
    "email": "[e-mail]",
    "phone": "761-730-9826",
    "address": "51 Browning Way",
    "image": ""
  },
  {
    "id": 10,
    "firstName": "Albert",
    "lastName": "Megarry",
    "age": 60,
    "gender": "Male",
    "email": "[e-mail]",
    "phone": "188-171-4741",
    "address": "48222 Holy Cross Road",
    "image": ""
  }
]

Here, In this JSON file you can see that the value of the image property is missing. We will fill this property later. Now save this file as data.json in your current directory.

Step-02

In this step you need to make another directory as images and put some images in this directory.

Step-03

Now, you need to create a new repository in your github profile and push the data.json and images directory to that repository.

Step-04

In this step you can see that in your repository you have an images directory. You will find a link for every image. Just copy that link and paste in your data.json file. Remember you need to take the raw image link for the directory.

Step-05

After putting all the links of image, you need to push that data.json file in your github again.

Step-06

Now, your api will be ready to use. Just go to the data.json file and click to the raw link then copy the link and use it in your React Application.

Note: You need to create a public repository to use your own API in this method. Follow the YouTube video to fulfill these steps.

Thanks for reading this article. Happy Coding..✌️✌️

YouTube Video Link

Demo