React JS pentru utilizatorii WordPress: o introducere de bază

De peste 15 ani, WordPress a fost cea mai populară și completă soluție CMS care vă permite să creați orice, de la un portofoliu de o singură pagină la o platformă de comerț electronic completă. WordPress folosește PHP pentru toată infrastructura sa de backend, cum ar fi actualizări, API-uri, auth, layer DB și majoritatea frontend-ului. Cu toate acestea, la fel ca alte cadre populare, WordPress a fost, de asemenea, forțat să evolueze în ultima vreme.

Având în vedere potențialul și puterea în creștere a aplicațiilor JavaScript pentru web, precum și a aplicațiilor mobile desktop și native, API-ul WP REST încearcă să reducă distanța dintre moștenirea nucleului PHP WordPress și creșterea JavaScript. Cred că acesta este un pas imens pentru WordPress din două motive:

1. Site-urile web WP existente pot utiliza React / Vue sau altă bibliotecă frontend pentru a crea o experiență mai bună a interfeței de utilizare.
2. În schimb, dezvoltatorii web primesc un CMS fără cap standard din industrie, care poate fi ușor integrat cu teancul la alegere.

Aceasta este o situație de câștig-câștig pentru toată lumea. În acest articol, ne vom concentra energia pe construirea unui frontend React pentru backend-ul WordPress. Dar mai întâi, să aruncăm o privire la API-ul WordPress REST.

Bazele WordPress REST API

Dezvoltarea API-ului WP REST a început în urmă cu câțiva ani și a fost inițial concepută ca un plugin de caracteristici independent. WordPress v4.4, denumit în cod „Clifford”, a introdus infrastructura reală a API-ului REST în centrul WordPress. Punctele finale reale au apărut în WordPress v4.7, denumit în cod „Vaughan”. API-ul WP vă permite să utilizați WordPress ca un CMS fără cap, ușor de utilizat, stabil și prietenos cu JSON.

JSON

JSON este formatul preferat dacă intenționați să integrați WordPress cu un stack JavaScript. JSON este similar cu XML prin faptul că ne oferă posibilitatea de a transfera eficient date folosind o sintaxă foarte lizibilă.

JSON este de fapt un șir care cuprinde o reprezentare bazată pe text a unui obiect JavaScript. Stochează date într-un set de perechi cheie-valoare. Un exemplu simplu JSON de postare WP poate arăta astfel -

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

Un răspuns complet JSON care utilizează API-ul WP REST include de obicei informații suplimentare cu privire la postare, cum ar fi metadatele. Aveți tot ce aveți nevoie pentru a crea o temă front-end sau un plugin pentru aplicația dvs.

Punctele finale

Punctele finale WordPress sunt foarte accesibile publicului. Dacă rulați cea mai recentă versiune de WordPress, trebuie să adăugați pur și simplu / wp-json / wp / v2 la sfârșitul adresei URL. De exemplu, puteți accesa punctele finale de bază la 127.0.0.1/wp-json/wp/v2 dacă ați configurat o instanță WordPress în localhost. Dacă doriți să precizați rezultatul, puteți utiliza o extensie de vizualizare JSON care face ca JSON să arate frumos pe browserul dvs.

Datele afișate pe ecranul dvs. sunt în esență conținutul, precum și informațiile meta în format JSON. Ceea ce ați făcut aici este să definiți un traseu și ați solicitat browserului dvs. să preia datele pentru dvs.

Ce înțelegem prin traseu? O rută este o adresă URL mapată la o anumită metodă. Nucleul WordPress citește traseul și înțelege că fiecare „/” reprezintă o cale sau parametru specific care trebuie urmat.

De exemplu, un punct final poate fi „/ wp-json / wp / v2 / posts / 1” , unde solicitați o postare cu un ID echivalent cu 1. API-urile WordPress sunt utile deoarece sunt destul de extinse. Acest lucru se traduce prin posibilitatea de a prelua orice date de pe site-ul dvs. web și de a le transforma într-un punct final. Aproape toate funcționalitățile de bază din WordPress sunt acceptate și toate funcțiile viitoare vor fi, de asemenea, acceptate. Iată o listă de API-uri WordPress acceptate în momentul scrierii acestui tutorial:

Dezvoltatorii de teme, precum și dezvoltatorii de pluginuri, pot crea puncte finale personalizate pentru aplicația lor. Dacă doriți să verificați toate punctele finale disponibile, puteți descărca o aplicație precum Postman. Acest lucru vă va oferi o interfață grafică special concepută pentru explorarea API-urilor. Mai mult, puteți efectua direct apeluri API către aplicații terțe fără a fi nevoie să vă bazați pe pluginuri.

Să luăm un exemplu. Încărcarea fișierelor și menținerea mai multor versiuni ale acestuia este o cerință integrală pentru orice aplicație web modernă. Acest lucru este valabil mai ales în cazul fișierelor media. În WordPress, există o mulțime de pluginuri disponibile care pot face acest lucru pentru dvs.; cu toate acestea, poate fi necesar să efectuați apeluri către serverul WordPress pentru a le utiliza.

Cu WP API, logica de gestionare a media poate fi extrasă de WordPress. Puteți efectua toate apelurile API terță parte direct din frontend, ceea ce este excelent în ceea ce privește separarea preocupărilor. Puteți utiliza o bibliotecă precum Cloudinary pentru a manipula imaginile și alte fișiere media din mers și apoi să le încărcați în cloud. Odată încărcat, adresa URL a imaginii poate fi stocată în backend-ul WP. Opțiunile sunt nesfârșite și puteți combina piesele împreună în orice mod doriți.

Să vedem acum cum să conectăm backend-ul WordPress cu React.

Noțiuni introductive despre React

React este o bibliotecă front-end declarativă pentru crearea de interfețe utilizator și aplicații interactive pe web. Cu React, puteți compune bucăți independente mai mici de cod reutilizabil cunoscute sub numele de componente. Să creăm prima noastră componentă prin crearea unui proiect React.

Cel mai popular mod de a crea un proiect React este executând create-react-app. CRA oferă un mediu confortabil pentru învățare React și este cel mai bun mod de a începe să construiți o nouă aplicație cu o singură pagină, dacă sunteți începător. Acesta configurează mediul dvs. de dezvoltare astfel încât să puteți utiliza cele mai recente caracteristici JavaScript, cum ar fi ES6 și webpack. Mai mult, create-react-app oferă o experiență plăcută dezvoltatorului și optimizează aplicația pentru producție.

Va trebui să aveți Node> = 8.x și npm> = 5.2 pe computer. Pentru a crea un proiect, executați următoarele comenzi:


npx create-react-app wp-react-demo


Comanda de mai sus creează un șablon boilerplate pentru aplicația noastră de reacție, pe care am denumit -o wp-react-demo .


cd wp-react-demo
npm start


Dacă totul merge bine, ar trebui să poată servi aplicația nou creată pe un server de dezvoltare la http: // localhost: 3000 /.

Dacă sunteți curios să vedeți structura de directoare generată de create-react-app, iată cum arată:

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


Directorul public conține toate activele necesare pentru lansarea aplicației. Directorul src cuprinde toate fișierele JavaScript la care vom lucra și vă veți petrece mult timp acolo.

Când vizitați localhost: 3000, fișierul index.html se încarcă. Dacă deschideți fișierul public / index.html, nu există nimic mare acolo. Dar veți găsi această linie undeva la mijloc:

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

Acesta este punctul de plecare în care React transformă arborele componentului în rădăcina aplicației.

Ce înseamnă asta? Accesați directorul src și deschideți index.js .

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

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

React încearcă să găsească un element cu id „rădăcină” în document și apoi injectează componentă în rădăcină. În realitate, componenta aplicației este redată și de aici provine sigla React. Puteți verifica acest lucru deschizând fișierul 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;

În principiu, așa arată o componentă. Fiecare componentă redă o parte din interfața dvs. de utilizare. Puteți compune o componentă în interiorul alteia și așa obțineți o structură de arbore de componente ca aceasta:

Dacă vă întrebați de ce putem folosi HTML în interiorul render (), aceasta este magia JSX. JSX este o extensie de sintaxă pentru JavaScript și vă permite să utilizați HTML simplu într-un fișier JavaScript. Puteți citi mai multe despre aceasta în documentele oficiale.

Voi șterge tot conținutul HTML și apoi îl voi înlocui cu un

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