React di WordPress: Panduan Lengkap WP REST API

React × WordPress: Ngoding Headless Tanpa Pusing

Kombinasi React dan WordPress kini jadi andalan buat bikin website cepat, fleksibel, dan gampang dikelola. Kamu tetep pakai WordPress sebagai CMS, tapi tampilan depan pakai React—alias arsitektur headless. Artinya semua konten dikirim lewat WP REST API, lalu React menampilkan sesuai kebutuhan.

Di panduan ini gue bakal ajak lo praktik seret data post, bikin custom post type, sampai build tema React tanpa sentuh PHP. Siapin aja Node ≥ 14, WP lokal, dan secangkir kopi.

Mengapa Error CORS & 404 Sering Muncul?

Sebelum bahas solusi, penting tahu dua biang kerok utama:

1. CORS bloked – browser nolak request karena header Access-Control-Allow-Origin belum di-set.
2. Pretty permalink masih plain – WP REST API butuh format /wp-json/ yang hanya aktif kalau permalink diatur ke Post Name.

Tanpa dua ini React cuma bisa lihat halaman putih kosong alias blank screen of death.

Fix CORS Lewat functions.php

Tambahkan snippet di bawah ke functions.php tema aktif atau child theme:

add_action('init', function() {
  header('Access-Control-Allow-Origin: ' . esc_url_raw(home_url()));
  header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
  header('Access-Control-Allow-Credentials: true');
});

Kalau development-nya pakai Vite/CRA, ganti origin-nya ke http://localhost:3000.

Aktifkan Pretty Permalink

Masuk WP Admin → Settings → Permalinks, pilih Post name, klik Save. Sekarang endpoint /wp-json/wp/v2/posts harusnya balik JSON legit.

Fetching Post Pertama Kali dengan React

Pertama, init project:

npx create-react-app wp-headless
cd wp-headless
npm i axios

Buat file src/Posts.js:

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

export default function Posts() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios.get('http://localhost/wp-json/wp/v2/posts')
      .then(res => setPosts(res.data))
      .catch(console.error);
  }, []);

  return (
    <ul>
      {posts.map(p =>
        <li key={p.id}>
          <h3 dangerouslySetInnerHTML={{__html: p.title.rendered}} />
          <div dangerouslySetInnerHTML={{__html: p.excerpt.rendered}} />
        </li>
      )}
    </ul>
  );
}

Import komponen di App.js dan selesai—post WP muncul di React.

Bikin Custom Post Type & ACF, Lalu Tampilkan

Install plugin Custom Post Type UI & Advanced Custom Fields. Buat CPT Book dengan slug book. Tambahkan field pages (number) dan cover (image). Jangan lupa aktifkan Show in REST API.

Di React, request-nya tinggal ganti endpoint:

axios.get('http://localhost/wp-json/wp/v2/book?_embed')

Key _embed otomatis sertakan featured media. Render gambarnya:

<img src={p._embedded['wp:featuredmedia'][0].source_url} alt={p.title.rendered} />

Untuk field ACF, pastikan plugin ACF to REST API aktif lalu akses lewat p.acf.pages.

Build Tema React Tanpa Create React App

Kalau lo kepengen tema WP full React—tapi tetep pakai WP-Admin—pakai @wordpress/scripts. Instruksi singkat:

1. Di folder tema, npm init -y && npm i @wordpress/scripts --save-dev
2. Tambah skrip di package.json:
   
   

   FAQ

   Apa keuntungan pakai React di WordPress?

   React bikin UI lebih cepat lewat Virtual DOM, bisa reuse komponen, serta nyambung headless sehingga front-end bebas dikembangkan tanpa sentuh PHP.

   Kenapa fetch API malah 404?

   Kemungkinan permalink masih plain; ubah ke Post Name. Atau URL endpoint salah—cek lewat browser harus keluar JSON.

   Perlu plugin tambahan untuk CPT & custom field?

   Cukup Custom Post Type UI + Advanced Custom Fields. Aktifkan opsi REST API supaya datanya langsung bisa di-fetch React.

   Boleh pakai Create React App di shared hosting?

   Boleh, tapi build dulu jadi static files lalu upload folder build. Alternatifnya pakai @wordpress/scripts agar lebih ringan.

   References

   • https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
   • https://developer.wordpress.org/rest-api/
   • https://react.dev/learn
   • https://www.npmjs.com/package/@wordpress/scripts