Aplikasi web modern biasanya menggunakan API (Application Programming Interface) untuk menghubungkan berbagai sistem dan layanan. Dalam artikel ini, kita akan membahas bagaimana menggunakan ReactJS dengan API untuk mengambil data dari server dan menampilkannya dalam komponen.
Sebelumnya, kita akan berkenalan dulu sedikit tentang API ini, dan mengapa API penting untuk aplikasi website.
Apa itu API dan mengapa kita perlu menggunakan API dalam aplikasi web?
API adalah sebuah protokol yang digunakan untuk menghubungkan antara dua sistem yang berbeda dan memungkinkan sistem tersebut untuk berinteraksi satu sama lain. Pada aplikasi web, API digunakan untuk mengambil data dari server dan menampilkan data tersebut di aplikasi.
Dengan menggunakan API, aplikasi web dapat berinteraksi dengan layanan lainnya seperti mengirim email, melakukan pembayaran online, dan lain sebagainya. Dengan begitu, API memungkinkan aplikasi web untuk mengakses berbagai sumber daya yang lebih luas daripada hanya mengandalkan data yang tersimpan di dalam aplikasi itu sendiri.
Mengapa menggunakan ReactJS dengan API?
ReactJS adalah sebuah library JavaScript yang digunakan untuk membangun aplikasi web yang interaktif dan mudah dikembangkan. Dengan menggunakan ReactJS, kita dapat memisahkan antara tampilan (view) dan data (model) dalam aplikasi. Dalam penggunaan API, ReactJS memungkinkan kita untuk mengambil data dari server dan menampilkannya dalam komponen secara mudah dan efektif.
Mengambil data dari API dengan menggunakan fetch
Apa itu fetch dan bagaimana cara menggunakannya?
Fetch adalah sebuah API baru pada JavaScript yang digunakan untuk mengambil data dari server dengan mengirimkan permintaan HTTP. Fetch mengembalikan sebuah promise, sehingga kita dapat menangani respons yang dikembalikan oleh server dengan menggunakan then() dan catch().
Berikut adalah contoh penggunaan fetch untuk mengambil data dari sebuah API:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
Pada contoh di atas, kita mengirimkan permintaan HTTP ke URL https://api.example.com/data dan kemudian menangani respons yang dikembalikan oleh server dengan menggunakan then() dan catch().
Membuat fungsi untuk mengambil data dari API dengan fetch
Untuk mengambil data dari API dengan menggunakan fetch, kita dapat membuat sebuah fungsi yang menerima URL API sebagai parameter dan mengembalikan promise yang berisi data yang diambil dari API.
function getDataFromAPI(apiUrl) {
return fetch(apiUrl)
.then(response => response.json())
.then(data => data)
.catch(error => console.error(error));
}
Menggunakan useEffect hook untuk menjalankan fungsi yang mengambil data dari API
Untuk menjalankan fungsi yang mengambil data dari API saat komponen di-mounting, kita dapat menggunakan useEffect hook pada ReactJS.
import { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const result = await getDataFromAPI('https://api.example.com/data');
setData(result);
}
fetchData();
}, []);
return (
<div>
{/* Menampilkan data */}
</div>
);
}
Pada contoh di atas, kita menggunakan useEffect untuk menjalankan fungsi fetchData() saat komponen MyComponent di-mounting. Kemudian, hasil data yang diperoleh dari API disimpan ke dalam state data dengan menggunakan fungsi setData.
Menampilkan data dari API ke dalam komponen ReactJS
Setelah data berhasil diambil dari API, langkah selanjutnya adalah menampilkan data tersebut ke dalam komponen ReactJS.
Membuat state untuk menyimpan data yang diambil dari API
Pertama-tama, kita perlu membuat state untuk menyimpan data yang diambil dari API.
import { useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
// ...
return (
<div>
{/* Menampilkan data */}
</div>
);
}
Pada contoh di atas, kita menggunakan useState untuk membuat state data yang awalnya kosong.
Menggunakan map function untuk menampilkan data ke dalam komponen
Untuk menampilkan data ke dalam komponen, kita dapat menggunakan map function pada array data yang diambil dari API.
import { useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
// ...
return (
<div>
{data.map(item => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</div>
))}
</div>
);
}
Pada contoh di atas, kita menggunakan map function untuk mengubah setiap item pada array data menjadi sebuah komponen HTML yang berisi judul dan deskripsi.
Menambahkan kondisi loading dan error pada saat data sedang diambil dari API
Ketika data sedang diambil dari API, kita dapat menambahkan kondisi loading pada komponen. Selain itu, jika terjadi error saat mengambil data dari API, kita juga dapat menambahkan kondisi error pada komponen.
import { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const result = await getDataFromAPI('https://api.example.com/data');
setData(result);
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
}
}
fetchData();
}, []);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
{data.map(item => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</div>
))}
</div>
);
}
Pada contoh di atas, kita menambahkan state isLoading dan error yang awalnya bernilai true. Selama data sedang diambil dari API, nilai isLoading akan tetap true, sehingga komponen akan menampilkan teks “Loading…”. Jika terjadi error saat mengambil data dari API, nilai error akan berubah menjadi error message dan komponen akan menampilkan teks “Error: [error message]”.
Contoh penggunaan: Membuat aplikasi sederhana dengan API
Berikut adalah contoh penggunaan ReactJS dengan API dalam membuat sebuah aplikasi sederhana:
Membuat aplikasi sederhana yang mengambil data dari API dan menampilkannya dalam komponen ReactJS
Pertama-tama, kita perlu membuat sebuah API untuk mengambil data yang akan ditampilkan dalam aplikasi. Pada contoh ini, kita akan menggunakan JSONPlaceholder API yang menyediakan data dummy untuk keperluan pengembangan.
// GET https://jsonplaceholder.typicode.com/posts
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit"
},
// ...
]
Selanjutnya, kita bisa membuat sebuah komponen bernama PostList yang akan menampilkan data dari API ke dalam sebuah tabel.
import { useState, useEffect } from 'react';
function PostList() {
const [posts, setPosts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setPosts(data);
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
}
}
fetchData();
}, []);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
{posts.map(post => (
<tr key={post.id}>
<td>{post.id}</td>
<td>{post.title}</td>
<td>{post.body}</td>
</tr>
))}
</tbody>
</table>
);
}
Pada contoh di atas, kita menggunakan fetch untuk mengambil data dari API dan menampilkannya ke dalam sebuah tabel HTML. Jika terjadi error atau data sedang diambil, komponen akan menampilkan teks “Loading…” atau “Error: [error message]”.