React JS untuk Pengguna WordPress: Pengenalan Dasar

Selama lebih dari 15 tahun sekarang, WordPress telah menjadi solusi CMS paling populer dan lengkap yang memungkinkan Anda membangun apa pun dari portofolio satu halaman hingga platform eCommerce lengkap. WordPress menggunakan PHP untuk semua infrastruktur backendnya seperti pembaruan, API, auth, lapisan DB, dan sebagian besar frontend. Namun, seperti kerangka kerja populer lainnya, WordPress juga telah dipaksa untuk berevolusi belakangan ini.

Mengingat meningkatnya potensi dan kekuatan aplikasi JavaScript untuk web, serta desktop dan aplikasi seluler asli, WP REST API mencoba menjembatani kesenjangan antara warisan inti PHP WordPress dan kebangkitan JavaScript. Saya percaya bahwa ini adalah langkah besar untuk WordPress karena dua alasan:

1. Situs web WP yang ada dapat menggunakan React/Vue atau pustaka frontend lainnya untuk menciptakan pengalaman UI yang lebih baik.
2. Sebaliknya, pengembang web mendapatkan CMS tanpa kepala standar industri yang dapat dengan mudah diintegrasikan dengan tumpukan pilihan mereka.

Itu adalah situasi win-win untuk semua orang. Dalam artikel ini, kita akan memfokuskan energi kita untuk membangun frontend React untuk backend WordPress. Tapi pertama-tama, mari kita lihat REST API WordPress.

Dasar-dasar API REST WordPress

Pengembangan WP REST API dimulai beberapa tahun yang lalu dan pada awalnya dirancang sebagai plugin fitur mandiri. WordPress v4.4, dengan nama kode 'Clifford', memperkenalkan infrastruktur sebenarnya dari REST API ke dalam inti WordPress. Titik akhir yang sebenarnya muncul di WordPress v4.7, dengan nama kode 'Vaughan'. WP API memungkinkan Anda menggunakan WordPress sebagai CMS tanpa kepala yang mudah digunakan dan stabil serta ramah JSON.

JSON

JSON adalah format yang disukai jika Anda akan mengintegrasikan WordPress dengan tumpukan JavaScript. JSON mirip dengan XML karena memberi kita kemampuan untuk mentransfer data secara efisien menggunakan sintaks yang sangat mudah dibaca.

JSON sebenarnya adalah string yang terdiri dari representasi berbasis teks dari objek JavaScript. Ini menyimpan data dalam satu set pasangan kunci-nilai. Contoh JSON sederhana dari posting WP dapat terlihat seperti ini –

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

Respons JSON lengkap menggunakan WP REST API biasanya menyertakan informasi tambahan terkait postingan, seperti metadata. Anda memiliki semua yang Anda butuhkan untuk membuat tema front-end atau plugin untuk aplikasi Anda.

Titik Akhir

Titik akhir WordPress sangat mudah diakses oleh publik. Jika Anda menjalankan WordPress versi terbaru, Anda hanya perlu menambahkan /wp-json/wp/v2 ke akhir URL. Misalnya, Anda dapat mengakses titik akhir dasar di 127.0.0.1/wp-json/wp/v2 jika Anda telah menyiapkan instance WordPress di localhost Anda. Jika Anda ingin mempercantik output, Anda dapat menggunakan ekstensi penampil JSON yang membuat JSON terlihat cantik di browser Anda.

Data yang ditampilkan di layar Anda pada dasarnya adalah konten serta informasi meta dalam format JSON. Apa yang telah Anda lakukan di sini adalah untuk menentukan rute dan meminta browser Anda untuk mengambil data untuk Anda.

Apa yang kita maksud dengan rute? Rute adalah URL yang dipetakan ke metode tertentu. Inti WordPress membaca rute dan memahami bahwa setiap '/' mewakili jalur atau parameter tertentu yang perlu diikuti.

Misalnya, titik akhir dapat berupa '/wp-json/wp/v2/posts/1' , di mana Anda meminta posting dengan id yang setara dengan 1. API WordPress berguna karena cukup luas. Ini berarti kemampuan untuk mengambil data apa pun dari situs web Anda dan mengubahnya menjadi titik akhir. Hampir semua fungsi inti di WordPress didukung dan semua fitur yang akan datang juga akan didukung. Berikut adalah daftar API WordPress yang didukung pada saat penulisan tutorial ini:

Pengembang tema, serta pengembang plugin, dapat membuat titik akhir khusus untuk aplikasi mereka. Jika Anda ingin memeriksa semua titik akhir yang tersedia, Anda dapat mengunduh aplikasi seperti Postman. Ini akan memberi Anda GUI yang dibuat khusus untuk menjelajahi API. Selain itu, Anda dapat langsung melakukan panggilan API ke aplikasi pihak ketiga tanpa harus bergantung pada plugin.

Mari kita ambil contoh. Mengunggah file dan memelihara beberapa versinya merupakan persyaratan integral untuk aplikasi web modern apa pun. Hal ini terutama berlaku dalam kasus file media. Di WordPress, ada banyak sekali plugin yang tersedia yang dapat melakukan ini untuk Anda; namun, Anda mungkin perlu melakukan panggilan ke server WordPress untuk menggunakannya.

Dengan WP API, logika penanganan media dapat diabstraksikan dari WordPress. Anda dapat melakukan semua panggilan API pihak ketiga langsung dari frontend yang sangat bagus dalam hal pemisahan masalah. Anda dapat menggunakan perpustakaan seperti Cloudinary untuk memanipulasi gambar dan file media lainnya dengan cepat dan kemudian mengunggahnya ke cloud. Setelah diunggah, URL ke gambar dapat disimpan di backend WP. Pilihannya tidak terbatas dan Anda dapat menggabungkan potongan-potongan itu dengan cara apa pun yang Anda inginkan.

Sekarang mari kita lihat bagaimana menghubungkan backend WordPress dengan React.

Memulai dengan React

React adalah pustaka front-end deklaratif untuk membangun antarmuka pengguna dan aplikasi interaktif di web. Dengan React, Anda dapat membuat potongan kode independen yang lebih kecil yang dapat digunakan kembali yang dikenal sebagai komponen. Mari kita buat komponen pertama kita dengan membuat proyek React.

Cara paling populer untuk membuat proyek React adalah dengan menjalankan create-react-app. CRA menawarkan lingkungan yang nyaman untuk belajar React dan merupakan cara terbaik untuk mulai membangun aplikasi satu halaman baru jika Anda seorang pemula. Ini mengatur lingkungan pengembangan Anda sehingga Anda dapat menggunakan fitur JavaScript terbaru seperti ES6, dan webpack. Selain itu, create-react-app memberikan pengalaman pengembang yang bagus dan mengoptimalkan aplikasi Anda untuk produksi.

Anda harus memiliki Node >= 8.x dan npm >= 5.2 di mesin Anda. Untuk membuat proyek, jalankan perintah berikut:


npx create-react-app wp-react-demo


Perintah di atas membuat template boilerplate untuk aplikasi reaksi kami yang kami beri nama wp-react-demo .


cd wp-react-demo
npm start


Jika semuanya berjalan dengan baik, itu harus dapat melayani aplikasi yang baru dibuat di server pengembangan di http://localhost:3000/.

Jika Anda penasaran untuk melihat struktur direktori yang dihasilkan oleh create-react-app, seperti inilah tampilannya:

.
├── 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
└── yarn.lock


Direktori publik berisi semua aset yang diperlukan untuk memulai aplikasi. Direktori src terdiri dari semua file JavaScript yang akan kami kerjakan dan Anda akan menghabiskan banyak waktu di sana.

Saat Anda mengunjungi localhost:3000, file index.html akan dimuat. Jika Anda membuka file public/index.html, tidak ada banyak hal di sana. Tetapi Anda akan menemukan baris ini di suatu tempat di tengah:

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

Itulah titik awal di mana React merender pohon komponen ke dalam akar aplikasi.

Apa artinya? Buka direktori src dan buka index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React mencoba menemukan elemen dengan id "root" di dokumen dan kemudian menyuntikkan komponen ke dalam root. Pada kenyataannya, komponen Aplikasi dirender dan dari situlah logo React yang berputar berasal. Anda dapat memverifikasinya dengan membuka file src/App.js .

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

Ini pada dasarnya adalah apa yang terlihat seperti komponen. Setiap komponen merender bagian dari UI Anda. Anda dapat membuat satu komponen di dalam komponen lain dan begitulah cara Anda mendapatkan struktur pohon komponen seperti ini:

Jika Anda bertanya-tanya mengapa kami dapat menggunakan HTML di dalam render(), itulah keajaiban JSX. JSX adalah ekstensi sintaks untuk JavaScript dan memungkinkan Anda menggunakan HTML biasa dalam file JavaScript. Anda dapat membaca lebih lanjut tentang itu di dokumen resmi.

Saya akan menghapus semua konten HTML dan kemudian menggantinya dengan a

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';