Build a React CRUD App using a RESTful API
Tags: webdev, javascript, beginners, programming
Published: 2023-03-21 13:58:46

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 `React `dan `JSON Server` berhasil di install buatlah `file db.json` di dalam `folder db` dengan struktur folder dan file seperti berikut:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzdymyktcx6lnkhi08m1.png)

Isikan `file db.json` dengan data seperti berikut:

```
{
  "users": [
    {
      "id": 1,
      "name": "Hamzah Fanan",
      "email": "hamzah@fanan.hf"
    },
    {
      "id": 2,
      "name": "Abbas Fanan",
      "email": "abbas@fanan.af"
    }
  ]
}
```

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 `getItem `yang berfungi untuk mengambil data dan menyimpanya pada variabel `items `dan menjalankan otomatis pada `useEffect `pada 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 `postItem `yang berfungi untuk mengirim data yang terkumpul melalui variabel `inputs` yang diatur oleh fungsi variable `handleChange `dan 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 `updateItem `yang berfungi untuk megubah data yang dipilih brdasrkan `id ` dan jika data berhasil diubah agar bisa terliaht perubahannya maka panggilah variable `fetchItem `di 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 `deleteItem `yang berfungi untuk menghapus data yang dipilih brdasarkan `id ` dan jika data terhapus agar bisa terlihat perubahannya maka panggilah variable `fetchItem `di 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))
  }
```