Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara menampilkan data di dalam React dari Rest API yang dibuat di Laravel.
Langkah 1 - Installasi Axios
Langkah pertama yang harus kita lakukan adalah menginstall library tambahan yang bernama Axios. Library ini digunakan untuk melakukan Http request ke server dengan lebih mudah dan cepat.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project React-nya.
npm install axios@1.3.4
Silahkan tunggu proses installasinya sampai selesai dan pastikan teman-teman terhubung dengan internet.
Langkah 2 - Konfigurasi Endpoint API
Setelah library Axios berhasil terinstall, langkah berikutnya adalah membuat konfigurasi instance dari Axios. Ini bertujuan agar kita cukup mengubah 1 baris kode saja ketika terdapat perubahan domain API dari backend, dibandingkan harus mengubah alamat domain satu-satu.
Silahkan teman-teman buat folder baru dengan nama api di dalam folder src dan di dalam folder api tersebut silahkan buat file baru dengan nama index.jsx, kemudian masukkan kode berikut ini di dalamnya.
//import axios
import axios from 'axios';
const Api = axios.create({
//set default endpoint API
baseURL: 'http://localhost:8000'
})
export default Api
Coba teman-teman perhatikan dari penambahan kode di atas, pada bagian baseURL itu merupakan alamat domain dari project Laravel.
Langkah 3 - Menampilkan Data dari Rest API di React
Sekarang kita akan belajar menampilkan data di React dari Rest API menggunakan bantuan dari Axios. Silahkan teman-teman buka file src/views/posts/index.jsx, kemudian ubah kode-nya menjadi seperti berikut ini.
//import useState dan useEffect
import { useState, useEffect } from 'react';
//import api
import api from '../../api';
//import Link
import { Link } from 'react-router-dom';
export default function PostIndex() {
//ini state
const [posts, setPosts] = useState([]);
//define method
const fetchDataPosts = async () => {
//fetch data from API with Axios
await api.get('/api/posts')
.then(response => {
//assign response data to state "posts"
setPosts(response.data.data.data);
})
}
//run hook useEffect
useEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<Link to="/posts/create" className="btn btn-md btn-success rounded shadow border-0 mb-3">ADD NEW POST</Link>
<div className="card border-0 rounded shadow">
<div className="card-body">
<table className="table table-bordered">
<thead className="bg-dark text-white">
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col" style={{ 'width': '15%' }}>Actions</th>
</tr>
</thead>
<tbody>
{
posts.length > 0
? posts.map((post, index) => (
<tr key={ index }>
<td className='text-center'>
<img src={post.image} alt={post.title} width="200" className='rounded' />
</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<Link to={`/posts/edit/${post.id}`} className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2">EDIT</Link>
<button className="btn btn-sm btn-danger rounded-sm shadow border-0">DELETE</button>
</td>
</tr>
))
: <tr>
<td colSpan="4" className="text-center">
<div className="alert alert-danger mb-0">
Data Belum Tersedia!
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
)
}
Dari perubahan kode di atas, pertama kita import hook useState dan useEffect dari React.
//import useState dan useEffect
import { useState, useEffect } from 'react';
Hook useState kita gunakan untuk membuat sebuah state, sedangkan hook useEffect akan kita manfaatkan untuk memanggil Rest API saat halaman diakses pertama kali.
Setelah itu, kita import konfigurasi API atau Axios yang sudah kita buat sebelumnya.
//import api
import api from '../../api';
Karena akan ada navigasi ke halaman lain, maka kita import juga Link dari React Router DOM.
//import Link
import { Link } from 'react-router-dom';
Di dalam function component PostIndex, pertama-tama kita membuat inisialisasi state baru dengan nama posts menggunakan useState dan untuk default value-nya adalah array kosong.
//ini state
const [posts, setPosts] = useState([]);
Kemudian kita membuat method baru dengan nama fetchDataPosts.
//define method
const fetchDataPosts = async () => {
//...
}
Dalam method di atas kita melakukan proses fetching ke Rest API menggunakan Axios menggunakan method GET.
//fetch data from API with Axios
await api.get('/api/posts')
Jika proses fetching berhasil dilakukan, maka kita akan masukkan response data dari Rest API ke dalam state yang bernama posts.
//assign response data to state "posts"
setPosts(response.data.data.data);
Agar method fetchDataPosts bisa dijalankan saat halaman diakses, maka kita perlu memanggilnya di dalam hook useEffect.
//run hook useEffect
useEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
Setelah itu, kita tinggal menampilkan datanya di dalam template. Disini kita menggunakan sebuah kondisi untuk memastikan apakah ada datanya atau tidak.
{
posts.length > 0
? //looping
: // Data Belum Tersedia !
}
Jika data di atas 0, maka kita akan melakukan perulangan data menggunakan map untuk menampilkan data.
Langkah 4 - Uji Coba Menampilkan Data
Setelah semua berhasil dibuat, sekarang kita akan lakukan uji coba di dalam browser untuk melihat hasilnya, silahkan teman-teman klik menu POSTS yang ada di navbar, atau bisa juga ke URL berikut ini http://localhost:5173/posts, jika berhasil maka akan menampilkan hasil seperti berikut.
Kesimpulan
Pada artikel kali ini kita telah belajar banyak hal, seperti menginstall Axios, konfigurasi endpoint API dan menampilkan data di dalam React yang mana daata-nya diambil dari Rest API.
Pada artikel selanjutnya kita semua akan belajar bagaimana cara melakukan proses insert data dan upload gambar di React dengan Rest API.
Terima Kasih