Utilisez WordPress avec React pour créer un CMS Headless pour votre application Web

L'API WordPress Rest est l'une des nombreuses fonctionnalités intéressantes offertes par WordPress. Il permet aux développeurs de créer des plugins et des thèmes fascinants, et leur permet également d'alimenter des applications tierces avec le CMS WordPress.

Dans les applications Web modernes, le système de gestion de contenu est également développé pour gérer le contenu du site Web. Cela peut ajouter une charge de travail supplémentaire pour les développeurs. Avec autant de possibilités offertes par l' API Rest , on peut également envisager d'utiliser WordPress avec React comme un CMS sans tête pour leurs applications Web basées sur JavaScript.

Alors, qu'est-ce que c'est que WordPress sans tête ?

Être « sans tête » ne signifie certainement pas que le CMS manque la section d'en-tête. Cela signifie que vous pouvez utiliser le CMS comme système de gestion de contenu générique, quelle que soit la technologie utilisée pour créer le front-end.

L'API Rest permet aux développeurs d'interagir avec des interfaces inter-technologies tant que les deux parlent le même langage JSON. L'API WordPress Rest crache des données au format JSON, ce qui est compréhensible par un grand nombre de technologies Web. JSON est une représentation textuelle d'objets JavaScript qui contient des données dans une paire clé-valeur.

 "copains": [
      {
        "identifiant": 0,
        "nom": "Harriet Stanley"
      },
      {
        "identifiant": 1,
        "nom": "Benton Odom"
      },
      {
        "identifiant": 2,
        "nom": "Jackie Edwards"
      }
    ],

Aujourd'hui, je vais démontrer la puissance de l' API WordPress Rest en l'utilisant avec React et WordPress comme CMS sans tête pour mon application Web de base.

L'avantage d'utiliser un CMS WordPress sans tête

Être une plate-forme open source ; WordPress offre une grande flexibilité pour créer tout type de site Web. L'utilisation de WordPress en tant que CMS sans tête vous permet de créer le front-end de votre application Web à l'aide de n'importe quelle technologie Web et de gérer son contenu à l'aide de l'un des CMS les plus populaires.

Vous pourriez rencontrer la situation où vous devez ajouter une fonctionnalité de blog dans une application Web existante construite avec React ou Angular. Au lieu de coder le système de gestion de contenu à part entière dans le cadre natif ; utilisez le CMS WordPress sans tête pour gérer le contenu à l'aide de l'API Rest.

Mise en place d'un site WordPress

Commençons par configurer le site WordPress, car il servira de source de données pour notre application React frontale.

Téléchargez le fichier zip du plugin WP-Rest API depuis git et chargez le dossier zip dans votre dossier de plugins WordPress. Une fois le fichier téléchargé, activez le plugin. Cela activera l'API WordPress Rest dans votre site Web WordPress.

Maintenant, allez dans Paramètres → Permaliens et sélectionnez Nom de la publication ou Structure personnalisée.

Puisque nous travaillons avec des appels d'API, téléchargez l'extension chrome pour Postman . Dans le facteur, saisissez l'URL au format suivant :

https://example.com/wp-json/wp/v2/posts

L'URL ci-dessus récupérera les données des publications sur votre site WordPress.

Téléchargez le plug-in d' interface utilisateur Custom Post Type pour créer des types de publication personnalisés. Cette publication personnalisée sera affichée lorsque nous utiliserons WordPress avec React à l'étape suivante.

Installez et activez le plugin et allez-y pour ajouter un nouveau type de publication. Pour ce tutoriel, je vais créer un type de publication personnalisé pour les livres.

Dans le Post Type Slug, saisissez le nom de votre publication personnalisée.

Assurez-vous que la case à cocher Afficher dans l'API REST est définie sur true et que le slug de base de l'API REST est également défini. Ceci est obligatoire si vous souhaitez utiliser WordPress comme CMS headless.

Cochez toutes les cases pour les informations que vous cherchez à obtenir de l'API REST.

Après avoir enregistré les modifications, vous remarquerez qu'une nouvelle option est remplie dans la barre latérale. Cliquez dessus pour ajouter le nouveau livre dans votre type de publication personnalisé.

J'ai créé mon premier livre en mettant les données d'exemple ainsi qu'un extrait pour mon article.

Pour vérifier que les données sont disponibles via l'API, allez-y et cliquez sur l'URL à l'intérieur du facteur.

Maintenant, l'URL doit ressembler à quelque chose comme des livres https://exampe.com/wp-json/wp/v2/

Nous pouvons également ajouter d'autres champs comme Publisher en utilisant les plugins ACF et ACF to RestAPI .

Installez et activez les deux plugins.

Par défaut, ACF ne parle pas à l'API Rest WordPress, nous devons donc également télécharger le plugin API REST ACF .

En utilisant le plugin de champs personnalisés, j'ajouterai le champ Éditeur pour mes livres.

Assurez-vous de sélectionner le type de publication souhaité dans la liste. Après cela, cliquez sur « Publier ».

Un nouveau champ est rempli dans mon type de publication personnalisé où je peux définir l'éditeur de mon livre. C'est tout ce que nous avions à faire pour configurer notre WordPress pour envoyer nos données à notre application Web ReactJS.

Premiers pas avec React

Qu'est-ce que ReactJS

React est une bibliothèque JavaScript pour le Web gérée par Facebook et la communauté des développeurs. JavaScript est un outil puissant pour le développement Web et il existe plusieurs bibliothèques écrites en JavaScript pour améliorer les fonctionnalités des sites Web. ReactJS est principalement utilisé pour développer des applications monopage rapides, robustes et dynamiques.

Configuration de l'application React

Pour créer des applications à l'aide de React, les dépendances suivantes doivent être installées sur votre ordinateur.

• NodeJS et NPM.
• Éditeur de texte tel que Sublime ou Visual Studio Code.
• Git pour le contrôle de version (facultatif)

Après avoir configuré l'environnement, ouvrez la ligne de commande et exécutez le code suivant pour créer le projet avec ReactJS.

 interface npx create-react-app

Une fois l'application créée, cd (changer de répertoire) dans le dossier de l'application et tapez la commande suivante pour installer le package Axios pour les appels d'API.

 npm j'axios

Maintenant, ouvrez le dossier dans votre éditeur de texte préféré. J'utilise le code Visual Studio.

Lancez l'application en exécutant la commande npm start.

Si tout fonctionne correctement, nous sommes tous prêts à créer notre application Web avec React en utilisant WordPress comme CMS sans tête.

Créez un nouveau dossier ' composants ' dans le dossier src , et dans le dossier ' composants ' créez un nouveau fichier ' Books.js '.

Rendu des données de publication sur ReactJS

Dans le fichier Book.js , nous allons récupérer les données de l'API WordPress Rest. Vous trouverez ci-dessous le code qui demande le point de terminaison de l'API Rest - qui dans mon cas est " /books " - et affiche les données au format JSON.

 importer React, { Component } de 'react'
importer des axios à partir de « axios » ;

classe d'exportation Books étend le composant {
   état = {
       livres: [],
       isLoaded : faux
   }

 composantDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           livres : res.data,
           isLoaded : vrai
       }))
       .catch(err => console.log(err))
   }


   rendu() {
      console.log(ce.état);
       revenir (
           <div>
              
           </div>
       )
   }
}

exporter les livres par défaut

Le code ci-dessus affichera le tableau de données dans la console qui est ensuite utilisé à l'intérieur du bloc de rendu.

Maintenant, dans le fichier App.js , appelez le composant Books comme indiqué ci-dessous.

 importer React à partir de « react » ;
importer './App.css';
importer des livres depuis './components/Books' ;

fonction App() {
 revenir (
   <div className="App">
    <Livres/>
   </div>
 );
}

exporter l'application par défaut ;

App.js est le point d'entrée de notre application Web, il est donc important de référencer les composants « Livres » à l'intérieur de ce fichier.

Affichage des données de publication sur ReactJS

Les données peuvent être affichées en ajoutant le code à l'intérieur de la méthode de rendu.

 rendu() {
       const {livres, isLoaded} = this.state;
       revenir (
           <div>
               {livres.map(livre =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

Au lieu d'afficher les données ici, nous allons créer un nouveau composant et le nommer " BookItems.js " car je souhaite le séparer du composant parent.

Remplacez la méthode de rendu dans Bookk.js par quelque chose comme :

 rendu() {
       const {livres, isLoaded} = this.state;
       revenir (
           <div>
               {livres.map(livre =>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

Maintenant, nous devons à la place rendre le composant BookItems.

Dans BookItems.js, ajoutez le code suivant :

 importer React, { Component } de 'react'
importer des axios à partir de « axios » ;
importer les PropTypes de 'prop-types' ;

la classe d'exportation BookItems étend le composant {
 
   rendu() {
       const { titre } = this.props.book;
       revenir (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

exporter les BookItems par défaut

Dans le code ci-dessus, je fais référence à l'accessoire de livre pour obtenir le titre et d'autres informations.

Remarque : assurez-vous de faire référence au composant BookItems dans le composant « Livres ».

Ma version finale de BookItems.js ressemble à ceci :

 importer React, { Component } de 'react'
importer les PropTypes de 'prop-types' ;
importer des axios à partir de « axios » ;
la classe d'exportation BookItems étend le composant {

   état = {
       imgUrl : '',
       auteur: '',
       isLoaded : faux
   }

   propTypes statiques = {
       livre : PropTypes.object.isRequired
   }

   composantDidMount () {
       const {featured_media, author} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           console.log(res);
           this.setState({
               imgUrl : res[0].data.media_details.sizes.full.source_url,
               auteur : res[1].data.name,
               isLoaded : vrai

           });
       });
    }
 
   rendu() {
       const { titre, extrait } = this.props.book;
       const {auteur, imgUrl, isLoaded} = this.state;
       revenir (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{auteur}</strong><br/>
              <div dangereusementSetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

exporter les BookItems par défaut

Et la sortie dans le navigateur ressemble à :

Pas la plus jolie non ? Eh bien, c'est parce que le style n'entre pas dans le cadre de ce tutoriel.

Emballer!

Aujourd'hui, je vous ai montré comment utiliser WordPress avec React en tant que CMS headless pour votre application web. Le code React est également disponible sur Git pour que vous puissiez le télécharger. Cependant, cela ne se limite pas à React. Vous pouvez également expérimenter avec VueJS, Angular ou tout autre framework JavaScript. Il y a des tonnes de choses que vous pouvez faire avec WordPress Rest API. Le ciel est la limite alors allez-y et utilisez WordPress pour votre prochain projet Web.