React JS pour les utilisateurs de WordPress : une introduction de base

Depuis plus de 15 ans maintenant, WordPress est la solution CMS la plus populaire et la plus complète qui vous permet de créer n'importe quoi, d'un portefeuille d'une seule page à une plate-forme de commerce électronique à part entière. WordPress utilise PHP pour toute son infrastructure backend comme les mises à jour, les API, l'authentification, la couche DB et la plupart du frontend. Cependant, comme d'autres frameworks populaires, WordPress a également été contraint d'évoluer ces derniers temps.

Compte tenu du potentiel et de la puissance croissants des applications JavaScript pour le Web, ainsi que des applications de bureau et mobiles natives, l'API WP REST tente de combler le fossé entre l'héritage du noyau PHP de WordPress et l'essor de JavaScript. Je pense qu'il s'agit d'un grand pas pour WordPress pour deux raisons :

1. Les sites Web WP existants peuvent utiliser React/Vue ou une autre bibliothèque frontale pour créer une meilleure expérience d'interface utilisateur.
2. Inversement, les développeurs Web obtiennent un CMS sans tête standard de l'industrie qui peut être facilement intégré à la pile de leur choix.

C'est une situation gagnant-gagnant pour tout le monde. Dans cet article, nous allons concentrer notre énergie sur la création d'une interface React pour le backend WordPress. Mais d'abord, jetons un coup d'œil à l'API REST de WordPress.

Principes de base de l'API REST WordPress

Le développement de l'API WP REST a commencé il y a quelques années et a été initialement conçu comme un plugin de fonctionnalité autonome. WordPress v4.4, nom de code « Clifford », a introduit l'infrastructure réelle de l'API REST au cœur de WordPress. Les points de terminaison réels ont fait leur apparition dans WordPress v4.7, sous le nom de code « Vaughan ». L'API WP vous permet d'utiliser WordPress en tant que CMS sans tête, facile à utiliser, stable et compatible JSON.

JSON

JSON est le format préféré si vous allez intégrer WordPress avec une pile JavaScript. JSON est similaire à XML en ce sens qu'il nous permet de transférer efficacement des données à l'aide d'une syntaxe très lisible.

JSON est en fait une chaîne qui comprend une représentation textuelle d'un objet JavaScript. Il stocke les données dans un ensemble de paires clé-valeur. Un simple exemple JSON d'une publication WP peut ressembler à ceci -

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

Une réponse JSON complète utilisant l'API REST WP comprend généralement des informations supplémentaires concernant la publication, telles que des métadonnées. Vous avez tout ce dont vous avez besoin pour créer un thème front-end ou un plugin pour votre application.

Les points finaux

Les points de terminaison WordPress sont très accessibles au public. Si vous utilisez la dernière version de WordPress, vous devez simplement ajouter /wp-json/wp/v2 à la fin de l'URL. Par exemple, vous pouvez accéder aux points de terminaison de base à 127.0.0.1/wp-json/wp/v2 si vous avez configuré une instance WordPress dans votre hôte local. Si vous souhaitez embellir la sortie, vous pouvez utiliser une extension de visionneuse JSON qui rend le JSON joli sur votre navigateur.

Les données affichées sur votre écran sont essentiellement le contenu ainsi que les méta-informations au format JSON. Ce que vous avez fait ici, c'est définir un itinéraire et demander à votre navigateur de récupérer les données pour vous.

Qu'entendons-nous par itinéraire? Une route est une URL mappée vers une méthode particulière. Le noyau de WordPress lit la route et comprend que chaque '/' représente un chemin ou un paramètre spécifique qui doit être suivi.

Par exemple, un point de terminaison peut être '/wp-json/wp/v2/posts/1' , où vous demandez une publication avec un identifiant équivalent à 1. Les API WordPress sont utiles car elles sont assez étendues. Cela se traduit par la possibilité de prendre toutes les données de votre site Web et de les transformer en point de terminaison. Presque toutes les fonctionnalités de base de WordPress sont prises en charge et toutes les fonctionnalités à venir seront également prises en charge. Voici une liste des API WordPress prises en charge au moment de la rédaction de ce tutoriel :

Les développeurs de thèmes, ainsi que les développeurs de plugins, peuvent créer des points de terminaison personnalisés pour leur application. Si vous souhaitez découvrir tous les différents points de terminaison disponibles, vous pouvez télécharger une application comme Postman. Cela vous fournira une interface graphique spécialement conçue pour explorer les API. De plus, vous pouvez directement effectuer des appels d'API vers des applications tierces sans avoir à vous fier aux plug-ins.

Prenons un exemple. Le téléchargement de fichiers et la gestion de plusieurs versions de ceux-ci sont une exigence essentielle de toute application Web moderne. Cela est particulièrement vrai dans le cas des fichiers multimédias. Dans WordPress, il existe une abondance de plugins disponibles qui peuvent le faire pour vous ; Cependant, vous devrez peut-être appeler le serveur WordPress pour les utiliser.

Avec l'API WP, la logique de gestion des médias peut être extraite de WordPress. Vous pouvez effectuer tous les appels d'API tiers directement depuis le frontend, ce qui est excellent en termes de séparation des préoccupations. Vous pouvez utiliser une bibliothèque comme Cloudinary pour manipuler les images et autres fichiers multimédias à la volée, puis les télécharger sur le cloud. Une fois téléchargée, l'URL de l'image peut être stockée dans le backend WP. Les options sont infinies et vous pouvez combiner les pièces comme bon vous semble.

Voyons maintenant comment connecter le backend WordPress avec React.

Premiers pas avec React

React est une bibliothèque frontale déclarative pour la création d'interfaces utilisateur et d'applications interactives sur le Web. Avec React, vous pouvez composer de plus petits morceaux indépendants de code réutilisables appelés composants. Créons notre premier composant en créant un projet React.

Le moyen le plus populaire de créer un projet React consiste à exécuter create-react-app. CRA offre un environnement confortable pour apprendre React et est le meilleur moyen de commencer à créer une nouvelle application d'une seule page si vous êtes débutant. Il configure votre environnement de développement afin que vous puissiez utiliser les dernières fonctionnalités JavaScript telles que ES6 et webpack. De plus, create-react-app offre une expérience de développement agréable et optimise votre application pour la production.

Vous aurez besoin d'avoir Node >= 8.x et npm >= 5.2 sur votre machine. Pour créer un projet, exécutez les commandes suivantes :


npx create-react-app wp-react-demo


La commande ci-dessus crée un modèle passe-partout pour notre application React que nous avons nommé wp-react-demo .


cd wp-react-demo
npm start


Si tout se passe bien, il devrait pouvoir servir l'application nouvellement créée sur un serveur de développement à l'adresse http://localhost:3000/.

Si vous êtes curieux de voir la structure de répertoires générée par create-react-app, voici à quoi cela ressemble :

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


Le répertoire public contient tous les actifs nécessaires au démarrage de l'application. Le répertoire src comprend tous les fichiers JavaScript sur lesquels nous allons travailler et vous y passerez beaucoup de temps.

Lorsque vous visitez localhost:3000, le fichier index.html est chargé. Si vous ouvrez le fichier public/index.html, il n'y a pas grand-chose. Mais vous trouverez cette ligne quelque part au milieu :

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

C'est le point de départ où React rend l'arborescence des composants à la racine de l'application.

Qu'est-ce que ça veut dire? Rendez- vous dans le répertoire src et ouvrez index.js .

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

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

React essaie de trouver un élément avec l'id "root" dans le document puis injecte le composant dans la racine. En réalité, le composant App est rendu et c'est de là que vient le logo React en rotation. Vous pouvez le vérifier en ouvrant le fichier 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;

Voici à quoi ressemble un composant. Chaque composant restitue une partie de votre interface utilisateur. Vous pouvez composer un composant à l'intérieur d'un autre et c'est ainsi que vous obtenez une arborescence de composants comme celle-ci :

Si vous vous demandez pourquoi nous pouvons utiliser HTML dans render(), c'est la magie de JSX. JSX est une extension de syntaxe à JavaScript et vous permet d'utiliser du HTML brut dans un fichier JavaScript. Vous pouvez en savoir plus à ce sujet dans les documents officiels.

Je vais supprimer tout le contenu HTML puis le remplacer par 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';