WordPress React: Tutorial menggunakan React dengan WordPress

WordPress adalah CMS (content management system) 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 dan WordPress React.

React, yang dikembangkan oleh Facebook, adalah library UI (user interface) 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.

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!

Apa itu React?

Sebelum mulai dengan pembahasannya, mari kita pelajari dulu apa itu React. 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.

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

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.

Selain itu, perlu diperhatikan bahwa selain ReactJS, ada React Native 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.

Fitur dan fungsi React

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

JSX

JSX 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.

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

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

<img class="" src="" alt="" >

Namun, tag JSX akan terlihat seperti berikut ini:

<img className="" src="" alt="" />

Selain itu, nilai numerik ditulis dalam tanda kurung kurawal. Mirip dengan JavaScript, tanda petik mewakili string:

const name = 'John Doe’;
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Anda bisa menambahkan ekspresi JavaScript apa pun yang valid dalam tanda kurung kurawal. Sebagai contoh, ekspresi ini bisa berupa “user.firstName” atau “formatName(user)”.

Virtual DOM

Document Object Model (DOM) 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.

Model ini memiliki Virtual DOM, yang menyediakan data-binding satu arah sehingga manipulasi dan update bisa dilakukan lebih cepat daripada DOM biasa.

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.

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.

DOM juga mendukung API (application programming interface) deklaratif, yang berarti Anda bisa memberi tahu React tentang state yang Anda inginkan pada UI untuk memastikan DOM akan sesuai dengan state tersebut.

Komponen

Seperti yang tadi dijelaskan, komponen di React adalah kode-kode sendiri yang bisa digunakan kembali untuk membuat bagian UI.

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.

Props bersifat read-only (hanya baca). Berikut contohnya:

import React, { useState } from 'react' 
import ReactDOM from 'react-dom' 
 
const ParentComponent = () => { 
    const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); 
 
    return ( 
        <div> 
            <h1>This is a function component view</h1>
            <ChildComponent exampleProp={stateVariable} />
        </div> 
    ) 
} 
 
const ChildComponent = (props) => {
    return (
        <div>
            <h2>{props.exampleProp}</h2>
        </div>
    )
}
 
 
ReactDOM.render( <ParentComponent />, document.getElementById('app') );

Komponen memiliki dua jenis utama: komponen class dan komponen functional. Komponen class menggunakan hook WordPress lifecycle dan panggilan API:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    return (
      <div>
        <h1>This is a view created by a class component</h1>
      </div>
    );
  }
}

Sementara itu, komponen functional akan terlihat seperti contoh di bawah ini:

const ExampleComponent = (props) => {
    const [stateVariable, setStateVariable] = useState('');
    return (
        <div>
            <h1>This is a function component view</h1>
        </div>
    )
}

Komponen fungsional berfungsi untuk merender tampilan tanpa permintaan data atau state management.

State

State mengacu pada objek bawaan dari komponen React. Di sinilah Anda menyimpan nilai properti elemen. Kalau state berubah, komponen akan dirender ulang.

State management adalah proses pengelolaan state aplikasi ini dan penyimpanan data dalam library state management. Anda bisa menggunakan beberapa library state management, termasuk Redux dan Recoil (lebih mudah bagi pemula).

Apa keuntungan menggunakan React?

Ada banyak manfaat menggunakan React untuk pengembangan WordPress. Misalnya, React sangat mudah digunakan oleh pemula, dan sebagian besar solusi hosting populer juga mendukungnya.

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 untuk mempelajari penggunaan JavaScript guna membantu Anda mempermudah prosesnya.

Selain itu, React memungkinkan Anda menggunakan ulang komponen Anda di aplikasi lain. Library ini bersifat open-source sehingga Anda bisa membuat komponen Anda dulu, lalu menggabungkannya dengan komponen lain tanpa khawatir kodenya akan terlalu panjang.

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.

Dengan React, Anda bisa menggunakan CLI (command-line resmi) yang disebut Create React App untuk mempercepat pembuatan aplikasi satu halaman. CLI ini dilengkapi dengan tool siap pakai yang akan membantu Anda menyiapkan dan mempelajarinya.

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.

Memahami WP Rest API

WP REST API adalah sekumpulan protokol yang digunakan untuk membuat aplikasi software, memungkinkan para developer mengintegrasikan framework JavaScript seperti React dengan WordPress.

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.

Untuk menyusun data agar bisa dibaca oleh aplikasi, WP REST API menggunakan format JSON (JavaScript Object Notation). Format ini membantu menyederhanakan komunikasi antara WordPress dengan aplikasi serta program lainnya.

WP REST API menghasilkan sistem decoupling yang memungkinkan pengguna memperlakukan WordPress sebagai CMS headless. Artinya, pengguna bisa mengaitkan berbagai framework front-end dengan bagian backend WordPress, ideal bagi developer yang tidak begitu menyukai PHP.

Panduan konfigurasi awal React

Untuk mempelajari React Native, akan lebih mudah kalau Anda sudah memahami JavaScript, CSS, dan HTML. Selain itu, prosesnya bisa lebih efisien apabila Anda sudah terbiasa menggunakan ECMAScript 6 (juga disebut ES6), pemrograman fungsional, dan pemrograman berorientasi objek.

Dari sisi program, Anda juga perlu menginstal beberapa dependensi di komputer, seperti NodeJS dan npm, serta editor teks. Atau, Anda mungkin juga ingin menggunakan Git untuk mengontrol versi aplikasi Anda.

Cara yang paling populer untuk mengembangkan proyek React untuk WordPress adalah dengan menggunakan Create React App:

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.

Untuk membuat proyek baru, jalankan perintah berikut di terminal Anda:

npx create-react-app wp-react-demo

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.

Selanjutnya, jalankan perintah berikut ini:

cd wp-react-demo
npm start

Struktur direktorinya akan terlihat seperti ini:

├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js

Dalam direktori src, Anda akan menemukan semua file JavaScript yang akan Anda tangani. Sekarang, Anda bisa mengakses localhost:3000 di web browser untuk membuka file index.html.

Di dalam isi file public/index.html yang cukup singkat, temukan baris berikut ini, yang akan menjadi titik awal proyek Anda:

<div id="root"></div>

Di bawah file index.js dalam direktori src, Anda akan menemukan potongan berikut ini:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

Hal ini berarti file tersebut merender komponen App, yang bisa Anda temukan di bawah src./App.js. Anda bisa menggantinya dengan konten HTML Anda sendiri. Kita bisa menggunakan HTML insider render() berkat ekstensi syntax JSX.

Cara query WP REST API dari React

Secara default, Anda bisa membuat permintaan GET untuk menggunakan WP REST API di front-end website. Sebagai contoh, Anda bisa menggunakan /wp-json/wp/v2/posts untuk mendapatkan semua postingan Anda.

Dengan menggunakan contoh sebelumnya, data postingan ini akan terletak di http://localhost/wp-json/wp/v2/posts/.

Untuk mulai menggunakan React, Anda bisa menjalankan perintah berikut di terminal:

npx create-react-app react-app

Kemudian, jalankan perintah berikut ini:

cd react-app 
npm install @material-ui/core

Selanjutnya, Anda bisa memasukkan contoh di bawah ini:

import React, { useEffect, useState } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
    
export default function Posts() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        async function loadPosts() {
            const response = await fetch('/wp-json/wp/v2/posts');
            if(!response.ok) {
                // oups! something went wrong
                return;
            }
    
            const posts = await response.json();
            setPosts(posts);
        }
    
        loadPosts();
   }, [])
  return (
    <Grid container spacing={2}>
      {posts.map((post, index) => (
      <Grid item xs={4} key={index}>
        <Card>
           <CardContent>
                <Typography
                    color="textSecondary"
                    gutterBottom
                    dangerouslySetInnerHTML={{__html: post.title.rendered}} />
                <Typography
                    variant="body2"
                    component="p"
                    dangerouslySetInnerHTML={{__html: post.content.rendered}} />
            </CardContent>
        </Card>
      </Grid>
     ))}
    </Grid>
 );
}

Contoh di atas menggunakan React Hook useEffect dan useState. Hook pertama mendeklarasikan array tulisan dan melakukan panggilan untuk mengupdatenya, sedangkan yang kedua berfungsi untuk mengambil kode.

Peringatan! Saat menggunakan dangerouslySetInnerHTML dalam kode Anda, waspadai risiko berikut ini:
1. Kerentanan Keamanan: Penggunaan yang tidak tepat bisa membuat aplikasi Anda terkena serangan XSS (cross-site scripting).
2. Pengelolaan Kode: Akan lebih sulit untuk mengelola dan mendebug kode ketika HTML dimasukkan secara langsung.

Cara membuat jenis postingan kustom dengan React

Anda juga bisa menggunakan React untuk membuat jenis postingan kustom WordPress. Namun, ada beberapa tool yang perlu Anda instal dulu agar prosesnya lebih mudah dan lebih lancar.

Pertama, Anda perlu menambahkan plugin WordPress Custom Post Type UI.

Plugin ini akan memudahkan Anda membuat jenis postingan kustom di WordPress.

Selain itu, Anda bisa menginstal Advanced Custom Fields (ACF).

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 agar kolom kustom tersedia untuk jenis postingan Anda.

Pertama, buka CPT UI → Add/Edit Post Types (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.

Di bawah bagian Show in REST API (Tampilkan di REST API), atur opsi ke True (Benar) dan masukkan “Books” sebagai slug dasar REST API.

Di bawah Supports (Dukungan), centang kotak Author (Penulis) dan Custom fields (Bidang kustom). Klik Save Post Type (Simpan Tipe Postingan) setelah Anda selesai.

Selanjutnya, kita bisa membuat kolom khusus untuk jenis postingan kustom tersebut. Arahkan kursor ke Custom Fields (Bidang Kustom) → Add New (Tambah Baru), lalu masukkan judul yang sesuai seperti “Book Info”.

Anda bisa mengklik Add Field (Tambah Bidang), lalu mengisi label, nama, dan jenis kolom.

Di bawah Location (Lokasi), Anda bisa mengatur jenis postingan agar sama dengan jenis postingan kustom book. Setelah selesai, pilih Publish (Terbitkan) untuk mengaktifkan kolom kustom.

Selanjutnya, buka My Books → Add New (Tambah Baru), lalu masukkan judul, ringkasan, dan gambar unggulannya. Anda bisa mengulang proses ini berapa kali pun sesuai kebutuhan.

Sekarang, masukkan perintah-perintah berikut ini dari terminal dengan menjalankannya satu per satu:

npx create-react-app frontend
cd frontend
npm i axios
npm start

Selanjutnya, di dalam src, Anda bisa membuat folder bernama komponen, diikuti dengan file bernama books.js. Setelah selesai, masukkan kode berikut ini:

import React, { Component } from 'react';
import axios from 'axios';
export class Books extends Component {
   state = {
       books: [],
       isLoaded: false
   }
 componentDidMount () {
   axios.get('http://localhost:3000/wp-json/wp/v2/books')
       .then(res => this.setState({
           books: res.data,
           isLoaded: true
       }))
       .catch(err => console.log(err))
   }
   render() {
      console.log(this.state);
       return (
           <div>
             
           </div>
       )
   }
}
export default Books;

Di file App.js, masukkan skrip berikut ini:

mengimpor React dari ‘react’;

import React from 'react';
import './App.css';
import Books from './components/Books';
function App() {
 return (
   <div className="App">
    <Books>
   </div>
 );
}
export default App;

Sekarang, Anda bisa menjalankan perintah npm start di terminal, yang akan membuka aplikasi React. Anda bisa melihat konsol data “Book” ketika membukanya di browser. Tampilkan setiap judul dengan menetapkan pemetaan untuk setiap buku.

Di Book.js, masukkan kode berikut:

render() {
      const {books, isLoaded} = this.state;
       return (
           <div>
              {books.map(book => <h4>{book.title.rendered}</h4>)}
           </div>
       )
   }

Anda juga bisa memisahkan koleksi beberapa buku menjadi satu komponen buku. Untuk melakukannya, buat file di dalam src/components. Selain itu, Anda bisa menambahkan CSS khusus untuk menerapkan gaya pada jenis postingan kustom (app.css).

Cara membuat tema WordPress dengan React Native (2 metode)

Selain tutorial di atas, Anda bisa membuat tema WordPress menggunakan React. Ada banyak metode yang bisa Anda terapkan, dan kami akan menjelaskan dua di antaranya:

1. Membuat tema React WordPress menggunakan WP Scripts

Pada aplikasi React biasa, Anda perlu mengimpor React di bagian atas file. Namun, WordPress sudah dilengkapi dengan library React dan ReactDOM yang diekspor langsung ke wp.element, yang merupakan global window object.

Apabila sudah pernah menggunakan React, Anda mungkin pernah menggunakan Create React App untuk menjalankan server pengembangan Anda. Namun, hal ini tidak perlu dilakukan dengan WordPress.

Tim WordPress sudah menyiapkan paket wp-scripts dari react-scripts yang digunakan dengan Create React App. WP Scripts menyertakan perintah-perintahnya secara default.

Untuk memuat React dalam tema Anda, buka file functions.php tema, lalu tambahkan potongan kode berikut ini:

// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

Langkah ini akan menambahkan wp-element sebagai dependensi file JavaScript Anda. Selanjutnya, kita perlu menyiapkan file package.json. Dari root tema WordPress Anda, jalankan perintah berikut ini:

npm init

Setelah selesai, jalankan perintah berikut ini:

npm install @wordpress/scripts --save-dev

WP Scripts akan didownload ke node_modules sehingga bisa digunakan di dalam command-line Anda. Untuk memetakan WP Scripts ke skrip NPM, Anda bisa menelusuri file package.json, memuat pengaturan “scripts”, dan menggantinya dengan contoh berikut:

{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}

Selanjutnya, Anda bisa menjalankan perintah berikut ini:

npm start

Perintah ini akan mencari file yang diimpor dari src/index.js dan menambahkannya ke build/index.js setiap kali ada file yang diubah.

2. Membuat tema React WordPress menggunakan Create-React-WPTheme

Metode lainnya adalah dengan menggunakan create-react-wptheme dari devloco. Paket ini mirip dengan create-react-app, tapi paket ini menggunakan WordPress, bukan webpack sebagai server pengembangannya. Anda juga akan memiliki akses ke semua fungsi intinya, hook, tindakan, filter, dan lain-lain.

Untuk menyiapkannya, Anda bisa memulai terminal (atau git bash) pada instalan WordPress lokal Anda, lalu ketik perintah berikut:

npx create-react-wptheme barebones

“Barebones” adalah nama temanya; Anda bisa menggantinya dengan nama tema apa pun yang Anda inginkan.

Selanjutnya, akan muncul pesan bahwa instalan Anda telah membuat folder root dan direktori “react-src” di dalamnya. Direktori ini penting karena akan berisi kode yang belum dikompilasi.

Selanjutnya, tambahkan styles.css, index.php, dan file-file lain yang diperlukan untuk memvalidasinya. Di terminal Anda, masukkan perintah berikut ini:

cd barebones/react-src
npm run wpstart

Sekarang, saat Anda membuka wp-admin → themes (tema), Anda akan melihat tema baru Anda. Klik tombol Activate (Aktifkan), lalu kembali ke terminal dan jalankan perintah berikut ini:

npm run wpstart

Langkah ini akan secara otomatis membuka tab browser baru. Perlu diingat bahwa file-file yang berada di dalam folder root (semua yang ada di luar react-src) tidak boleh diedit. File-file ini berisi versi kompilasi kode yang diperlukan untuk WordPress dan React.

Untuk membuat tema baru, Anda bisa menggunakan kode berikut ini:

npx create-react-wptheme my_react_theme

Anda bisa mengganti “my_react_theme” sesuai keinginan Anda. Selanjutnya, masukkan perintah berikut ini:

cd my_react_theme/react-src
npm run start

Jangan lupa untuk menggantinya dengan nama yang sama seperti pada langkah sebelumnya. Langkah ini akan menyiapkan tema yang muncul di area admin.

Setelah selesai, Anda perlu menggunakan perintah build untuk memindahkannya ke versi produksi. Untuk melakukannya, buka prompt perintah Anda, buka folder react-src tema, lalu jalankan perintah berikut ini:

npm run build

Proses ini akan mengoptimalkan file Anda yang berada di dalam folder. Setelah itu, Anda bisa menerapkannya di server Anda.

Cara menambahkan React ke template halaman kustom

Untuk membuat child theme WordPress menggunakan React, prosesnya juga tidak terlalu berbeda. Anda bisa menambahkan React ke template halaman kustom.

Mari mulai dengan struktur tema standar dulu:

/build
/src
/-- index.js
functions.php
package.json
page-react.php
style.css

Selanjutnya, tambahkan kode berikut ini ke file functions.php tema:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
  $parent_style = 'twentytwenty-style'; 
    
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //For production use wp_get_theme()->get('Version')
  );

  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );
  
}

Anda juga perlu menambahkan beberapa kode ke file style.css Anda seperti berikut:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

Selanjutnya, buat template halaman kustom dasar page-react.php dengan contoh berikut:

<? php
/**
 * Template Name: React Template
 */
get_header();
?>

<main id="site-content" role="main">
  <article class="post-2 page type-page status-publish hentry">
    <?php get_template_part( 'template-parts/entry-header' ); ?>
    <div class="post-inner thin">
      <div class="entry-content">        

        <div id="react-app"></div><!-- #react-app -->

      </div><!-- .entry-content -->
    </div><!-- .post-inner -->
  </article><!-- .post -->
</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

Sekarang Anda bisa membuat halaman baru di WordPress, lalu memilih React Template sebagai template halaman.

Cara menggunakan React dalam aplikasi

Apabila ingin menggunakan React di aplikasi yang sudah ada, Anda bisa menambahkan CDN (content delivery network) secara langsung ke file HTML Anda.

Buka halaman HTML tempat Anda ingin menambahkan React. Sisipkan bagian kosong tag <div>, yang akan membuat area tempat Anda bisa merender komponen. Dalam contoh ini, kita akan membuat tombol.

Selanjutnya, masukkan tiga tag <script> pada halaman tersebut sebelum tag </body> penutup. Dua tag pertama akan digunakan untuk memuat React, dan yang ketiga akan memuat kode komponen Anda.

Sekarang, dalam folder yang sama dengan halaman HTML Anda, buat file baru dan beri nama button.js (atau nama lain sesuai elemen yang Anda tambahkan). Dalam file tersebut, salin dan tempelkan kode berikut:

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You pressed this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Press Me'
    );
  }
}

Langkah ini akan membuat komponen tombol yang menampilkan pesan setelah diklik. Untuk menggunakan tombol ini di halaman HTML Anda, Anda bisa menambahkan potongan kode berikut di bagian bawah file button.js:

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

Proses ini akan memanggil kembali container <div> yang tadi Anda tambahkan ke halaman HTML. Kemudian, komponen tombol React akan dirender.

Anda juga bisa menggunakan React untuk membuat aplikasi React kosong dari nol. Caranya, gunakan solusi Create React App yang tadi sudah kita pelajari, yang sangat berguna untuk membuat aplikasi satu halaman.

Mulai prosesnya dengan menjalankan perintah berikut ini di terminal:

npx create-react-app my-app

Ingat, Anda bisa mengubah “my-app” dengan nama apa pun yang Anda inginkan. Untuk menjalankannya, telusuri folder aplikasi dengan menjalankan perintah cd my-app, diikuti dengan npm start.

Aplikasi kemudian akan berjalan dalam mode pengembangan. Anda bisa melihatnya dengan mengakses http://localhost:3000 di browser.

Kesimpulan

Menangani proyek WordPress React sebenarnya tidak begitu sulit, bahkan meskipun Anda masih pemula. Namun, sebaiknya pelajari dulu cara kerja framework JavaScript dengan WordPress dan WP REST API agar prosesnya lebih lancar.

Nah, apabila sudah memahami dasar-dasar JavaScript, HTML, dan CSS, Anda tidak perlu mempelajari React Native dari nol. Seperti yang sudah kita pelajari di artikel ini, Anda bisa menggunakan React untuk membuat aplikasi satu halaman, serta tema dan template halaman WordPress kustom.

Mudah-mudahan panduan ini bisa membantu Anda lebih memahami React dan kemampuannya untuk pengembangan web. Kalau masih ada pertanyaan, yuk sampaikan lewat komentar!