Untuk melakukan operasi CRUD tentunya kita membutuhkan data dan interface untuk mengolah data tersebut seperti contohnya Rest API. Pada tutorial ini kita tidak akan membuat sebuah Rest API yang kompleks. Kita hanya akan membuat semacam dummy/fake Rest API yang lebih simpel untuk diimplementasikan pada aplikasi React kita. Di sini kita akan menggunakan sebuah package npm yang bernama json-server (https://github.com/typicode/json-server).
Secara sederhana json-server akan menggenerate sebuah aplikasi dummy/fake Rest API dari sebuah file dengan format json. Untuk itu kita perlu membuat sebuah file json terlebih dahulu. Buat folder baru dengan nama data pada folder aplikasi kita (todo-app) dan tambahkan file baru dengan nama db.json. Tuliskan kode berikut pada file tersebut.
data/db.json
{
"todos": [
{
"id": 1,
"title": "Hit the gym",
"done": false
},
{
"title": "Pay bills",
"done": true,
"id": 2
}
]
}
Sekarang untuk menjalankan dummy Rest API nya kita tinggal mengetikkan perintah di bawah ini dari terminal/command prompt.
npx json-server --watch data/db.json --port 8000
Note:
- pada perintah di atas kita menjalankan dummy Rest API pada port 8000. Kamu bisa mengubahnya sesuai dengan yang kamu inginkan.
Kita coba test dummy Rest API kita apakah sudah berjalan atau belum. Buka url http://localhost:8000/todos pada browser. Jika tidak ada kesalahan akan tampil response data dari dummy Rest API seperti berikut.
Source Code: