{"id":44385,"date":"2025-05-19T17:37:38","date_gmt":"2025-05-19T10:37:38","guid":{"rendered":"\/id\/tutorial\/?p=44385"},"modified":"2025-05-19T17:46:22","modified_gmt":"2025-05-19T10:46:22","slug":"panduan-wordpress-react","status":"publish","type":"post","link":"\/id\/tutorial\/panduan-wordpress-react","title":{"rendered":"WordPress React: Tutorial menggunakan React dengan WordPress"},"content":{"rendered":"

WordPress adalah CMS (content management system)<\/a> canggih untuk membuat berbagai jenis website, mulai dari website sederhana hingga toko online yang kompleks. Untuk mengintegrasikan kode PHP platform ini dengan JavaScript, Anda bisa memanfaatkan WP REST API<\/a> dan WordPress React<\/a>.<\/p>

React, yang dikembangkan oleh Facebook, adalah library UI (user interface)<\/strong> untuk membuat aplikasi lintas platform yang bisa diatur sesuai kebutuhan dan mudah dimengerti. Namun, agar bisa memanfaatkannya secara maksimal, Anda perlu memahami cara menggunakannya dengan benar.<\/p>

Di artikel ini, kami akan menjelaskan cara menggunakan React dengan WordPress. Kami akan membantu Anda memahami framework ini, manfaatnya, serta cara menggunakannya. Yuk, langsung saja kita mulai!<\/p>

Apa itu React?<\/h2>

Sebelum mulai dengan pembahasannya, mari kita pelajari dulu apa itu React<\/a>. ReactJS, juga dikenal sebagai React, adalah salah satu library JavaScript yang paling populer. React menggunakan metode berbasis komponen sederhana yang bisa Anda gunakan untuk pembuatan web.<\/p>

Di samping itu, library ini mencakup berbagai macam potongan kode JavaScript yang bisa digunakan untuk membuat komponen UI.<\/p>

\n
\"homepage<\/figure><\/div>

Perlu diingat bahwa ReactJS bukanlah framework JavaScript karena hanya merender komponen-komponen untuk tampilan aplikasi. Jadi, kalau membutuhkan fungsi yang lebih canggih, Anda bisa menggabungkannya dengan framework sebenarnya, seperti Vue.js<\/a>.<\/p>

Selain itu, perlu diperhatikan bahwa selain ReactJS, ada React Native<\/a> yang merupakan framework JavaScript open-source yang dikembangkan berdasarkan library React. Anda bisa menggunakannya untuk membuat aplikasi lintas platform dan komponen khusus untuk platform iOS dan Android.<\/p>

Fitur dan fungsi React<\/h2>

Untuk memahami manfaat React, Anda sebaiknya mengetahui cara kerjanya dulu. Berikut adalah beberapa fitur dan fungsi yang paling signifikan:<\/p>

JSX<\/h3>

JSX<\/a> adalah ekstensi syntax JavaScript utama yang digunakan di React. Anda bisa menggunakannya untuk menyematkan kode HTML pada objek JavaScript dan menyederhanakan struktur kode yang rumit.<\/p>

Selain itu, JSX membantu mencegah serangan cross-site scripting (XSS)<\/a> dengan mempersulit pihak eksternal menginjeksi kode tambahan melalui input pengguna yang tidak ditulis secara eksplisit dalam aplikasi.<\/p>

Tag JSX mencakup sebuah nama, child, dan atribut. Misalnya, tag gambar HTML biasa akan terlihat seperti ini:<\/p>

<img class=\"\" src=\"\" alt=\"\" ><\/pre>
Namun, tag JSX akan terlihat seperti berikut ini:<\/p>
<img className=\"\" src=\"\" alt=\"\" \/><\/pre>
Selain itu, nilai numerik ditulis dalam tanda kurung kurawal. Mirip dengan JavaScript, tanda petik mewakili string:<\/p>
const name = 'John Doe’;\nconst element = <h1>Hello, {name}<\/h1>;\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);<\/pre>
Anda bisa menambahkan ekspresi JavaScript<\/a> apa pun yang valid dalam tanda kurung kurawal. Sebagai contoh, ekspresi ini bisa berupa “user.firstName” atau “formatName(user)”.<\/p>
Virtual DOM<\/h3>
Document Object Model (DOM<\/a>) menyajikan halaman web dalam struktur pohon data, yang disimpan React dalam memorinya. React bisa mengimplementasikan update pada bagian tertentu dari pohon data tersebut daripada merender ulang seluruhnya.<\/p>
Model ini memiliki Virtual DOM<\/a>, yang menyediakan data-binding satu arah sehingga manipulasi dan update bisa dilakukan lebih cepat daripada DOM biasa.<\/p>
Virtual DOM menggunakan proses yang disebut diffing, yaitu ketika React membuat pohon Virtual DOM baru, membandingkannya dengan yang lama, lalu menemukan cara yang paling efisien untuk menerapkan perubahan pada DOM yang sebenarnya.<\/p>
Proses ini membutuhkan waktu yang lebih singkat dan resource yang lebih sedikit, yang tentunya sangat berguna untuk proyek-proyek besar yang melibatkan banyak interaksi dengan pengguna.<\/p>
DOM juga mendukung API (application programming interface)<\/a> deklaratif, yang berarti Anda bisa memberi tahu React tentang state yang Anda inginkan pada UI untuk memastikan DOM akan sesuai dengan state tersebut.<\/p>
Komponen<\/h3>
Seperti yang tadi dijelaskan, komponen di React<\/a> adalah kode-kode sendiri yang bisa digunakan kembali untuk membuat bagian UI.<\/p>
Cara kerjanya mirip dengan fungsi JavaScript. Komponen ini menerima props, yang merupakan input yang berubah-ubah. Ketika suatu komponen fungsi menghasilkan elemen, komponen tersebut akan memengaruhi tampilan UI yang terlihat.<\/p>
Props bersifat read-only (hanya baca). Berikut contohnya:<\/p>
import React, { useState } from 'react' \nimport ReactDOM from 'react-dom' \n \nconst ParentComponent = () => { \n    const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); \n \n    return ( \n        <div> \n            <h1>This is a function component view<\/h1>\n            <ChildComponent exampleProp={stateVariable} \/>\n        <\/div> \n    ) \n} \n \nconst ChildComponent = (props) => {\n    return (\n        <div>\n            <h2>{props.exampleProp}<\/h2>\n        <\/div>\n    )\n}\n \n \nReactDOM.render( <ParentComponent \/>, document.getElementById('app') );<\/pre>
Komponen memiliki dua jenis utama: komponen class<\/strong> dan komponen functional<\/strong>. Komponen class menggunakan hook WordPress lifecycle dan panggilan API:<\/p>
class ExampleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { };\n  }\n  render() {\n    return (\n      <div>\n        <h1>This is a view created by a class component<\/h1>\n      <\/div>\n    );\n  }\n}<\/pre>
Sementara itu, komponen functional akan terlihat seperti contoh di bawah ini:<\/p>
const ExampleComponent = (props) => {\n    const [stateVariable, setStateVariable] = useState('');\n    return (\n        <div>\n            <h1>This is a function component view<\/h1>\n        <\/div>\n    )\n}<\/pre>
Komponen fungsional berfungsi untuk merender tampilan tanpa permintaan data atau state management.<\/p>
State<\/h3>
State<\/a> mengacu pada objek bawaan dari komponen React. Di sinilah Anda menyimpan nilai properti elemen. Kalau state berubah, komponen akan dirender ulang.<\/p>
State management adalah proses pengelolaan state aplikasi ini dan penyimpanan data dalam library state management. Anda bisa menggunakan beberapa library state management, termasuk Redux<\/a> dan Recoil<\/a> (lebih mudah bagi pemula).<\/p>
\n
\"\"<\/a><\/figure><\/div>
Apa keuntungan menggunakan React?<\/h2>
Ada banyak manfaat menggunakan React untuk pengembangan WordPress. Misalnya, React sangat mudah digunakan oleh pemula, dan sebagian besar solusi hosting<\/a> populer juga mendukungnya.<\/p>
Karena library ini menggunakan JavaScript biasa dan komponen-komponen sederhana, Anda bisa menggunakannya untuk membuat aplikasi berbasis web tanpa harus mempelajari aspek teknis tingkat lanjutnya. Tersedia juga berbagai website belajar coding online gratis<\/a> untuk mempelajari penggunaan JavaScript guna membantu Anda mempermudah prosesnya.<\/p>
Selain itu, React memungkinkan Anda menggunakan ulang komponen Anda di aplikasi lain. Library ini bersifat open-source<\/a> sehingga Anda bisa membuat komponen Anda dulu, lalu menggabungkannya dengan komponen lain tanpa khawatir kodenya akan terlalu panjang.<\/p>
Komponen React juga relatif mudah ditulis berkat integrasi JSX, yang akan kita bahas nanti. Anda bisa menggabungkan tipografi dan tag HTML, serta memanfaatkan beberapa fungsi rendering untuk pengembangan aplikasi dinamis.<\/p>
Dengan React, Anda bisa menggunakan CLI (command-line resmi) yang disebut Create React App<\/strong> untuk mempercepat pembuatan aplikasi satu halaman. CLI ini dilengkapi dengan tool siap pakai yang akan membantu Anda menyiapkan dan mempelajarinya.<\/p>
Terakhir, React juga SEO-friendly. Implementasi Virtual DOM membantu meningkatkan kecepatan halaman web, performa, serta rendering sisi server sehingga bot mesin pencari bisa melakukan crawling pada website Anda dengan lebih mudah.<\/p>
Memahami WP Rest API<\/h2>
WP REST API adalah sekumpulan protokol yang digunakan untuk membuat aplikasi software, memungkinkan para developer mengintegrasikan framework JavaScript seperti React dengan WordPress.<\/p>
Protokol ini menentukan proses distribusi informasi dan data di antara beberapa program serta interaksi antarkomponennya. REST (Representational State Transfer) mengacu pada batasan arsitektur yang menentukan gaya program. Anda bisa mengakses WP REST API dari front-end website, menambahkan jenis postingan kustom, dan membuat aplikasi React yang didukung oleh API ini.<\/p>
Untuk menyusun data agar bisa dibaca oleh aplikasi, WP REST API menggunakan format JSON (JavaScript Object Notation)<\/a>. Format ini membantu menyederhanakan komunikasi antara WordPress dengan aplikasi serta program lainnya.<\/p>
WP REST API menghasilkan sistem decoupling yang memungkinkan pengguna memperlakukan WordPress sebagai CMS headless<\/a>. Artinya, pengguna bisa mengaitkan berbagai framework front-end dengan bagian backend WordPress, ideal bagi developer yang tidak begitu menyukai PHP.<\/p>
Panduan konfigurasi awal React<\/h2>
Untuk mempelajari React Native, akan lebih mudah kalau Anda sudah memahami JavaScript<\/a>, CSS<\/a>, dan HTML<\/a>. Selain itu, prosesnya bisa lebih efisien apabila Anda sudah terbiasa menggunakan ECMAScript 6<\/a> (juga disebut ES6), pemrograman fungsional, dan pemrograman berorientasi objek.<\/p>
Dari sisi program, Anda juga perlu menginstal beberapa dependensi di komputer, seperti NodeJS<\/a> dan npm<\/a>, serta editor teks. Atau, Anda mungkin juga ingin menggunakan Git<\/a> untuk mengontrol versi aplikasi Anda.<\/p>
Cara yang paling populer untuk mengembangkan proyek React untuk WordPress adalah dengan menggunakan Create React App<\/a>:<\/p>
\n
\"halaman<\/figure><\/div>
CRA menyediakan alur yang praktis untuk mempelajari React dan menggunakannya untuk membuat aplikasi satu halaman. Namun, untuk menggunakannya, Anda harus sudah memiliki Node dan npm di perangkat Anda.<\/p>
Untuk membuat proyek baru, jalankan perintah berikut di terminal Anda:<\/p>
npx create-react-app wp-react-demo<\/pre>
Apabila Create React App belum terinstal, Anda akan melihat pesan konfirmasi yang meminta Anda menginstalnya sebelum membuat demo. Proses ini akan membuat template boilerplate. Anda juga bisa mengganti “wp-react-demo” dengan nama Anda sendiri.<\/p>
Selanjutnya, jalankan perintah berikut ini:<\/p>
cd wp-react-demo\nnpm start<\/pre>
Struktur direktorinya akan terlihat seperti ini:<\/p>
├── README.md\n├── package.json\n├── public\n│ ├── favicon.ico\n│ ├── index.html\n│ └── manifest.json\n├── src\n│ ├── App.css\n│ ├── App.js\n│ ├── App.test.js\n│ ├── index.css\n│ ├── index.js\n│ ├── logo.svg\n│ └── registerServiceWorker.js<\/pre>
Dalam direktori src, Anda akan menemukan semua file JavaScript yang akan Anda tangani. Sekarang, Anda bisa mengakses localhost:3000<\/strong> di web browser untuk membuka file index.html<\/strong>.<\/p>
Di dalam isi file public\/index.html<\/strong> yang cukup singkat, temukan baris berikut ini, yang akan menjadi titik awal proyek Anda:<\/p>
<div id=\"root\"><\/div><\/pre>
Di bawah file index.js<\/strong> dalam direktori src, Anda akan menemukan potongan berikut ini:<\/p>
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\n \nReactDOM.render(<App \/>, document.getElementById('root'));<\/pre>
Hal ini berarti file tersebut merender komponen App<\/strong>, yang bisa Anda temukan di bawah src.\/App.js<\/strong>. Anda bisa menggantinya dengan konten HTML Anda sendiri. Kita bisa menggunakan HTML insider render()<\/code> berkat ekstensi syntax JSX.<\/p>
Cara query WP REST API dari React<\/h2>
Secara default, Anda bisa membuat permintaan GET<\/code> untuk menggunakan WP REST API di front-end website. Sebagai contoh, Anda bisa menggunakan \/wp-json\/wp\/v2\/posts<\/code> untuk mendapatkan semua postingan Anda.<\/p>
Dengan menggunakan contoh sebelumnya, data postingan ini akan terletak di http:\/\/localhost\/wp-json\/wp\/v2\/posts\/<\/strong><\/strong>.<\/p>
Untuk mulai menggunakan React, Anda bisa menjalankan perintah berikut di terminal:<\/p>
npx create-react-app react-app<\/pre>
Kemudian, jalankan perintah berikut ini:<\/p>
cd react-app \nnpm install @material-ui\/core<\/pre>
Selanjutnya, Anda bisa memasukkan contoh di bawah ini:<\/p>
import React, { useEffect, useState } from 'react';\nimport Card from '@material-ui\/core\/Card';\nimport CardContent from '@material-ui\/core\/CardContent';\nimport Typography from '@material-ui\/core\/Typography';\nimport Grid from '@material-ui\/core\/Grid';\n    \nexport default function Posts() {\n    const [posts, setPosts] = useState([]);\n    useEffect(() => {\n        async function loadPosts() {\n            const response = await fetch('\/wp-json\/wp\/v2\/posts');\n            if(!response.ok) {\n                \/\/ oups! something went wrong\n                return;\n            }\n    \n            const posts = await response.json();\n            setPosts(posts);\n        }\n    \n        loadPosts();\n   }, [])\n  return (\n    <Grid container spacing={2}>\n      {posts.map((post, index) => (\n      <Grid item xs={4} key={index}>\n        <Card>\n           <CardContent>\n                <Typography\n                    color=\"textSecondary\"\n                    gutterBottom\n                    dangerouslySetInnerHTML={{__html: post.title.rendered}} \/>\n                <Typography\n                    variant=\"body2\"\n                    component=\"p\"\n                    dangerouslySetInnerHTML={{__html: post.content.rendered}} \/>\n            <\/CardContent>\n        <\/Card>\n      <\/Grid>\n     ))}\n    <\/Grid>\n );\n}<\/pre>
Contoh di atas menggunakan React Hook<\/a> useEffect<\/code> dan useState<\/code>. Hook pertama mendeklarasikan array tulisan dan melakukan panggilan untuk mengupdatenya, sedangkan yang kedua berfungsi untuk mengambil kode.<\/p>
\n\n\n    
\n        Peringatan!<\/strong> Saat menggunakan dangerouslySetInnerHTML<\/strong> dalam kode Anda, waspadai risiko berikut ini:
\n1. Kerentanan Keamanan<\/strong>: Penggunaan yang tidak tepat bisa membuat aplikasi Anda terkena serangan XSS (cross-site scripting)<\/strong>.
\n2. Pengelolaan Kode<\/strong>: Akan lebih sulit untuk mengelola dan mendebug kode ketika HTML dimasukkan secara langsung.    <\/p>\n    \n\n\n\n<\/p>
Cara membuat jenis postingan kustom dengan React<\/h2>
Anda juga bisa menggunakan React untuk membuat jenis postingan kustom WordPress<\/a>. Namun, ada beberapa tool yang perlu Anda instal dulu agar prosesnya lebih mudah dan lebih lancar.<\/p>
Pertama, Anda perlu menambahkan plugin WordPress Custom Post Type UI<\/a>.<\/p>
\n
\"banner<\/figure><\/div>
Plugin ini akan memudahkan Anda membuat jenis postingan kustom di WordPress.<\/p>
Selain itu, Anda bisa menginstal Advanced Custom Fields (ACF)<\/a>.<\/p>
\n
\"banner<\/figure><\/div>
Plugin ini juga tersedia gratis, yang bisa Anda gunakan untuk membuat dan menambahkan kolom kustom ke jenis postingan kustom Anda. Kemudian, instal ACF to REST API<\/a> agar kolom kustom tersedia untuk jenis postingan Anda.<\/p>
Pertama, buka CPT UI<\/strong> → Add\/Edit Post Types<\/strong> (Tambahkan\/Edit Tipe Postingan) dari area admin Anda. Dalam contoh ini, kita akan menggunakan nama “Books”. Kita juga akan memilih opsi untuk mengisi kolom lainnya secara otomatis.<\/p>
\n
\"Bagian