Tanggal :October 25, 2020

Cara menggunakan Fake Api di React Js dengan JSONPlaceholder

Spread the love

Reactjs merupakan sebuah library front end yang biasa digunakan untuk membuat tampilan utama sebuah website. dalam pembuatan website moder seperti sekarang ,sebuah website biasanya terpisah menjadi sebuah back end, dan front end. dalam pembahasan utama kita menggunakan react js biasanya hanya dikhususkan membuat tampilan front end sebuah website. dalam komunikasi sebuah website modern antara back end dan front end biasanya menggunakan API.

Nah dalam tutorial kali ini akan menggunakan Fake Api dari JSON Place holder. dimana api ini akan digunakan untuk menampilkan data project react js anda.

JSON Placeholder sendiri anda dapat mengunjungi websitenya di sini.

Hal yang pertama yang dilakukan untuk menggunakan Fake API dari JSON Placeholder adalah membuat data file db.json.

posisi file db.json
posisi file db.json

simpan file db.json di folder src.

isi file db.json sendiri berisikan API yang akan dikirim ke halaman utama project kita. copy code berikut di file db.json:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

nah setelah itu anda dapat menjalankan Data JSON tersebut menggunakan JSON-Server.

anda dapat membaca dokumentasi json-server disini.

install dulu json-server menggunakan perintah dibawah ini :

npm install -g json-server

jika perintah instalan tersebut telah selesai, jalan kan perintah ini untuk menjalankan json-server:

json-server --watch db.json

ingat ! jalankan perintah diatas di command di file source project anda.

jika tampilan command anda sudah seperti dibawah ini, maka server anda sudah berjalan.

Run di command Prompt
Run di Command Prompt

nah setelah itu anda dapat mengunjungi http://localhost:3000/posts/1 untuk melihat Fake Api yang telah dibuat, jika hasilnya seperti dibawah ini maka Fake-Api telah sukses.

Hasil Run Json Placeholder
Hasil Run

Tutorial selanjutnya adalah menampilkan Data Api, Menghapus dan Mengedit serta Menambah Data Api.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *