Build a React CRUD App using a RESTful API

Bismillah, Halo semuanya, Alhamdulillah masih di beri kesempatan untuk sharing terkait programming khususnya untuk web programming yaitu Frontend Javascript.

Intro
Sedikit cerita, setelah sekian lama keputusan untuk memilih Framework Javascript yang saya pilih di awal-awal React dan Vue akhirnya saya menemukanya jawabanya yaitu adalah sesuai dengan kebutuhan proyeknya, pilihan pertama saya adalah menggunakan vue karna sintaknya simpel dan mudah di pahami dan juga saat itu saya di beri kebebasan mengunakan Framewok apa saja saat 2018, dan saat 2022 saya mau tidak mau harus mengunakan Gatsby lalu Next yang tidak lain adalah Framework dari React, dan di 2023 ini saya mulai belajar dari dasar tentang React.

Oke langsung ke topik utamanya, kali ini kita akan membuat aplikasi yang umum kita dengar yaitu CRUD (Create, Read, Update & Delete) dengan Rest API menggunakan JSON Server.

Setup Project

Install React
Pastikan node.js sudah terinstal di komputermu lalu ikuti perintah berikut untuk membuat proyek React melalui terminal.

npx create-react-app my-app

Install JSON Server
Buatlah folder db di folder root my-app lalu install JSON Server melalui terminal.

npm install -g json-server

Setelah Reactdan JSON Server berhasil di install buatlah file db.json di dalam folder db dengan struktur folder dan file seperti berikut:

Isikan file db.json dengan data seperti berikut:

{
  "users": [
    {
      "id": 1,
      "name": "Hamzah Fanan",
      "email": "[e-mail]"
    },
    {
      "id": 2,
      "name": "Abbas Fanan",
      "email": "[e-mail]"
    }
  ]
}

Lalu jalankan JSON Server

json-server --watch db.json --port 2000

Selama JSON Server berjalan kita bisa menggunakan route yang telah kita buat di file db.json seprti berkut:

GET http://localhost:2000/users/
GET http://localhost:2000/users/:id
POST http://localhost:2000/users/
PUT http://localhost:2000/users/:id
DELETE http://localhost:2000/users/:id

Setup CRUD

Read data
Untuk HTTP Request (Seperti GET, POST, PUT & DELETE) kita menggunakan fitur bawaan dari Java Script yaitu Fetch.

Buatlah variabel getItemyang berfungi untuk mengambil data dan menyimpanya pada variabel itemsdan menjalankan otomatis pada useEffectpada file src/App.js seperti berikut:

const [items, setItems] = useState([])

useEffect(() => {
    getItem()
}, [])

const getItem = async () => {
    const url = "http://localhost:2000/users"
    await fetch(url)
      .then((res) => res.json())
      .then((data) => setItems(data))
      .catch((err) => console.log(err))
}

Create data
Buatlah variabel postItemyang berfungi untuk mengirim data yang terkumpul melalui variabel inputs yang diatur oleh fungsi variable handleChangedan jika data berhasil terkirim makan akan mengupdate data ke variabel items denga skrip seperti berikut:

const [inputs, setInputs] = useState([])

const handleChange = (e) => {
  const name = e.target.name
  const value = e.target.value
    setInputs( values => ({
      ...values,
      [name]: value
    }))
}

const postItem = async () => {
    const url = "http://localhost:2000/users"
    await fetch(url, {
      method: "POST",
      body: JSON.stringify(inputs),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    })
      .then((res) => res.json())
      .then((data) => {
        setItems((items) => [...items, data])
      })
      .catch((err) => console.log(err))
  }

Update data
Buatlah variabel updateItemyang berfungi untuk megubah data yang dipilih brdasrkan id dan jika data berhasil diubah agar bisa terliaht perubahannya maka panggilah variable fetchItemdi dalamnya dengan skrip seperti berikut:

  const updateItem = async (e) => {
    const url = "http://localhost:2000/users"
    await fetch(`${url}/${e.id}`, {
      method: "PUT",
      body: JSON.stringify(inputs),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    })
      .then((res) => res.json())
      .then((data) => {
        fetchItem()
      })
      .catch((err) => console.log(err))
  }

Delete data
Buatlah variabel deleteItemyang berfungi untuk menghapus data yang dipilih brdasarkan id dan jika data terhapus agar bisa terlihat perubahannya maka panggilah variable fetchItemdi dalamnya dengan skrip seperti berikut:

const deleteItem = async (e) => {
    const url = "http://localhost:2000/users"
    await fetch(`${url}/${e.id}`, {
      method: "DELETE"
    })
    .then((res) => res.json())
    .then((data) => {
      fetchItem()
    .catch((err) => console.log(err))
  }