React di Frontend WordPress

Gambaran Umum

Video ini membahas cara menggunakan React di frontend (sisi pengunjung) WordPress — membuat file JavaScript terpisah untuk frontend, memuat React tanpa bundle tambahan, dan menjembatani data dari PHP ke JavaScript/React.

---

1. Setup Frontend JavaScript

Buat File Baru: src/frontend.js

src/
  ├── index.js        ← Admin/editor (sudah ada)
  ├── index.scss      ← Styling editor (sudah ada)
  ├── frontend.js     ← Frontend baru ★
  └── frontend.scss   ← Styling frontend (download dari lesson)

Update package.json

Build tool perlu tahu tentang file baru:

{
  "scripts": {
    "build": "wp-scripts build src/index.js src/frontend.js",
    "start": "wp-scripts start src/index.js src/frontend.js"
  }
}

Default-nya hanya src/index.js. Tambahkan semua file entry point secara eksplisit.

Jalankan ulang:

npm run start

Output baru di build/:

build/
  ├── index.js       ← Admin JS
  ├── index.css      ← Admin CSS
  ├── frontend.js    ← Frontend JS ★
  └── frontend.css   ← Frontend CSS ★

---

2. Import CSS di Frontend JS

// frontend.js — bagian paling atas
import "./frontend.scss"

SCSS otomatis di-compile dan diekstrak ke build/frontend.css.

---

3. Load Assets di PHP

Dalam Render Callback (Hanya Frontend!)

function theHTML($attributes) {
  // Hanya load di frontend, BUKAN di admin
  if (!is_admin()) {
    wp_enqueue_script(
      'attentionFrontend',
      plugin_dir_url(__FILE__) . 'build/frontend.js',
      array('wp-element')  // Dependency: WordPress React wrapper
    );
    wp_enqueue_style(
      'attentionFrontendStyles',
      plugin_dir_url(__FILE__) . 'build/frontend.css'
    );
  }

  ob_start(); ?>
  <div class="paying-attention-update-me">
    <pre style="display: none;"><?php echo wp_json_encode($attributes) ?></pre>
  </div>
  <?php return ob_get_clean();
}

Mengapa di Render Callback?

• File hanya dimuat jika post/page benar-benar menggunakan block ini
• WordPress cukup pintar: jika ada 10 instance block, file hanya dimuat sekali
• !is_admin() memastikan tidak dimuat di halaman editor

Catatan Block Theme

Jika menggunakan Block Theme (bukan classic theme), tambahkan parameter footer:

wp_enqueue_script(
  'attentionFrontend', 
  plugin_dir_url(__FILE__) . 'build/frontend.js', 
  array('wp-element'), 
  '1.0', 
  true   // ← Load di footer (penting untuk Block Theme!)
);

---

4. Passing Data dari PHP ke JavaScript

Masalah

Attributes (question, answers, correctAnswer) ada di PHP. React component butuh data ini di JavaScript. Tidak ada cara "resmi" dari WordPress.

Solusi Brad: Hidden <pre> tag + JSON

PHP Side:

<div class="paying-attention-update-me">
  <pre style="display: none;"><?php echo wp_json_encode($attributes) ?></pre>
</div>

JavaScript Side:

const divsToUpdate = document.querySelectorAll(".paying-attention-update-me");

divsToUpdate.forEach(function(div) {
  const data = JSON.parse(div.querySelector("pre").innerHTML);
  
  // Render React component dengan data dari PHP
  ReactDOM.render(
    <Quiz {...data} />,  // Spread operator: semua attributes jadi props
    div
  );
  
  // Hapus class placeholder setelah di-render
  div.classList.remove("paying-attention-update-me");
});

Penjelasan Spread Operator {...data}

// data = { question: "What color?", answers: ["Red","Blue"], correctAnswer: 1 }

// Ini:
<Quiz {...data} />

// Sama dengan:
<Quiz question="What color?" answers={["Red","Blue"]} correctAnswer={1} />

Lebih efisien daripada menulis setiap prop secara manual.

---

5. React di WordPress Frontend

Import React & ReactDOM

import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"
import "./frontend.scss"

Kita TIDAK perlu npm install react! @wordpress/scripts package otomatis mengarahkan import ke wp.element di global scope WordPress. React sudah dimuat oleh WordPress — tidak ada duplikasi bundle.

Bukti: File Size

build/frontend.js = ~7 KB  (tanpa React bundle)
react package       = ~121 KB
react-dom package   = ~11 KB

Plugin JavaScript kita hanya 7KB karena React tidak di-bundle ulang. WordPress memuat satu copy React yang digunakan bersama semua plugin.

---

6. React Component Dasar

function Quiz(props) {
  return (
    <div className="paying-attention-frontend">
      <p>{props.question}</p>
      <ul>
        {props.answers.map(function(answer, index) {
          return (
            <li onClick={() => handleAnswer(index)}>
              {answer}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Akses Props di Frontend

Admin (index.js)	Frontend (frontend.js)
props.attributes.question	props.question
props.attributes.answers	props.answers
props.attributes.correctAnswer	props.correctAnswer

Di frontend, props langsung di-spread ke component (tidak ada nest attributes).

---

Alur Data: PHP → JavaScript → React

Database (attributes JSON)
  → PHP render_callback menerima $attributes
    → wp_json_encode($attributes) di hidden <pre> tag
      → JavaScript parse JSON dari DOM
        → React component menerima data sebagai props
          → UI dirender di browser