WordPress Kullanıcıları için React JS: Temel Bir Giriş

15 yılı aşkın bir süredir WordPress, tek sayfalık bir portföyden tam teşekküllü bir e-ticaret platformuna kadar her şeyi oluşturmanıza olanak tanıyan en popüler ve eksiksiz CMS çözümü olmuştur. WordPress, güncellemeler, API'ler, yetkilendirme, DB katmanı ve ön ucun çoğu gibi tüm arka uç altyapısı için PHP kullanır. Ancak, diğer popüler çerçeveler gibi, WordPress de son zamanlarda gelişmeye zorlandı.

Web için JavaScript uygulamalarının yanı sıra masaüstü ve yerel mobil uygulamaların artan potansiyeli ve gücü göz önüne alındığında, WP REST API, WordPress'in PHP çekirdeğinin mirası ile JavaScript'in yükselişi arasındaki boşluğu kapatmaya çalışır. Bunun iki nedenden dolayı WordPress için büyük bir adım olduğuna inanıyorum:

1. Mevcut WP web siteleri, daha iyi bir UI deneyimi oluşturmak için React/Vue veya başka bir ön uç kitaplığı kullanabilir.
2. Tersine, web geliştiricileri, seçtikleri yığınla kolayca entegre edilebilen endüstri standardı bir başsız CMS'ye sahip olur.

Bu herkes için bir kazan-kazan durumu. Bu makalede, enerjimizi WordPress arka ucu için bir React ön ucu oluşturmaya odaklayacağız. Ama önce, WordPress REST API'sine bir göz atalım.

WordPress REST API Temelleri

WP REST API'nin geliştirilmesi birkaç yıl önce başladı ve başlangıçta bağımsız bir özellik eklentisi olarak tasarlandı. Kod adı 'Clifford' olan WordPress v4.4, REST API'nin gerçek altyapısını WordPress'in çekirdeğine ekledi. Gerçek uç noktalar, 'Vaughan' kod adlı WordPress v4.7'de göründü. WP API, WordPress'i kullanımı kolay, kararlı ve JSON dostu, başsız bir CMS olarak kullanmanızı sağlar.

JSON

WordPress'i bir JavaScript yığınıyla entegre edecekseniz, tercih edilen biçim JSON'dur. JSON, bize çok okunabilir bir sözdizimi kullanarak verileri verimli bir şekilde aktarma yeteneği vermesi bakımından XML'e benzer.

JSON aslında bir JavaScript nesnesinin metin tabanlı bir temsilini içeren bir dizedir. Verileri bir dizi anahtar/değer çiftinde depolar. Bir WP gönderisinin basit bir JSON örneği şöyle görünebilir –

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

WP REST API'sini kullanan eksiksiz bir JSON yanıtı, genellikle gönderiyle ilgili meta veriler gibi ek bilgiler içerir. Uygulamanıza bir ön uç tema veya eklenti oluşturmak için ihtiyacınız olan her şeye sahipsiniz.

Bitiş Noktaları

WordPress uç noktaları halk tarafından çok erişilebilir. WordPress'in en son sürümünü çalıştırıyorsanız, URL'nin sonuna /wp-json/wp/v2 eklemeniz yeterlidir. Örneğin, yerel ana makinenizde bir WordPress örneği ayarladıysanız, temel uç noktalara 127.0.0.1/wp-json/wp/v2 adresinden erişebilirsiniz. Çıktıyı güzelleştirmek istiyorsanız, JSON'un tarayıcınızda güzel görünmesini sağlayan bir JSON görüntüleyici uzantısı kullanabilirsiniz.

Ekranınızda görüntülenen veriler, esasen JSON formatındaki meta bilgiler kadar içeriktir. Burada yaptığınız, bir rota tanımlamak ve tarayıcınızdan sizin için verileri getirmesini istemektir.

Yol derken neyi kastediyoruz? Rota, belirli bir yöntemle eşlenmiş bir URL'dir. WordPress çekirdeği rotayı okur ve her '/' öğesinin izlenmesi gereken belirli bir yolu veya parametreyi temsil ettiğini anlar.

Örneğin, bir uç nokta '/wp-json/wp/v2/posts/1' olabilir , burada 1'e eşdeğer bir kimliğe sahip bir gönderi talep ediyorsunuz. WordPress API'leri oldukça kapsamlı oldukları için kullanışlıdır. Bu, web sitenizden herhangi bir veri alma ve onu bir uç noktaya dönüştürme yeteneği anlamına gelir. WordPress'teki neredeyse tüm temel işlevler desteklenir ve gelecek tüm özellikler de desteklenecektir. Bu öğreticiyi yazarken desteklenen WordPress API'lerinin bir listesi:

Tema geliştiricileri ve eklenti geliştiricileri, uygulamaları için özel uç noktalar oluşturabilir. Mevcut tüm farklı uç noktaları kontrol etmek istiyorsanız, Postman gibi bir uygulama indirebilirsiniz. Bu size API'leri keşfetmek için özel olarak yapılmış bir GUI sağlayacaktır. Ayrıca, eklentilere güvenmek zorunda kalmadan doğrudan üçüncü taraf uygulamalara API çağrıları yapabilirsiniz.

Bir örnek alalım. Dosyaları yüklemek ve birden çok sürümünü korumak, herhangi bir modern web uygulaması için ayrılmaz bir gerekliliktir. Bu özellikle medya dosyaları için geçerlidir. WordPress'te bunu sizin için yapabilecek çok sayıda eklenti mevcuttur; ancak, bunları kullanmak için WordPress sunucusuna çağrı yapmanız gerekebilir.

WP API ile medya işleme mantığı WordPress'ten soyutlanabilir. Tüm üçüncü taraf API çağrılarını doğrudan ön uçtan yapabilirsiniz, bu da endişelerin ayrılması açısından harikadır. Görüntüleri ve diğer medya dosyalarını anında değiştirmek ve ardından bunları buluta yüklemek için Cloudinary gibi bir kitaplık kullanabilirsiniz. Yüklendikten sonra, görüntünün URL'si WP arka ucunda saklanabilir. Seçenekler sonsuzdur ve parçaları uygun gördüğünüz şekilde bir araya getirebilirsiniz.

Şimdi WordPress arka ucunu React ile nasıl bağlayacağınızı görelim.

React'e Başlarken

React, web üzerinde kullanıcı arayüzleri ve etkileşimli uygulamalar oluşturmaya yönelik bildirimsel bir ön uç kitaplığıdır. React ile, bileşen olarak bilinen daha küçük bağımsız yeniden kullanılabilir kod parçaları oluşturabilirsiniz. Bir React projesi oluşturarak ilk bileşenimizi oluşturalım.

Bir React projesi oluşturmanın en popüler yolu, create-react-app çalıştırmaktır. CRA, React'i öğrenmek için rahat bir ortam sunar ve yeni başlıyorsanız tek sayfalık yeni bir uygulama oluşturmaya başlamanın en iyi yoludur. Geliştirme ortamınızı, ES6 ve web paketi gibi en son JavaScript özelliklerini kullanabilmeniz için ayarlar. Ayrıca create-react-app, güzel bir geliştirici deneyimi sağlar ve uygulamanızı üretim için optimize eder.

Makinenizde Düğüm >= 8.x ve npm >= 5.2 olması gerekir. Bir proje oluşturmak için aşağıdaki komutları çalıştırın:


npx create-react-app wp-react-demo


Yukarıdaki komut, wp-react-demo olarak adlandırdığımız tepki uygulamamız için bir ortak şablon şablonu oluşturur.


cd wp-react-demo
npm start


Her şey yolunda giderse, yeni oluşturulan uygulamayı http://localhost:3000/ adresindeki bir geliştirme sunucusunda sunabilmelidir.

create-react-app tarafından oluşturulan dizin yapısını merak ediyorsanız, şöyle görünür:

.
├── 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


Genel dizin, uygulamayı başlatmak için gereken tüm varlıkları içerir. src dizini, üzerinde çalışacağımız tüm JavaScript dosyalarını içerir ve zamanınızın çoğunu orada geçireceksiniz.

localhost:3000'i ziyaret ettiğinizde index.html dosyası yüklenir. public/index.html dosyasını açarsanız, orada fazla bir şey yoktur. Ancak bu satırı ortada bir yerde bulacaksınız:

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

Bu, React'in bileşen ağacını uygulamanın köküne dönüştürdüğü başlangıç ​​noktasıdır.

Bu ne anlama geliyor? src dizinine gidin ve index.js dosyasını açın.

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

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

React, belgede "root" kimliğine sahip bir öğe bulmaya çalışır ve ardından köke bileşen. Gerçekte, Uygulama bileşeni işlenir ve dönen React logosu buradan gelir. src/App.js dosyasını açarak bunu doğrulayabilirsiniz.

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;

Temel olarak bir bileşenin nasıl göründüğü budur. Her bileşen, kullanıcı arayüzünüzün bir parçasını oluşturur. Bir bileşeni diğerinin içinde oluşturabilirsiniz ve bu şekilde bunun gibi bir bileşen ağacı yapısı elde edersiniz:

HTML'yi render() içinde neden kullanabileceğimizi merak ediyorsanız, JSX'in büyüsü budur. JSX, JavaScript'in bir sözdizimi uzantısıdır ve bir JavaScript dosyasında düz HTML kullanmanıza olanak tanır. Bununla ilgili daha fazla bilgiyi resmi belgelerde okuyabilirsiniz.

Tüm HTML içeriğini sileceğim ve ardından onu bir

<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';