Create your own API for react App
Tags: webdev, react, frontend, api
Published: 2024-04-29 08:55:41

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. 

```javascript
[
  {
    "id": 1,
    "firstName": "Izak",
    "lastName": "Feltham",
    "age": 19,
    "gender": "Male",
    "email": "ifeltham0@nih.gov",
    "phone": "260-539-5575",
    "address": "2275 Anthes Center",
    "image": ""
  },
  {
    "id": 2,
    "firstName": "Wynn",
    "lastName": "Spragge",
    "age": 88,
    "gender": "Female",
    "email": "wspragge1@narod.ru",
    "phone": "304-813-6647",
    "address": "05337 Chive Lane",
    "image": ""
  },
  {
    "id": 3,
    "firstName": "Olympe",
    "lastName": "Heimann",
    "age": 80,
    "gender": "Female",
    "email": "oheimann2@weather.com",
    "phone": "158-902-0204",
    "address": "3 Huxley Place",
    "image": ""
  },
  {
    "id": 4,
    "firstName": "Woody",
    "lastName": "Fensome",
    "age": 92,
    "gender": "Male",
    "email": "wfensome3@shinystat.com",
    "phone": "652-643-0255",
    "address": "505 Schlimgen Circle",
    "image": ""
  },
  {
    "id": 5,
    "firstName": "Nessa",
    "lastName": "Bonny",
    "age": 26,
    "gender": "Female",
    "email": "nbonny4@csmonitor.com",
    "phone": "584-541-5884",
    "address": "12 Dixon Lane",
    "image": ""
  },
  {
    "id": 6,
    "firstName": "Thaddus",
    "lastName": "Baurerich",
    "age": 28,
    "gender": "Female",
    "email": "tbaurerich5@newsvine.com",
    "phone": "659-106-8320",
    "address": "02 Pierstorff Point",
    "image": ""
  },
  {
    "id": 7,
    "firstName": "Scarface",
    "lastName": "Skeermor",
    "age": 34,
    "gender": "Male",
    "email": "sskeermor6@vinaora.com",
    "phone": "896-768-9573",
    "address": "00 Buhler Terrace",
    "image": ""
  },
  {
    "id": 8,
    "firstName": "Harris",
    "lastName": "Morecomb",
    "age": 21,
    "gender": "Male",
    "email": "hmorecomb7@com.com",
    "phone": "627-118-4075",
    "address": "605 Moland Hill",
    "image": ""
  },
  {
    "id": 9,
    "firstName": "Augustin",
    "lastName": "Stove",
    "age": 56,
    "gender": "Male",
    "email": "astove8@php.net",
    "phone": "761-730-9826",
    "address": "51 Browning Way",
    "image": ""
  },
  {
    "id": 10,
    "firstName": "Albert",
    "lastName": "Megarry",
    "age": 60,
    "gender": "Male",
    "email": "amegarry9@weibo.com",
    "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](https://youtu.be/sUwXeK5OTlc)