{"id":26639,"date":"2023-09-21T20:21:58","date_gmt":"2023-09-21T20:21:58","guid":{"rendered":"\/tutoriels\/?p=26639"},"modified":"2025-03-28T23:17:27","modified_gmt":"2025-03-28T23:17:27","slug":"react-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/react-wordpress\/","title":{"rendered":"D\u00e9velopper un site WordPress avec React.js : guide du d\u00e9butant"},"content":{"rendered":"

WordPress est un puissant système de gestion de contenu (CMS)<\/strong><\/a> qui vous permet de créer des sites simples ou des boutiques de commerce électronique sophistiquées et complexes. Pour intégrer le code PHP de la plateforme avec JavaScript, vous pouvez utiliser l’API REST WP<\/strong><\/a> et WordPress React<\/strong><\/a>.<\/p>

Développée par Facebook, React est une bibliothèque d’interface utilisateur (UI)<\/strong> qui utilise une approche simple, basée sur des composants, pour construire des applications évolutives, multiplateformes et faciles à comprendre. Cependant, il est important d’apprendre à l’utiliser correctement pour tirer le meilleur parti de ses caractéristiques et de ses fonctions.<\/p>

Dans ce guide, nous allons vous expliquer comment utiliser React avec WordPress. Nous discuterons de ce qu’est le framework, soulignerons ses avantages et vous montrerons comment l’utiliser. Plongeons dans le vif du sujet !<\/p>

\"\"<\/a><\/figure>

Introduction à React<\/h2>

Avant de commencer, nous souhaiterions d’abord poser la question, « qu’est-ce que React ? »<\/strong>. Également connu sous le nom de ReactJS, il s’agit de l’une des bibliothèques JavaScript les plus populaires que vous pouvez utiliser pour le développement web.<\/p>

\"react\"<\/figure>

Créée et maintenue par Facebook, elle comprend un large éventail d’extraits de code JavaScript qui peuvent être utilisés pour construire des composants d’interface utilisateur.<\/p>

Contrairement à la croyance populaire, ReactJS n’est pas un framework JavaScript puisqu’il ne rend que les composants de la couche de visualisation d’une application. Vous pouvez donc l’associer à un véritable framework comme Vue.js<\/strong><\/a> si vous recherchez des fonctions plus sophistiquées.<\/p>

Il est également important de noter qu’il existe ReactJS et React Native<\/strong><\/a>. Ce dernier est un framework JavaScript open-source construit sur la bibliothèque React. Vous pouvez l’utiliser pour créer des applications multiplateformes et des composants spécifiques à une plateforme pour iOS et Android.<\/p>

Les caractéristiques et les fonctions de React<\/h2>

Pour comprendre les avantages de React, il est utile de savoir comment elle fonctionne. Voici quelques-unes de ses caractéristiques et fonctions les plus importantes :<\/p>

JSX<\/h3>

La principale extension de la syntaxe JavaScript utilisée dans React est JSX<\/strong><\/a>. Vous pouvez l’utiliser pour intégrer du code HTML dans des objets JavaScript et simplifier des structures de code complexes.<\/p>

JSX aide également à prévenir les attaques de type « cross-site scripting » (XSS)<\/strong><\/a> en rendant difficile pour des tiers l’injection de code supplémentaire par le biais d’une entrée utilisateur qui n’est pas explicitement écrite dans l’application.<\/p>

Les balises JSX comprennent un nom, des enfants et des attributs. Une balise d’image HTML typique ressemblerait à ceci :<\/p>

<img class=\"\" src=\"\" alt=\"\" >\n<\/pre>
Cependant, une balise JSX ressemblerait à ce qui suit :<\/p>
<img className=\"\" src=\"\" alt=\"\" \/>\n<\/pre>
De même, les valeurs numériques sont écrites entre crochets. Comme en JavaScript, les guillemets représentent des chaînes de caractères <\/p>
const name = 'John Doe’;\nconst element = <h1>Hello, {name}<\/h1>;\nReactDOM.render(\nelement,\ndocument.getElementById('root')\n);<\/pre>
Vous pouvez placer n’importe quelle expression JavaScript<\/strong><\/a> valide à l’intérieur des crochets. Par exemple « user.firstName » ou « formatName(user) ».<\/p>
DOM virtuel<\/h3>
Le Document Object Model (DOM)<\/strong><\/a> présente une page web sous la forme d’une structure arborescente de données, que React stocke dans sa mémoire. React peut ensuite mettre en œuvre des mises à jour de certaines parties de l’arbre plutôt que de le rendre entièrement.<\/p>
Le DOM virtuel<\/strong><\/a> offre une liaison de données à sens unique. Cela permet de le manipuler et de le mettre à jour plus rapidement que le DOM original.<\/p>
Il utilise un processus connu sous le nom de « diffing ». React génère un nouvel arbre du DOM virtuel, le compare à l’ancien, puis trouve le moyen le plus efficace d’appliquer les changements au DOM réel. Cela prend moins de temps et nécessite moins de ressources, ce qui est bénéfique pour les grands projets qui impliquent beaucoup d’interactions avec les utilisateurs.<\/p>
Le DOM prend également en charge l’API déclarative. Cela signifie que vous pouvez indiquer à React l’état dans lequel vous souhaitez que l’interface utilisateur se trouve pour vous assurer que le DOM correspondra à cet état.<\/p>
Composants<\/h3>
Comme nous l’avons mentionné, les composants React<\/strong><\/a> sont des éléments de code autonomes et réutilisables qui composent l’interface utilisateur. Ces composants fonctionnent de la même manière que les fonctions JavaScript. Ils acceptent des props, qui sont des entrées arbitraires. Lorsqu’un composant fonctionnel renvoie un élément, il influence l’apparence de l’interface utilisateur.<\/p>
Les props sont en lecture seule. Voici un exemple :<\/p>
import React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\nconst ParentComponent = () => {\nconst [stateVariable, setStateVariable] = useState('this is the starting value for the variable');\nreturn (\n<div>\n<h1>This is a function component view<\/h1>\n<ChildComponent exampleProp={stateVariable} \/>\n<\/div>\n)\n}\nconst ChildComponent = (props) => {\nreturn (\n<div>\n<h2>{props.exampleProp}<\/h2>\n<\/div>\n)\n}\nReactDOM.render( <ParentComponent \/>, document.getElementById('app') );\n<\/pre>
Il existe deux types principaux de composants : les composants de class<\/strong>e et les composants fonctionnels<\/strong>. Les composants de classe utilisent les hooks WordPress<\/strong> du cycle de vie et les appels d’API :<\/p>
class ExampleComponent extends React.Component {\nconstructor(props) {\nsuper(props);\nthis.state = { };\n}\nrender() {\nreturn (\n<div>\n<h1>This is a view created by a class component<\/h1>\n<\/div>\n);\n}\n}\n<\/pre>
Alors qu’un composant fonctionnel ressemble à l’exemple ci-dessous :<\/p>
const ExampleComponent = (props) => {\nconst [stateVariable, setStateVariable] = useState('');\nreturn (\n<div>\n<h1>This is a function component view<\/h1>\n<\/div>\n)\n}\n<\/pre>
Les composants fonctionnels servent à restituer des vues sans requêtes de données ni gestion d’état.<\/p>
État<\/h3>
L’état<\/strong><\/a> fait référence à l’objet intégré des composants React. C’est là que vous stockez les valeurs des propriétés des éléments. Si l’état change, le composant effectue un nouveau rendu.<\/p>
La gestion d’état est le processus de gestion de ces états d’application et de stockage des données dans des bibliothèques de gestion d’état. Vous pouvez utiliser une poignée de bibliothèques de gestion d’état, notamment Redux<\/strong><\/a> et Recoil<\/strong><\/a>, la dernière étant plus conviviale pour les débutants.<\/p>
\n
\"\"<\/a><\/figure>\n<\/div>
Pourquoi utiliser React ?<\/h2>
Il y a de nombreux avantages à utiliser React pour le développement de WordPress. Tout d’abord, il est facile à utiliser pour les débutants et tous les meilleurs fournisseurs d’hébergement Web<\/strong><\/a> supportent son utilisation.<\/p>
Comme il repose sur du JavaScript et des composants simples, vous pouvez l’utiliser pour créer des applications web après seulement quelques jours d’apprentissage. Il existe également de nombreux sites web pour apprendre à coder gratuitement en ligne<\/strong><\/a>. Une solide compréhension des bases de JavaScript peut simplifier le processus.<\/p>
Un autre avantage de React est qu’il vous permet de réutiliser des composants dans d’autres applications. Comme il s’agit d’un logiciel libre, vous pouvez préconstruire vos composants et les imbriquer les uns dans les autres sans alourdir votre code.<\/p>
Les composants React sont également relativement simples à écrire, grâce à l’intégration JSX, dont nous parlerons dans un instant. Vous pouvez incorporer la typographie HTML, les balises et exploiter le rendu de fonctions multiples pour le développement d’applications dynamiques.<\/p>
Avec React, vous pouvez également utiliser l’interface de ligne de commande (CLI) officielle – Create React App<\/strong> – pour accélérer le développement d’applications à page unique. Il est livré avec des outils préconfigurés qui peuvent vous aider à rationaliser le processus d’installation et d’apprentissage.<\/p>
Enfin, React est également adapté au référencement. L’implémentation du DOM virtuel permet d’augmenter la vitesse des pages, en améliorant les performances et le rendu côté serveur, ce qui facilite l’exploration de votre site par les robots.<\/p>
Aperçu de l’API REST de WP<\/h2>
L’interface de programme d’application (API) WordPress REST<\/strong><\/a> permet aux développeurs d’intégrer des frameworks JavaScript tels que React à WordPress. Vous pouvez accéder à l’API WP REST depuis le front-end de votre site, ajouter des types de posts personnalisés, et construire une application React soutenue par cette API.<\/p>
L’API REST WP est un ensemble de protocoles utilisés pour construire des applications logicielles. Ils définissent comment les informations et les données sont partagées entre les programmes et comment leurs composants interagissent. REST, abréviation de « Representational State Transfer », fait référence aux contraintes architecturales des programmes qui définissent le style.<\/p>
Le format de structuration des données à lire par les applications s’appelle JavaScript Object Notation (JSON)<\/strong><\/a>. Il permet de rationaliser la communication entre WordPress et d’autres applications et programmes.<\/p>
L’API REST de WordPress crée un environnement de découplage qui permet aux utilisateurs de traiter WordPress comme un CMS sans tête<\/strong>. Cela signifie qu’une variété de frameworks frontaux peut être utilisée pour accrocher le back-end de WordPress. C’est un avantage pour les développeurs qui ne sont pas trop enthousiastes à propos de PHP.<\/p>
React – Avant de commencer<\/h2>
Des connaissances de base en JavaScript<\/strong><\/a>, CSS<\/strong>, et HTML <\/strong>vous aideront à apprendre comment utiliser React. En outre, le processus d’apprentissage peut être plus efficace si vous êtes familier avec ECMAScript 6<\/strong><\/a> (également connu sous le nom d’ES6), la programmation fonctionnelle et la programmation orientée objet.<\/p>
En termes de programme, vous aurez également besoin de quelques dépendances installées sur votre ordinateur.Tel que NodeJS<\/strong> et npm<\/strong><\/a> ainsi qu’un éditeur de texte. Si vous le souhaitez, vous pouvez également utiliser Git<\/strong><\/a> pour le contrôle des versions.<\/p>
La manière la plus populaire de développer des projets React pour WordPress est d’utiliser Create React App<\/strong><\/a>:<\/p>
\"creer<\/figure>
CRA fournit un environnement simple pour apprendre React et l’utiliser pour construire des applications à page unique. Notez que pour l’utiliser, vous aurez d’abord besoin de Node et de npm sur votre appareil.<\/p>
Pour créer un nouveau projet, vous pouvez exécuter la commande suivante dans votre terminal :<\/p>
npx create-react-app wp-react-demo<\/pre>
Si vous ne l’avez pas encore fait, la commande vous confirmera que vous souhaitez installer Create React App avant de créer la démo. Cela crée un modèle standard. Vous pouvez également remplacer « wp-react-demo » par votre propre nom.<\/p>
Ensuite, exécutez ce qui suit :<\/p>
cd wp-react-demo\nnpm start\n<\/pre>
La structure du répertoire ressemblera à ceci :<\/p>
├── README.md\n├── package.json\n├── public\n│ ├── favicon.ico\n│ ├── index.html\n│ └── manifest.json\n├── src\n│ ├── App.css\n│ ├── App.js\n│ ├── App.test.js\n│ ├── index.css\n│ ├── index.js\n│ ├── logo.svg\n│ └── registerServiceWorker.js\n<\/pre>
Vous trouverez tous les fichiers JavaScript sur lesquels vous allez travailler dans le répertoire src. Maintenant, vous pouvez visiter localhost:3000<\/strong> pour charger le fichier index.html<\/strong>.<\/p>
Le fichier public\/index.html<\/strong> ne contient pas grand-chose. Cependant, vous pouvez trouver la ligne suivante, qui sera le point de départ de votre projet :<\/p>
<div id=\"root\"><\/div><\/pre>
Sous le fichier index.js<\/strong> du répertoire src, vous trouverez ce qui suit :<\/p>
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nReactDOM.render(<App \/>, document.getElementById('root'));\n<\/pre>
Cela signifie qu’il rend le composant App<\/strong>, que vous pouvez trouver sous src.\/App.js<\/strong>. Vous pouvez le remplacer par votre propre contenu HTML. Nous pouvons utiliser l’insider HTML render()grâce à l’extension de la syntaxe JSX.<\/p>
Comment interroger l’API REST de WP depuis React<\/h2>
Par défaut, vous pouvez faire une une requête GET pour utiliser l’API REST de WP sur le front-end de votre site. Par exemple, vous pouvez utiliser \/wp-json\/wp\/v2\/posts pour obtenir tous vos posts. Pour rester dans l’exemple précédent, les données de ces posts se trouvent à l’adresse http:\/\/localhost\/wp-json\/wp\/v2\/posts\/<\/strong>.<\/p>
Pour commencer avec React, vous pouvez lancer cette commande dans votre terminal :<\/p>
npx create-react-app react-app<\/pre>
Ensuite, exécutez ce qui suit :<\/p>
cd react-app\nnpm install @material-ui\/core\n<\/pre>
Vous pouvez ensuite entrer l’exemple ci-dessous :<\/p>
import React, { useEffect, useState } from 'react';\nimport Card from '@material-ui\/core\/Card';\nimport CardContent from '@material-ui\/core\/CardContent';\nimport Typography from '@material-ui\/core\/Typography';\nimport Grid from '@material-ui\/core\/Grid';\nexport default function Posts() {\nconst [posts, setPosts] = useState([]);\nuseEffect(() => {\nasync function loadPosts() {\nconst response = await fetch('\/wp-json\/wp\/v2\/posts');\nif(!response.ok) {\n\/\/ oups! something went wrong\nreturn;\n}\nconst posts = await response.json();\nsetPosts(posts);\n}\nloadPosts();\n}, [])\nreturn (\n<Grid container spacing={2}>\n{posts.map((post, index) => (\n<Grid item xs={4} key={index}>\n<Card>\n<CardContent>\n<Typography\ncolor=\"textSecondary\"\ngutterBottom\ndangerouslySetInnerHTML={{__html: post.title.rendered}} \/>\n<Typography\nvariant=\"body2\"\ncomponent=\"p\"\ndangerouslySetInnerHTML={{__html: post.content.rendered}} \/>\n<\/CardContent>\n<\/Card>\n<\/Grid>\n))}\n<\/Grid>\n);\n}\n<\/pre>
L’exemple ci-dessus utilise les Hooks React<\/strong><\/a> useEffect et useState. Le premier déclare le tableau de posts et appelle à le mettre à jour, tandis que le second récupère le code.<\/p>
\n\n\n    
\n        \n            \n                \n            <\/svg>\n            Warning        <\/span>\n        
\n            Attention ! Lorsque vous utilisez dangerouslySetInnerHTML dans votre code, soyez conscient des risques suivants :
\n1. Vulnérabilité : Une mauvaise utilisation peut exposer votre application à des attaques de type cross-site scripting (XSS).
\n2. Maintenabilité du code : Il devient plus difficile de maintenir et de déboguer le code lorsque le HTML est directement injecté.
\n        <\/p>\n    <\/div>\n\n    \n\n\n\n<\/p>
Comment créer un type d’article personnalisé avec React<\/h2>
Vous pouvez également utiliser React pour créer un type d’article personnalisé sur WordPress<\/a><\/strong>. Cependant, il y a quelques outils que vous devrez installer à l’avance. Cela vous aidera à rendre le processus aussi simple et fluide que possible.Tout d’abord, vous devrez ajouter le plugin WordPress Custom Post Type UI<\/strong><\/a>.<\/p>
\"plugin<\/figure>
Ce plugin simplifie le processus de création de types d’articles personnalisés dans WordPress.<\/p>
Nous vous recommandons également d’installer Advanced Custom Fields (ACF)<\/strong><\/a>.<\/p>
\"advanced<\/figure>
Il s’agit également d’un outil gratuit. Ce plugin peut être utilisé pour créer et ajouter des champs personnalisés à vos types d’articles personnalisés. Nous vous conseillons également d’installer L’API ACF to REST<\/strong><\/a> pour rendre vos champs personnalisés accessibles dans vos types d’articles.<\/p>
Pour commencer, naviguez vers <\/em>CPT UI > Add\/Edit Post Types<\/strong> <\/em>depuis votre zone d’administration. Dans notre exemple, nous utiliserons le nom « Books». Nous sélectionnerons également l’option de remplissage automatique des autres champs.<\/p>
\"wordpress<\/figure>
Dans la section Show in REST API<\/strong>, réglez-la sur True<\/strong> et entrez « Books »comme nom de base de l’API REST. Sous Supports<\/strong>, cochez les cases Author<\/strong> <\/em>et Custom fields<\/strong>. Cliquez sur Save Post Type<\/strong> lorsque vous avez fini.<\/p>
Ensuite, nous pouvons créer des champs personnalisés pour le type d’article personnalisé. Naviguez vers Custom Fields > Add New<\/strong>, et entrez un titre approprié, tel que « Book Info ». Vous pouvez cliquer sur Add Field,<\/strong> <\/em>puis compléter l’étiquette, le nom et le type du champ.<\/p>
\"wordpress<\/figure>
Sous Location<\/strong>, vous pouvez définir le type d’article pour qu’il corresponde au type d’article personnalisé <\/em>Book<\/strong>. Lorsque vous avez terminé, sélectionnez Publish<\/strong> pour activer le champ personnalisé.<\/p>
Ensuite, allez dans My Books > Add New<\/strong> <\/em>et entrez son titre, son résumé et son image vedette. Vous pouvez répéter ce processus pour en créer autant que vous le souhaitez.<\/p>
Maintenant, depuis votre terminal, entrez les commandes suivantes, en exécutant chacune d’entre elles avant de passer à la suivante :<\/p>
npx create-react-app frontend\ncd frontend\nnpm i axios\nnpm start\n<\/pre>
Ensuite, dans le répertoire Src, vous pouvez créer un dossier appelé components<\/em>, suivi d’un fichier appelé books.js. <\/strong>Lorsque vous avez terminé, entrez ce qui suit :<\/p>
import React, { Component } from 'react';\nimport axios from 'axios';\nexport class Books extends Component {\nstate = {\nbooks: [],\nisLoaded: false\n}\ncomponentDidMount () {\naxios.get('http:\/\/localhost:3000\/wp-json\/wp\/v2\/books')\n.then(res => this.setState({\nbooks: res.data,\nisLoaded: true\n}))\n.catch(err => console.log(err))\n}\nrender() {\nconsole.log(this.state);\nreturn (\n<div>\n<\/div>\n)\n}\n}\nexport default Books;<\/pre>
Dans le fichier App.js<\/strong>, entrez ce qui suit :<\/p>
import React from 'react';\nimport '.\/App.css';\nimport Books from '.\/components\/Books';\nfunction App() {\nreturn (\n<div className=\"App\">\n<Books>\n<\/div>\n);\n}\nexport default App;\n<\/pre>
l’application React. Vous pouvez voir la console de données « Book » lorsque vous l’ouvrez dans un navigateur. Vous pouvez afficher chaque titre en parcourant chaque livre.Entrez ce qui suit dans Book.js<\/strong>:<\/p>
render() {\nconst {books, isLoaded} = this.state;\nreturn (\n<div>\n{books.map(book => <h4>{book.title.rendered}<\/h4>)}\n<\/div>\n)\n}<\/pre>
Notez que vous pouvez également séparer la collection de livres en un seul composant « livre ». Pour ce faire, créez un fichier dans src\/components. Vous pouvez également ajouter un CSS personnalisé pour styliser le type d’article personnalisé (app.css).<\/p>
Comment créer un thème WordPress React (2 méthodes)<\/h2>
Vous vous demandez peut-être comment créer un thème WordPress<\/strong><\/a> en utilisant React. Il existe une poignée d’options, alors regardons deux méthodes populaires :<\/p>
1. Créer un thème WordPress React en utilisant les scripts WP<\/h3>
Dans les applications React typiques, vous devez importer React au début des fichiers. Cependant, depuis WordPress 5.0<\/strong><\/a>, le CMS est livré avec les bibliothèques React et ReactDOM et les exporte dans<\/p>
wp.element, un objet fenêtre global.<\/p>
Si vous avez déjà utilisé React, vous avez probablement utilisé Create React App pour exécuter votre serveur de développement. Cependant, ce n’est pas nécessaire avec WordPress.<\/p>
L’équipe de WordPress a créé un package wp-scripts basé sur les react-scripts utilisés avec Create React App. WP Scripts inclut les commandes par défaut.Pour charger React dans votre thème, naviguez jusqu’au fichier functions.php<\/strong> de votre thème, et ajoutez l’extrait de code suivant :<\/p>
\/\/ Enqueue Theme JS w React Dependency\nadd_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );\nfunction my_enqueue_theme_js() {\nwp_enqueue_script(\n'my-theme-frontend',\nget_stylesheet_directory_uri() . '\/build\/index.js',\n['wp-element'],\ntime(), \/\/ Change this to null for production\ntrue\n);\n}\n<\/pre>
Cela ajoutera l’élément wp-element comme dépendance de votre fichier JavaScript. Ensuite, nous devons créer un fichier package.json<\/strong>. Exécutez la commande suivante depuis la racine de votre thème WordPress :<\/p>
npm init\n<\/pre>
Une fois que c’est fait, exécutez la commande suivante :<\/p>
npm install @wordpress\/scripts --save-dev\n<\/pre>
Les scripts WP seront téléchargés dans votre node_modules<\/strong>, et seront donc disponibles pour être utilisés dans votre ligne de commande. Pour faire correspondre les scripts WP aux scripts NPM, vous pouvez naviguer dans votre fichier package.json<\/strong>, charger les paramètres « scripts », et les remplacer par cet exemple :<\/p>
{\n\"name\": \"myreacttheme\",\n\"version\": \"1.0.0\",\n\"description\": \"My WordPress theme with React\",\n\"main\": \"src\/index.js\",\n\"dependencies\": {},\n\"devDependencies\": {\n\"@wordpress\/scripts\": \"^5.1.0\"\n},\n\"scripts\": {\n\"build\": \"wp-scripts build\",\n\"check-engines\": \"wp-scripts check-engines\",\n\"check-licenses\": \"wp-scripts check-licenses\",\n\"lint:css\": \"wp-scripts lint-style\",\n\"lint:js\": \"wp-scripts lint-js\",\n\"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n\"start\": \"wp-scripts start\",\n\"test:e2e\": \"wp-scripts test-e2e\",\n\"test:unit\": \"wp-scripts test-unit-js\"\n},\n\"author\": \"\",\n\"license\": \"1 GNU V2+, MIT\"\n}\n<\/pre>
Vous pouvez ensuite exécuter ce qui suit :<\/p>
npm start\n<\/pre>
Cela recherchera les fichiers importés de src\/index.js<\/strong> et les construira dans build\/index.js<\/strong> chaque fois qu’un fichier est modifié.<\/p>
\n
\"\"<\/a><\/figure>\n<\/div>
2. Créer un thème WordPress React en utilisant un Create-React-WPTheme<\/h3>
Une autre option est d’utiliser create-react-wptheme<\/strong><\/a> de devloco. Ce package est similaire à create-react-app. Cependant, il utilise WordPress au lieu de webpack comme serveur de développement. Vous aurez également accès à toutes les fonctions de base, les hooks, les actions, les filtres, etc.<\/p>
Pour le mettre en place, vous pouvez démarrer un terminal (ou git bash) dans votre installation locale de WordPress, puis taper la commande suivante :<\/p>
npx create-react-wptheme barebones<\/pre>
« Barebones »<\/strong> est le nom du thème. Vous pouvez le changer pour mettre n’importe quel nom que vous souhaitez donner à votre thème.<\/p>
Vous verrez un message vous informant que l’installation a créé un dossier racine et un répertoire « react-src » à l’intérieur de celui-ci. Ce répertoire est important car il contiendra votre code non compilé.<\/p>
Ensuite, nous devons ajouter les fichiers styles.css<\/strong>, index.php<\/strong>, et d’autres fichiers nécessaires pour le valider. Dans le terminal, entrez la commande suivante :<\/p>
cd barebones\/react-src\nnpm run wpstart\n<\/pre>
Vous devriez maintenant voir votre nouveau thème lorsque vous naviguez vers wp-admin > themes<\/strong>. Cliquez sur le bouton Activate<\/strong>, puis retournez dans le terminal et exécutez la commande suivante :<\/p>
npm run wpstart<\/pre>
Cela devrait automatiquement ouvrir un nouvel onglet de navigateur. Notez que les fichiers situés dans le dossier racine (tout ce qui est en dehors de react-src) ne doivent pas être édités. Ils contiennent la version compilée du code nécessaire à WordPress et React.<\/p>
Pour créer un nouveau thème, vous pouvez utiliser ce qui suit :<\/p>
npx create-react-wptheme my_react_theme<\/pre>
Vous pouvez modifier « my_react_theme » comme vous le souhaitez. Ensuite, vous pouvez entrer la commande suivante :<\/p>
cd my_react_theme\/react-src\nnpm run start\n<\/pre>
N’oubliez pas de le remplacer par le même nom que celui que vous avez utilisé à l’étape précédente. Cela permet de configurer le thème pour qu’il soit visible dans la zone d’administration.<\/p>
Une fois le développement de votre thème terminé, vous devrez utiliser la commande build <\/strong>pour le mettre en production. Pour ce faire, ouvrez votre invite de commande, naviguez jusqu’au dossier react-src de votre thème, et exécutez ce qui suit :<\/p>
npm run build\n<\/pre>
Cela optimisera vos fichiers situés dans un dossier. Vous pouvez ensuite le déployer sur votre serveur.<\/p>
Comment ajouter React à un modèle de page personnalisé<\/h2>
Si vous vous demandez comment créer un thème enfant WordPress<\/strong><\/a> en utilisant React, le processus est relativement similaire. Vous pouvez ajouter React à un modèle de page personnalisé<\/strong>.<\/p>
Commençons par une structure de thème standard :<\/p>
\/build\n\/src\n\/-- index.js\nfunctions.php\npackage.json\npage-react.php\nstyle.css\n<\/pre>
Ensuite, vous devez ajouter le code suivant au fichier functions.php <\/strong>de votre thème :<\/p>
<?php\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\nfunction my_theme_enqueue_styles() {\n$parent_style = 'twentytwenty-style';\nwp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\nwp_enqueue_style( 'child-style',\nget_stylesheet_directory_uri() . '\/style.css',\n[ $parent_style ],\ntime() \/\/For production use wp_get_theme()->get('Version')\n);\nwp_enqueue_script(\n'my-theme-frontend',\nget_stylesheet_directory_uri() . '\/build\/index.js',\n['wp-element'],\ntime() \/\/For production use wp_get_theme()->get('Version')\n);\n}\n<\/pre>
Vous devrez également ajouter du code à votre fichier style.css<\/strong>. Copiez et collez-y ce qui suit :<\/p>
\/*\nTheme Name: Twenty Twenty Child\nDescription: Twenty Twenty Child Theme\nAuthor: Your Name\nAuthor URI: https:\/\/yourwebsite.com\nTemplate: twentytwenty\nVersion: 0.9.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentytwentychild\n*\/\n<\/pre>
Vous pouvez ensuite créer un modèle de page personnalisé de base page-react.php<\/strong> avec cet exemple :<\/p>
<? php\n\/**\n* Template Name: React Template\n*\/\nget_header();\n?>\n<main id=\"site-content\" role=\"main\">\n<article class=\"post-2 page type-page status-publish hentry\">\n<?php get_template_part( 'template-parts\/entry-header' ); ?>\n<div class=\"post-inner thin\">\n<div class=\"entry-content\">\n<div id=\"react-app\"><\/div><!-- #react-app -->\n<\/div><!-- .entry-content -->\n<\/div><!-- .post-inner -->\n<\/article><!-- .post -->\n<\/main><!-- #site-content -->\n<?php get_template_part( 'template-parts\/footer-menus-widgets' ); ?>\n<?php get_footer(); ?>\n<\/pre>
Vous pouvez maintenant créer une nouvelle page dans WordPress et sélectionner React Template<\/strong> comme modèle de page.<\/p>
Comment utiliser React dans votre application<\/h2>
Si vous souhaitez utiliser React dans une application existante, vous pouvez ajouter son réseau de diffusion de contenu (CDN)<\/strong> directement à votre fichier HTML. Pour commencer, accédez à la page HTML où vous souhaitez ajouter React.<\/p>
Insérez une balise <div>  vide. Cela créera un conteneur dans lequel vous pourrez rendre un composant. Pour cet exemple, disons que nous essayons de créer un bouton.<\/p>
Ensuite, insérez trois balises <script> sur la page avant la balise de fermeture <\/body>. Les deux premières seront utilisées pour charger React, et la troisième chargera le code de votre composant.<\/p>
Maintenant, dans le même dossier que votre page HTML, créez un nouveau fichier et nommez-le button.js <\/strong>(ou tout autre nom correspondant à l’élément que vous ajoutez). Copiez et collez le code suivant dans ce fichier :<\/p>
'use strict';\nconst e = React.createElement;\nclass Button extends React.Component {\nconstructor(props) {\nsuper(props);\nthis.state = { clicked: false };\n}\nrender() {\nif (this.state.clicked) {\nreturn 'You pressed this button.';\n}\nreturn e(\n'button',\n{ onClick: () => this.setState({ clicked: true }) },\n'Press Me'\n);\n}\n}\n<\/pre>
Vous obtiendrez ainsi un composant de type bouton qui affiche un message quand on clique dessus. Pour utiliser le bouton dans votre page HTML, vous pouvez ajouter l’extrait de code suivant au bas du fichier button.js<\/strong> :<\/p>
const domContainer = document.querySelector('#button_container');\nReactDOM.render(e(Button), domContainer);<\/pre>
Il renvoie au conteneur <div> que vous avez ajouté à votre page HTML. Il rend ensuite le composant du bouton React.<\/p>
Vous pouvez également utiliser React pour créer une application React vierge à partir de zéro. La meilleure façon de le faire est d’utiliser la solution Create React App dont nous avons parlé précédemment. Elle peut s’avérer utile pour les applications à page unique.<\/p>
Pour commencer, vous pouvez exécuter cette commande dans votre terminal :<\/p>
npx create-react-app my-app<\/pre>
Notez que vous pouvez remplacer « my-app » par le nom que vous souhaitez lui donner. Pour la lancer, vous pouvez naviguer jusqu’au dossier de l’application en lançant la commande cd my-app suivie de  npm start.<\/p>
L’application s’exécutera alors en mode développement. Vous pouvez la visualiser dans votre navigateur à l’adresse http:\/\/localhost:3000<\/strong>.<\/p>
Conclusion<\/h2>
Le développement de projets WordPress React peut être un processus simple et direct, même si vous êtes un débutant. Cependant, il est important d’apprendre comment le cadre JavaScript fonctionne avec le CMS et son API REST pour le faire avec succès.<\/p>
Heureusement, vous pouvez apprendre à utiliser React en un rien de temps avec des connaissances de base en JavaScript, HTML et CSS. Comme nous l’avons évoqué dans cet article, vous pouvez l’utiliser pour créer des applications à page unique ainsi que des thèmes et des modèles de page personnalisés.<\/p>
Nous espérons que ce guide vous a aidé à mieux comprendre React et ses capacités pour le développement web.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress est un puissant système de gestion de contenu (CMS) qui vous permet de créer des sites simples ou des boutiques de commerce électronique sophistiquées et complexes. Pour intégrer le code PHP de la plateforme avec JavaScript, vous pouvez utiliser l’API REST WP et WordPress React. Développée par Facebook, React est une bibliothèque d’interface utilisateur […]<\/p>\n
Read More…<\/a><\/p>\n","protected":false},"author":335,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"D\u00e9velopper un Site WordPress Avec React.js : Guide Complet","rank_math_description":"Apprenez \u00e0 construire un site WordPress React dynamique - depuis les bases \u00e0 la construction d'applications, de th\u00e8mes, etc.","rank_math_focus_keyword":"react wordpress","footnotes":""},"categories":[5849,5848],"tags":[],"class_list":["post-26639","post","type-post","status-publish","format-standard","hentry","category-avance","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-react\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-react\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/react-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wordpress-react\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/panduan-wordpress-react\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/a-beginners-guide-to-wordpress-react-development-projects\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/a-beginners-guide-to-wordpress-react-development-projects\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-react\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-react\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-react\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-react\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-react\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wordpress-react\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wordpress-react\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wordpress-react\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-react\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/26639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/335"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=26639"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/26639\/revisions"}],"predecessor-version":[{"id":39599,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/26639\/revisions\/39599"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=26639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=26639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=26639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}