API Request Menggunakan React & Axios

Kali ini kita akan membuat sebuah API Request menggunakan ReactJS dan Axios. Apa itu Axios?. Axios adalah library untuk melakukan HTTP Request yang akhir-akhir ini lagi populer.

Untuk API kita dapat menggunakan API kita sendiri yang sebelumnya pernah kita buat di tutorial sebelumnya disini. Namun kita akan menggunakan fake API dari situs reqres.in agar lebih mudah.

Setup Project

Buat dulu project React dengan create-react-app

npx create-react-app reactaxios

Setelah itu masuk ke direktori reactaxios dan jalankan project React dengan npm start maka akan terlihat seperti berikut di browser

Membuat Layout

Kita akan membuat layout sederhana terlebih dulu menggunakan Bootstrap. Untuk dapat menggunakan Bootstrap kita install terlebih dahulu

npm install bootstrap

Kita akan membuat layout sederhana yang terdiri dari navbar, button dan list item. Buat file App.js seperti berikut

import React,{Component} from "react"
import "bootstrap/dist/css/bootstrap.min.css"

class App extends Component {
  render(){
    return (
      <div>
        <nav className="navbar navbar-light bg-secondary">
          <div className="container">
            <span className="navbar-brand text-light">ReactJS</span>
          </div>
        </nav>
  
        <div className="container mt-5">
        <button type="button" className="btn btn-primary mb-3">Request</button>
        <ul className="list-group">
          <li className="list-group-item">Cras justo odio</li>
        </ul>
        </div>
      </div>
    )
  }
}

export default App

Maka tampilan akan seperti berikut

Membuat fungsi handleClick

Masih pada file App.js tambahkan sebuah fungsi handleClick didalam class App (letakkan diatas method render() ). handleClick digunakan untuk menangani button request ketika di klik.

handleClick = () => {
    console.log('Clicked!')
  }

Kemudian tambahkan atribut onClick pada button dan akan memanggil fungsi handleClick

<button type="button" className="btn btn-primary mb-3" onClick={this.handleClick}>Request</button>

Bila berhasil maka ketika button Request di klik maka akan tampil pesan “Clicked!” pada console

Membuat Request GET

Kita akan membuat sebuah API Request sederhana menggunakan Axios. Kita install terlebih dulu Axiosnya

npm install axios

Kita akan membuat sebuah state yang akan menampung value dari API Request kita. Caranya buat sebuah constructor didalam class App

constructor(){
  super()
  this.state = {
    value:[]
  }
}

Sekarang kita modifikasi fungsi handleClick agar dapat melakukan request API ke reqres.in. Buat fungsi handleClick seperti berikut

handleClick = () => {
    axios.get('https://reqres.in/api/users')
    .then(response => console.log(response))
  }

Maka hasilnya akan seperti berikut

Menampilkan Data

Perhatikan gambar berikut

Kita akan mengambil data yang berada pada key data -> data. Sekarang kita akan menyimpan hasil request API kita ke state terlebih dahulu. Ubah fungsi handleClick seperti berikut

handleClick = () => {
    axios.get('https://reqres.in/api/users')
    .then(response => this.setState({value : response.data.data}))
  }

Setelah itu state value akan terlihat sebagai berikut ketika button Request di klik

Setelah state value terisi dengan data API, kita akan menampilkannya dengan method map(). Pada List Group ubah seperti berikut

<ul className="list-group">
  {this.state.value.map((data, index) => (
    <li key={index} className="list-group-item">{data.first_name}</li>
  ))}
</ul>

Simpan dan jalankan maka akan terlihat seperti berikut

Yey kita sudah berhasil melakukan request API dan menampilkannya kedalam web kita 🎉. Semoga bermanfaat