Halo teman-teman semuanya, pada artikel kali ini kita semua akan belajar bersama-sama bagaimana cara menampilkan data dari Rest API di Astro dan React.
Langkah 1 - Install dan Konfigurasi React di Astro
Pertama-tama kita akan melakukan installasi React, Astro React dan Astro Render React terlebih dahulu di dalam project Astro. Ini bertujuan agar kita bisa menggunakan React dan me-render React di dalam Astro.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project-nya.
npm install react@18.2.0 react-dom@18.2.0
npm install @astrojs/react@3.0.0
npm install @astrojs/renderer-react@0.5.0
Setelah proses installasi selesai, sekarang kita akan lakukan konfigurasinya. Silahkan teman-teman buka file astro.config.mjs, kemudian ubah kode-nya menjadi seperti berikut ini.
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
export default defineConfig({
// renderers: ["@astrojs/renderer-react"],
integrations: [react()],
output: "server",
});
Dari perubahan kode di atas, pertama kita import react dari Astro React.
import react from "@astrojs/react";
Dan kemudian kita masukkan ke dalam config pada object integrations.
integrations: [react()],
Langkah 2 - Install Axios
Sebenernya di dalam Astro kita bisa menggunakan fetch untuk melakukan get data dari API, akan tetapi agar lebih familiar kita akan gunakan library tambahan yang bernama Axios.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project-nya.
npm install axios@1.5.0
Langkah 3 - Konfigurasi Endpoint API
INFORMASI : jangan lupa project Laravel-nya dijalankan terlebih dahulu.
Sekarang kita akan membuat konfigurasi endpoint api, yang bertujuan agar nanti kita tidak menuliskan domain backend secara berulang-ulang pada setiap component.
Silahkan buat folder baru dengan nama services di dalam folder src, kemudian di dalam folder services silahkan buat file baru dengan nama api.js dan 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;
Pada bagian baseURL kita isi dengan value alamat domian dari backend Laravel.
Langkah 4 - Membuat Component List Posts (React)
Sekarang kita akan lanjutkan membuat component yang nanti digunakan untuk menampilkan list data posts dari Rest API. Dan component yang akan kita buat adalah berbasis React.
Silahkan teman-teman buat folder baru dengan nama components di dalam folder src, kemudian di dalam folder component tersebut silahkan buat file baru dengan nama PostsIndex.jsx dan masukkan kode berikut ini di dalamnya.
//import useState dan useEffect
import { useState, useEffect } from "react";
//import api
import api from "../services/api";
export default function PostIndex() {
//ini state
const [posts, setPosts] = useState([]);
//define method "fetchDataPosts"
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 (
<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">
<a
href={`/posts/edit/${post.id}`}
className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2"
>
EDIT
</a>
<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>
);
}
Dari penambahan kode di atas, pertama kita import hook useState dan useEffect dari React.
//import useState dan useEffect
import { useState, useEffect } from "react";
Karena akan mengambil data dari backend, maka kita import services API yang sudah kita buat sebelumnya.
//import api
import api from "../services/api";
Di dalam function component PostIndex kita membuat state baru yang nanti digunakan untuk menyimpan data posts yang diambil dari Rest API.
//init state
const [posts, setPosts] = useState([]);
Di bawahnya kita membuat method baru dengan nama fetchDataPosts.
//define method "fetchDataPosts"
const fetchDataPosts = async () => {
//...
}
Di dalam method tersebut, kita melakukan fetching ke backend menggunakan service API dengan endpoint /api/posts dan method yang digunakan adalah GET.
//fetch data from API with Axios
await api.get("/api/posts").then((response) => {
//...
}
Jika proses fetching berhasil dilakukan, maka kita akan assign response data dari Rest API ke dalam state posts.
//assign response data to state "posts"
setPosts(response.data.data.data);
Agar method fetchDataPosts bisa dijalankan saat component diakses, maka kita perlu memanggilnya di dalam hook useEffect.
//run hook useEffect
useEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
Dan di dalam template, kita tinggal menampilkan data-nya menggunakan map.
posts.map((post, index) => (
//...
))
Langkah 5 - Menampilkan List Data Posts
Setelah component berhasil dibuat, maka langkah selanjutnya adalah memanggil component tersebut di dalam Astro.
Silahkan teman-teman buat folder baru dengan nama posts di dalam folder src/pages, kemudian di dalam folder posts tersebut buatlah file baru dengan nama index.astro dan masukkan kode berikut ini di dalamnya.
---
//import transitions effect
import { ViewTransitions } from "astro:transitions";
//import layout
import MainLayout from "../../layouts/MainLayout.astro";
//import list posts React component
import PostsIndex from "../../components/PostsIndex.jsx";
---
<MainLayout>
<ViewTransitions />
<div class="container mb-5" style="margin-top: 5rem;">
<div class="row">
<div class="col-md-12">
<a
href="/posts/create"
class="btn btn-md btn-success rounded shadow-sm border-0 mb-3"
>ADD NEW POST</a
>
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
<PostsIndex client:visible />
</div>
</div>
</div>
</div>
</div>
</MainLayout>
Dari penambahan kode di atas, pertama kita import ViewTransitions dari Astro. Ini digunakan agar aplikasi kita bisa berjalan secara SPA.
//import transitions effect
import { ViewTransitions } from "astro:transitions";
Setelah itu, kita tinggal memanggilnya di dalam layout.
<ViewTransitions />
Kemudian kita import juga MainLayout yang mana merupakan induk template dari aplikasi kita.
//import layout
import MainLayout from "../../layouts/MainLayout.astro";
Dan terakhir, kita import component React yang sudah kita buat sebelumnya.
//import list posts React component
import PostsIndex from "../../components/PostsIndex.jsx";
Dan di dalam layout, kita tinggal memanggil component tersebut, kurang lebih seperti berikut ini.
<PostsIndex client:visible />
Langkah 6 - Uji Coba Menampilkan Data
Sekarang silahkan teman-teman klik menu POSTS yang ada pada bagian navbar, jika berhasil maka kita akan diarahkan ke halaman posts index secara SPA atau single page application.
Kesimpulan
Pada artikel ini kita telah belajar banyak hal, seperti install dan konfigurasi React di Astro, install Axios, membuat component dengan React dan menampilkan data di dalam Astro.
Pada artikel berikutnya kita semua akan belajar bagaimana cara melakukan proses insert dan upload gambar menggunakan Astro dan React.
Terima Kasih