athdromeda
Integrasi API pada React

Integrasi API pada React

Step-by-step dapetin data dari API pake React

Aniq's photo
Aniq
·

3 min read

Table of contents

Saat berkomunikasi dengan sisi back-end, front-end developer memerlukan sebuah perantara untuk mengambil database. Bisa saja sih, front-end mengambil langsung data dari database tanpa back-end. Namun, cara tersebut dapat membuat database terekspos. Seseorang bisa saja mengakses data tersebut dengan menjalankan perintah di console browser. Lalu bagaimana front-end berkomunikasi dengan back-end?

REST API

How Database, Backend, API, Frontend works https://9gag.com/gag/aggXDyK

Cara yang umum digunakan front-end untuk berkomunikasi dengan back-end adalah melalui REST API. API (Application Programming Interface) merupakan sepaket aturan yang menjembatani suatu aplikasi berinteraksi dengan aplikasi lain. API nggak terbatas pada komunikasi front-end-back-end aja. Saat memanipulasi element pada web pada Javascript misalnya, kita menggunakan DOM API. Ataupun saat menggambar menggunakan <canvas>, kita menggunakan Canvas API. Namun pada konteks kali ini, kita membahas API yang menjembatani antara front-end dan back-end.

REST (Representational State Transfer) merupakan salah satu cara komunikasi front-end dan back-end. REST ini secara umum beroperasi melalui sebuah URL dengan menggunakan method-method HTTP seperti GET, POST, DELETE, PATCH, dan sebagainya. Misalnya dari pihak back-end memberi front-end akses untuk mendapatkan detail mahasiswa dengan NIM tertentu melalui URL https://website.com/mahasiswa/[nim], dan sebagainya.

Implementasi pada React dengan Axios

Axios merupakan salah satu library Javascript untuk berkomunikasi (request) dengan back-end. Kita sebenarnya bisa menggunakan fetch() ataupun xmlhttprequest tanpa perlu menginstal library. Namun, axios mendukung penggunaan untuk browser-browser lama (backward compatible) dan segudang fitur-fitur lain yang membuatnya lebih unggul daripada kedua fungsi built-in tadi.

Bikin projek dan Install Axios

Untuk mencoba implementasinya, kita buat projek React mengenai informasi geografis negara-negara menggunakan Vite dengan menuliskan perintah pada Command Prompt atau terminal:

npm create vite@latest geopedia -- --template react
cd geopedia
npm install

Lalu kita buka folder project tersebut dengan Visual Studio Code dan pada terminal kita install axios dengan menjalankan command

npm install axios

Nampilin Data dari API

Lalu kita kosongkan src/App.jsx sehingga menjadi seperti ini

import './App.css'

function App() {
  return (
    <>
        <h1>GeoPedia</h1>
    </>
  )
}

export default App

Kita akan menggunakan API dari REST Countries dengan menambahkan const baseUrl = "https://restcountries.com/v3.1" di bawah statement import. Lalu di bawah function App() kita tambahkan kode:

const [countries, setCountries] = useState([])

  useEffect(() => {
    axios.get(`${baseUrl}/all`).then(
      response => setCountries(response.data)
    )
  }, [])

Jangan lupa untuk mengimport useState, useEffect, dan axios. useState([]) pada kode di atas berfungsi untuk menginisialisasi data countries dengan nilai []. useEffect menjalankan fungsi di dalamnya, yakni axios.get(`${baseUrl}/all`), yang mengambil data geografis semua negara. Untuk mendapatkannya secara utuh, kita masih harus menambahkan .then(response => setCountries(response.data) sehingga data countries yang sebelumnya hanya berupa array kosong, terisi oleh data yang diambil dari API.

Untuk menampilkan datanya, kita bisa tambahkan {JSON.stringify(countries)} di bawah <h1>GeoPedia</h1>. Kode pada src/App.jsx akan terlihat seperti ini:

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios'

const baseUrl = "https://restcountries.com/v3.1"

function App() {
  const [countries, setCountries] = useState([])

  useEffect(() => {
    axios.get(`${baseUrl}/all`).then(
      response => setCountries(response.data)
    )
  }, [])

  return (
    <>
      <h1>GeoPedia</h1>
      {JSON.stringify(countries)}
    </>
  )
}

export default App

Bungkus Data pake Card biar rapih

Kita akan coba menampilkan nama umum (name.common), gambar bendera (flags.svg), dan region (region) dari tiap-tiap negara. Agar kode terlihat rapi, kita coba buat komponen Card dengan membuat folder components di dalam folder src, lalu mengisi folder components tersebut dengan file baru Card.jsx.

Komponen Card akan menerima props berupa name, flagUrl, dan region, sehingga src/component/Card.jsx akan terlihat seperti ini:

const Card = ({ name, flagUrl, region }) => {
    return (
        <div>
            <img src={flagUrl} alt="" srcset="" />
            <h2>{name}</h2>
            <p>{region}</p>
        </div>
    )
}

export default Card

Lalu kita import komponen Card ke App.jsx dengan mengganti {JSON.stringify(countries)} dengan:

<div>
        {countries.map(country => <Card
          key={country.name.common}
          name={country.name.common}
          flagUrl={country.flags.svg}
          region={country.region}
        />)}
</div>

Selamat! kalian telah mengintegrasikan API dengan axios pada aplikasi React sederhana. Melalui kode ini, kalian dapat mengubah tampilan aplikasi tersebut menjadi lebih rapi, informatif, dan interaktif. Misalnya kayak gini

Oh ya, kodingan di atas bisa diakses di sini yak.

Further Reading

ReactTutorialaxios