Menyiapkan React dan Menampilkan Data dari API Laravel (Part 2)

Pada Part 1, kita sudah membangun REST API Laravel yang menyediakan data produk dalam format JSON. Sekarang di Part 2 kita beralih ke frontend: menyiapkan proyek React modern dengan Vite, lalu menampilkan data dari API Laravel tersebut.

Membuat Proyek React dengan Vite

Vite adalah tools modern untuk membuat proyek React yang jauh lebih cepat daripada cara lama (Create React App). Jalankan perintah berikut:

npm create vite@latest produk-frontend -- --template react
cd produk-frontend
npm install

Perintah di atas membuat folder produk-frontend berisi kerangka React. Jalankan server pengembangan:

npm run dev

Buka http://localhost:5173 — bila muncul halaman default React + Vite, berarti berhasil.

Memasang Axios

Axios adalah library populer untuk melakukan permintaan HTTP dari React ke API. Pasang dengan:

npm install axios

Anda sebenarnya bisa memakai fetch() bawaan browser, tetapi axios lebih ringkas dan otomatis mengurai JSON.

Memahami useState dan useEffect

Dua hook ini adalah inti React modern:

• useState — menyimpan data yang bisa berubah (state). Ketika state berubah, React otomatis merender ulang tampilan.
• useEffect — menjalankan kode pada saat tertentu, misalnya saat komponen pertama kali dimuat. Cocok untuk mengambil data dari API.

Membuat Komponen Daftar Produk

Buat file src/DaftarProduk.jsx yang mengambil dan menampilkan data produk:

import { useState, useEffect } from 'react';
import axios from 'axios';

function DaftarProduk() {
  const [produk, setProduk] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('http://localhost:8000/api/produk')
      .then((res) => {
        setProduk(res.data.data);
        setLoading(false);
      })
      .catch((err) => {
        console.error('Gagal mengambil data:', err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Memuat data produk...</p>;
  }

  return (
    <div>
      <h2>Daftar Produk</h2>
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <th>Nama</th>
            <th>Kategori</th>
            <th>Harga</th>
            <th>Stok</th>
          </tr>
        </thead>
        <tbody>
          {produk.map((p) => (
            <tr key={p.id}>
              <td>{p.nama}</td>
              <td>{p.kategori}</td>
              <td>Rp {p.harga.toLocaleString('id-ID')}</td>
              <td>{p.stok}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default DaftarProduk;

Beberapa hal penting untuk dipahami:

• useEffect(() => {...}, []) — array kosong [] di akhir berarti kode hanya dijalankan sekali saat komponen pertama dimuat.
• res.data.data — data ada di dalam properti data karena API Resource Laravel membungkus koleksi di dalamnya. Perhatikan struktur JSON dari API Anda.
• produk.map(...) — cara React merender daftar. Setiap elemen wajib punya atribut key yang unik (di sini p.id).
• {p.harga.toLocaleString('id-ID')} — memformat angka menjadi format ribuan Indonesia.

Menampilkan Komponen di App

Buka src/App.jsx dan panggil komponen tersebut:

import DaftarProduk from './DaftarProduk';

function App() {
  return (
    <div className="container">
      <h1>Manajemen Produk</h1>
      <DaftarProduk />
    </div>
  );
}

export default App;

Pastikan server Laravel (Part 1) tetap berjalan di localhost:8000. Kembali ke browser localhost:5173, dan Anda akan melihat data produk dari database Laravel tampil di React — frontend dan backend kini terhubung!

Menangani Error Koneksi

Jika data tidak muncul, periksa dua hal umum:

• Server Laravel belum jalan — pastikan php artisan serve aktif.
• CORS terblokir — cek console browser. Jika ada error CORS, pastikan konfigurasi config/cors.php di Part 1 sudah benar.

Membuat Base URL Axios (Opsional)

Agar tidak menulis URL panjang berulang kali, buat instance axios dengan base URL di src/api.js:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
});

export default api;

Kini Anda cukup memanggil api.get('/produk'). Praktik ini membuat kode lebih rapi dan mudah diubah saat pindah ke server produksi.

Penutup

Selamat! Frontend React Anda kini berhasil mengambil dan menampilkan data dari API Laravel. Anda telah mempraktikkan konsep inti React modern: komponen, useState, useEffect, dan mengambil data API dengan axios.

Di Part 3, kita akan membuat aplikasi ini benar-benar interaktif dengan operasi CRUD dari React — menambah, mengedit, dan menghapus produk langsung ke API Laravel. Sampai jumpa!

Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi React dan Laravel.

Baca Juga

• Membuat CRUD React dengan API Laravel: Tambah, Edit, Hapus (Part 3)
• Pencarian dan Autentikasi React + Laravel Sanctum (Part 4)