{"id":69459,"date":"2023-05-26T07:55:54","date_gmt":"2023-05-26T06:55:54","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69459&#038;preview=true&#038;preview_id=69459"},"modified":"2025-09-08T16:05:48","modified_gmt":"2025-09-08T15:05:48","slug":"wordpress-headless-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/","title":{"rendered":"Comment cr\u00e9er un site WordPress Headless avec React.js"},"content":{"rendered":"<p>WordPress est l&rsquo;un des <a href=\"https:\/\/kinsta.com\/fr\/part-de-marche-de-wordpress\/\">syst\u00e8mes de gestion de contenu (Content Management System) les plus populaires<\/a>, utilis\u00e9 par 810 millions de personnes, soit 41 % de l&rsquo;ensemble de l&rsquo;internet ! C&rsquo;est le choix par excellence pour tous ceux qui souhaitent cr\u00e9er rapidement un site web, car il est simple, convivial, offre une grande vari\u00e9t\u00e9 d&rsquo;options de personnalisation et dispose d&rsquo;un solide \u00e9cosyst\u00e8me d&rsquo;extensions et d&rsquo;autres ressources.<\/p>\n<p>L&rsquo;une des fa\u00e7ons de tirer le meilleur parti de WordPress est d&rsquo;opter pour le mode \u00ab headless \u00bb.<\/p>\n<p>Un CMS headless, \u00e9galement connu sous le nom de syst\u00e8me headless, est un type de CMS <a href=\"https:\/\/kinsta.com\/fr\/blog\/backend-vs-frontend\/\">backend<\/a> qui est uniquement utilis\u00e9 pour g\u00e9rer le contenu. Cela vous permet d&rsquo;int\u00e9grer du contenu dans n&rsquo;importe quel syst\u00e8me ou site web en <a href=\"https:\/\/kinsta.com\/fr\/blog\/api-endpoint\/\">appelant simplement les API<\/a> du CMS headless.<\/p>\n<p>Cependant, l&rsquo;interface publique (frontend) doit \u00eatre g\u00e9r\u00e9e s\u00e9par\u00e9ment. C&rsquo;est l\u00e0 qu&rsquo;intervient une API.<\/p>\n<p>Les API permettent \u00e0 deux ou plusieurs applications diff\u00e9rentes d&rsquo;\u00e9changer des donn\u00e9es. Dans le cas pr\u00e9sent, l&rsquo;API est utilis\u00e9e pour transf\u00e9rer les donn\u00e9es du CMS vers un site web frontend, ce qui offre une plus grande flexibilit\u00e9 et des <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-lent\/\">performances plus rapides<\/a>.<\/p>\n<p>Dans cet article, nous verrons ce qu&rsquo;est un CMS headless, pourquoi vous pourriez vouloir en cr\u00e9er un et comment le configurer pour WordPress.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce qu&rsquo;un site WordPress headless ?<\/h2>\n<p>Un <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\">site WordPress headless<\/a> est un type de site qui utilise principalement <a href=\"https:\/\/kinsta.com\/fr\/blog\/pourquoi-utiliser-wordpress\/\">WordPress<\/a> comme CMS, ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/logiciel-cms\/\">syst\u00e8me de gestion de contenu<\/a>, et utilise d&rsquo;autres technologies frontend telles que <a href=\"https:\/\/kinsta.com\/fr\/blog\/vue-vs-react\/\">React ou Vue<\/a> pour l&rsquo;interface publique.<\/p>\n<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">biblioth\u00e8ques et frameworks JavaScript<\/a> sont utilis\u00e9s pour afficher le contenu du site web. Par cons\u00e9quent, un site WordPress headless poss\u00e8de un frontend et un backend s\u00e9par\u00e9s, et une API est utilis\u00e9e pour la communication.<\/p>\n<p>En termes plus simples, une architecture headless signifie que le CMS est utilis\u00e9 uniquement pour stocker et g\u00e9rer votre contenu, et qu&rsquo;il ne se pr\u00e9occupe pas de l&rsquo;interface publique du site web.<\/p>\n<p>La t\u00e2che principale du frontend, en revanche, est d&rsquo;afficher le contenu, et il ne se soucie pas de l&rsquo;endroit o\u00f9 le contenu est stock\u00e9 ou g\u00e9r\u00e9, tant qu&rsquo;il peut l&rsquo;atteindre.<\/p>\n<p>Un WordPress headless est plus performant car les requ\u00eates du frontend sont g\u00e9r\u00e9es par des technologies plus rapides <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-tutoriels-react\/\">comme React<\/a>, et seul le backend est g\u00e9r\u00e9 par WordPress. La s\u00e9paration du frontend et du backend permet de faire \u00e9voluer les composants de mani\u00e8re ind\u00e9pendante.<\/p>\n\n<h2>Avantages et inconv\u00e9nients de WordPress headless<\/h2>\n<p>Comme pour toutes les options de d\u00e9veloppement, il y a des avantages et des inconv\u00e9nients \u00e0 opter pour une solution WordPress headless. Il est important de comprendre les deux avant de prendre une d\u00e9cision.<\/p>\n<h3>Les avantages d&rsquo;un WordPress headless<\/h3>\n<p>Voici quelques-uns des principaux avantages d&rsquo;une impl\u00e9mentation de WordPress headless :<\/p>\n<ul>\n<li><strong>Flexibilit\u00e9 :<\/strong> Headless WordPress permet aux d\u00e9veloppeurs de cr\u00e9er des exp\u00e9riences frontend personnalis\u00e9es sans \u00eatre limit\u00e9s par le <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-qu-un-theme-wordpress\/\">syst\u00e8me de th\u00e8me traditionnel de WordPress<\/a>. Cela signifie que vous pouvez cr\u00e9er des interfaces utilisateur et des exp\u00e9riences uniques pour des besoins sp\u00e9cifiques.<\/li>\n<li><strong>Performance :<\/strong> La s\u00e9paration du frontend et du backend d&rsquo;un site WordPress peut <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-lent\/\">acc\u00e9l\u00e9rer le chargement<\/a> de votre site et augmenter ses performances, car le serveur ne fournit des donn\u00e9es que par l&rsquo;interm\u00e9diaire d&rsquo;une API, au lieu de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">rendre le code HTML<\/a> pour chaque requ\u00eate.<\/li>\n<li><strong>S\u00e9curit\u00e9 :<\/strong> En s\u00e9parant le frontend et le backend, WordPress headless peut fournir une couche suppl\u00e9mentaire de s\u00e9curit\u00e9 en limitant l&rsquo;acc\u00e8s \u00e0 la base de code et \u00e0 la base de donn\u00e9es sous-jacentes de WordPress.<\/li>\n<\/ul>\n<h3>Les inconv\u00e9nients d&rsquo;un WordPress headless<\/h3>\n<p>Les inconv\u00e9nients de WordPress headless peuvent \u00eatre les suivants :<\/p>\n<ul>\n<li><strong>L&rsquo;absence de th\u00e8mes :<\/strong> Puisque WordPress headless ne s&rsquo;appuie pas sur des <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">th\u00e8mes pr\u00e9-construits<\/a>, vous devrez cr\u00e9er vos propres th\u00e8mes personnalis\u00e9s. Cela peut prendre du temps et n\u00e9cessiter des ressources suppl\u00e9mentaires.<\/li>\n<li><strong>Le co\u00fbt :<\/strong> Le d\u00e9veloppement d&rsquo;un site WordPress headless peut \u00eatre plus co\u00fbteux qu&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/blog\/cout-site-web-wordpress\/\">site WordPress traditionnel<\/a>, car il n\u00e9cessite plus d&rsquo;expertise technique et de ressources pour le mettre en place et le maintenir.<\/li>\n<li><strong>Limitations des extensions :<\/strong> Certaines <a href=\"https:\/\/kinsta.com\/fr\/sujets\/extensions-wordpress\/\">extensions WordPress<\/a> peuvent ne pas fonctionner avec un site WordPress headless, car elles s&rsquo;appuient sur des th\u00e8mes WordPress pour fonctionner correctement.<\/li>\n<\/ul>\n<h2>Qu&rsquo;est-ce que la REST API WordPress ?<\/h2>\n<p>La <a href=\"https:\/\/kinsta.com\/fr\/blog\/api-rest-wordpress\/\">REST API WordPress<\/a> est utilis\u00e9e comme interface entre le backend et le frontend. Avec l&rsquo;API, les donn\u00e9es peuvent \u00eatre envoy\u00e9es ou r\u00e9cup\u00e9r\u00e9es du site facilement, car l&rsquo;API a un acc\u00e8s contr\u00f4l\u00e9 aux donn\u00e9es du site. Elle garantit \u00e9galement que seuls les utilisateurs autoris\u00e9s peuvent interagir avec elle.<\/p>\n<p>L&rsquo;API peut prendre en charge un large \u00e9ventail de formats de donn\u00e9es, y compris JSON, ce qui facilite l&rsquo;interaction avec le syst\u00e8me.<\/p>\n<p>La REST API de WordPress est un outil puissant qui permet aux d\u00e9veloppeurs de cr\u00e9er, de mettre \u00e0 jour ou de supprimer des donn\u00e9es, ainsi que de cr\u00e9er des fonctionnalit\u00e9s personnalis\u00e9es pour les sites ou de s&rsquo;int\u00e9grer \u00e0 un autre service. De plus, il existe des extensions qui \u00e9tendent les fonctionnalit\u00e9s de l&rsquo;API, comme l&rsquo;int\u00e9gration de m\u00e9thodes d&rsquo;authentification suppl\u00e9mentaires.<\/p>\n<h2>Qu&rsquo;est-ce que React ?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> est une biblioth\u00e8que <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a> pour la construction d&rsquo;interfaces utilisateur. Il s&rsquo;agit d&rsquo;une biblioth\u00e8que frontend open source, r\u00e9utilisable et bas\u00e9e sur des composants, qui permet aux d\u00e9veloppeurs de cr\u00e9er des <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-composants-react-ui\/\">composants d&rsquo;interface utilisateur (IU)<\/a> \u00e0 l&rsquo;aide d&rsquo;une syntaxe d\u00e9clarative.<\/p>\n<p>React cr\u00e9e une interface utilisateur interactive et rend les composants lorsque les donn\u00e9es changent. Cette biblioth\u00e8que est tr\u00e8s populaire parmi les d\u00e9veloppeurs qui souhaitent cr\u00e9er des composants complexes et r\u00e9utilisables, g\u00e9rer efficacement l&rsquo;\u00e9tat et mettre facilement \u00e0 jour l&rsquo;interface utilisateur en temps r\u00e9el.<\/p>\n<p>La solide communaut\u00e9 de d\u00e9veloppeurs de React a cr\u00e9\u00e9 un ensemble d&rsquo;outils, de biblioth\u00e8ques et de ressources pour am\u00e9liorer les fonctionnalit\u00e9s de la biblioth\u00e8que. De nombreuses organisations et entreprises adoptent React comme technologie pour cr\u00e9er des applications web complexes, dynamiques et performantes.<\/p>\n<figure id=\"attachment_152469\" aria-describedby=\"caption-attachment-152469\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152469 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\" alt=\"Entreprises populaires utilisant React.js\" width=\"1024\" height=\"621\"><\/a><figcaption id=\"caption-attachment-152469\" class=\"wp-caption-text\">Entreprises populaires utilisant React.js (source : inexture.com)<\/figcaption><\/figure>\n<h3>Pourquoi utiliser React ?<\/h3>\n<p>React offre de nombreux avantages qui en font un excellent choix pour d\u00e9velopper des applications web complexes et dynamiques.<\/p>\n<p>Voici quelques-uns des principaux avantages de l&rsquo;utilisation de React :<\/p>\n<ul>\n<li><strong>Syntaxe d\u00e9clarative :<\/strong> React utilise une approche d\u00e9clarative pour construire des composants d&rsquo;interface utilisateur, ce qui facilite la cr\u00e9ation de composants r\u00e9utilisables et tr\u00e8s efficaces.<\/li>\n<li><strong>Grande communaut\u00e9 et \u00e9cosyst\u00e8me :<\/strong> React dispose d&rsquo;une communaut\u00e9 de d\u00e9veloppeurs importante et active, ce qui a conduit \u00e0 la cr\u00e9ation d&rsquo;un large \u00e9ventail d&rsquo;outils et de biblioth\u00e8ques pour am\u00e9liorer ses fonctionnalit\u00e9s.<\/li>\n<li><strong>DOM virtuel :<\/strong> React utilise le DOM virtuel pour mettre \u00e0 jour l&rsquo;interface utilisateur en temps r\u00e9el. Cela signifie que lorsque l&rsquo;\u00e9tat change, il ne met \u00e0 jour que les composants qui ont besoin d&rsquo;\u00eatre modifi\u00e9s, plut\u00f4t que de rendre \u00e0 nouveau la page enti\u00e8re.<\/li>\n<li><strong>R\u00e9utilisation :<\/strong> React.js offre des composants r\u00e9utilisables qui peuvent \u00eatre utilis\u00e9s dans diff\u00e9rentes applications, ce qui r\u00e9duit consid\u00e9rablement le temps et les efforts de d\u00e9veloppement.<\/li>\n<\/ul>\n<h2>Comment cr\u00e9er un site WordPress headless avec React<\/h2>\n<p>Il est maintenant temps de mettre les mains dans le cambouis et d&rsquo;apprendre \u00e0 cr\u00e9er et \u00e0 d\u00e9ployer un site WordPress headless avec React.<\/p>\n<p>Continuez \u00e0 lire pour vous y plonger.<\/p>\n<h3>Pr\u00e9-requis<\/h3>\n<p>Avant de commencer ce tutoriel, assurez-vous d&rsquo;avoir :<\/p>\n<ul>\n<li>Une bonne compr\u00e9hension de React<\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">Node.js v14 ou sup\u00e9rieur install\u00e9<\/a> sur votre machine<\/li>\n<\/ul>\n<h3>\u00c9tape 1. Mise en place d&rsquo;un site web WordPress<\/h3>\n<p>Commen\u00e7ons par configurer le site web WordPress, qui servira de source de donn\u00e9es pour l&rsquo;application React. Si vous avez d\u00e9j\u00e0 un site web WordPress, vous pouvez sauter cette section ; sinon, suivez la proc\u00e9dure.<\/p>\n<p>Dans ce tutoriel, nous utiliserons DevKinsta, un environnement de d\u00e9veloppement local rapide et fiable largement utilis\u00e9 pour cr\u00e9er, d\u00e9velopper et d\u00e9ployer des sites WordPress. Son utilisation est enti\u00e8rement gratuite &#8211; il suffit de le <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/download\/\">t\u00e9l\u00e9charger depuis le site officiel<\/a> et de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/devkinsta\/premiers-pas-devkinsta\/installation\/\">installer sur votre syst\u00e8me<\/a>.<\/p>\n<p>Une fois l&rsquo;installation termin\u00e9e, ouvrez le tableau de bord DevKinsta et cliquez sur <strong>Nouveau site WordPress<\/strong> pour cr\u00e9er un nouveau site WordPress.<\/p>\n<p>Remplissez les champs requis et cliquez sur le bouton <strong>Cr\u00e9er un site<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_152847\" aria-describedby=\"caption-attachment-152847\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152847 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site-1024x681.png\" alt=\"Page de cr\u00e9ation du site DevKinsta\" width=\"1024\" height=\"681\"><\/a><figcaption id=\"caption-attachment-152847\" class=\"wp-caption-text\">Page de cr\u00e9ation du site DevKinsta<\/figcaption><\/figure>\n<p>Cela peut prendre quelques minutes, mais une fois que votre site est cr\u00e9\u00e9, vous pouvez y acc\u00e9der ainsi qu&rsquo;\u00e0 son panneau d&rsquo;administration en cliquant sur <strong>Ouvrir le site<\/strong> ou <strong>WP Admin<\/strong> respectivement.<\/p>\n<p>Ensuite, pour activer l&rsquo;API JSON, vous devrez mettre \u00e0 jour les permaliens de votre site web.<\/p>\n<p>Dans le <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord d&rsquo;administration de WordPress<\/a>, cliquez sur <strong>R\u00e9glages<\/strong>, puis sur <strong>Permaliens<\/strong>. Choisissez l&rsquo;option <strong>Nom de la publication<\/strong> et cliquez sur <strong>Enregistrer<\/strong>.<\/p>\n<figure id=\"attachment_152850\" aria-describedby=\"caption-attachment-152850\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152850 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings-1024x651.png\" alt=\"R\u00e9glages des Permaliens de WordPress\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152850\" class=\"wp-caption-text\">R\u00e9glages des Permaliens de WordPress<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement utiliser des outils tels que <a href=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Postman<\/a> pour tester et envoyer facilement des requ\u00eates aux REST API de WordPress.<\/p>\n<h3>\u00c9tape 2 : Mise en place d&rsquo;une application React<\/h3>\n<p>Maintenant que nous avons configur\u00e9 notre site WordPress, nous pouvons commencer \u00e0 travailler sur le frontend. Comme mentionn\u00e9 ci-dessus, dans ce tutoriel, nous utiliserons React pour le frontend de notre application.<\/p>\n<p>Pour commencer, ex\u00e9cutez le code ci-dessous dans votre terminal pour cr\u00e9er une application React.<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest my-blog-app \ncd my-blog-app \nnpm install<\/code><\/pre>\n<p>Les commandes ci-dessus cr\u00e9eront une application React et installeront les d\u00e9pendances n\u00e9cessaires.<\/p>\n<p>Nous devons \u00e9galement installer Axios, une biblioth\u00e8que JavaScript pour effectuer des requ\u00eates HTTP. Ex\u00e9cutez la commande ci-dessous pour l&rsquo;installer.<\/p>\n<pre><code class=\"language-bash\">npm install axios<\/code><\/pre>\n<p>Maintenant, afin de d\u00e9marrer le serveur de d\u00e9veloppement, vous pouvez lancer <code>npm run dev<\/code> dans le terminal. Le serveur devrait alors initialiser votre application \u00e0 l&rsquo;adresse <a href=\"http:\/\/127.0.0.1:5173\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/127.0.0.1:5173<\/a>.<\/p>\n<figure id=\"attachment_152848\" aria-describedby=\"caption-attachment-152848\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152848 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page-1024x651.png\" alt=\"Page de destination Vite + React\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152848\" class=\"wp-caption-text\">Page de destination Vite + React<\/figcaption><\/figure>\n<p>Ensuite, ouvrez votre projet dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteur de code<\/a> pr\u00e9f\u00e9r\u00e9 et supprimez tous les fichiers inutiles, tels que le dossier <strong>assets<\/strong>, <strong>index.css<\/strong> et <strong>app.css<\/strong>.<\/p>\n<p>Vous pouvez \u00e9galement remplacer le code \u00e0 l&rsquo;int\u00e9rieur de <strong>main.jsx<\/strong> et <strong>App.jsx<\/strong> par le code suivant :<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom\/client'\nimport App from '.\/App'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  &lt;React.StrictMode&gt;\n    &lt;App \/&gt;\n  &lt;\/React.StrictMode&gt;,\n)<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ App.jsx\n\nimport React from 'react'\n\nexport default function App() {\n  return (\n    &lt;App \/&gt;\n  )\n}<\/code><\/pre>\n<h3>\u00c9tape 3 : R\u00e9cup\u00e9rer les articles de WordPress<\/h3>\n<p>Il est maintenant temps de r\u00e9cup\u00e9rer les articles de notre site WordPress.<\/p>\n<p>Dans le fichier <strong>App.jsx<\/strong>, ajoutez l&rsquo;\u00e9tat ci-dessous et importez &lt;code&gt;useState&lt;\/code&gt; de React :<\/p>\n<pre><code class=\"language-javascript\">const [posts, setPosts] = useState([])<\/code><\/pre>\n<p><code>useState<\/code> est un <a href=\"https:\/\/kinsta.com\/fr\/blog\/utiliser-callback-react\/\">hook int\u00e9gr\u00e9 dans React<\/a> qui est utilis\u00e9 pour ajouter des \u00e9tats \u00e0 un composant, un \u00e9tat se r\u00e9f\u00e9rant \u00e0 des donn\u00e9es ou \u00e0 une propri\u00e9t\u00e9.<\/p>\n<p><code>posts<\/code> est utilis\u00e9 pour obtenir les donn\u00e9es de l&rsquo;\u00e9tat, et <code>setPosts<\/code> est utilis\u00e9 pour ajouter de nouvelles donn\u00e9es \u00e0 l&rsquo;affichage. Nous avons \u00e9galement pass\u00e9 un tableau vide \u00e0 l&rsquo;\u00e9tat par d\u00e9faut.<\/p>\n<p>Ensuite, ajoutez le code suivant apr\u00e8s l&rsquo;\u00e9tat pour r\u00e9cup\u00e9rer les articles depuis l&rsquo;API REST de WordPress :<\/p>\n<pre><code class=\"language-javascript\">const fetchPosts = () =&gt; {\n    \/\/ Using axios to fetch the posts\n    axios\n      .get(\"http:\/\/headless-wordpress-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        \/\/ Saving the data to state\n        setPosts(res.data);\n      });\n  }\n\n\n  \/\/ Calling the function on page load\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])<\/code><\/pre>\n<p>Le code ci-dessus ex\u00e9cute la fonction <code>fetchPosts()<\/code> au chargement de la page. Dans la fonction <code>fetchPosts()<\/code>, nous envoyons une requ\u00eate <code>GET<\/code> \u00e0 l&rsquo;API de WordPress en utilisant Axios pour r\u00e9cup\u00e9rer les articles et les sauvegarder dans l&rsquo;\u00e9tat que nous avons d\u00e9clar\u00e9 plus t\u00f4t.<\/p>\n<h3>\u00c9tape 4 : Cr\u00e9ation d&rsquo;un composant de blog<\/h3>\n<p>Dans le r\u00e9pertoire racine, cr\u00e9ez un nouveau dossier nomm\u00e9 <strong>components<\/strong>, et \u00e0 l&rsquo;int\u00e9rieur de celui-ci, cr\u00e9ez deux nouveaux fichiers : <strong>blog.jsx<\/strong> et <strong>blog.css<\/strong>.<\/p>\n<p>Tout d&rsquo;abord, ajoutez le code suivant au fichier<strong> blog.jsx <\/strong>:<\/p>\n<pre><code class=\"language-javascript\">import axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\nimport \".\/blog.css\";\n\nexport default function Blog({ post }) {\n  const [featuredImage, setFeaturedimage] = useState();\n\n  const getImage = () =&gt; {\n    axios\n     .get(post?._links[\"wp:featuredmedia\"][0]?.href)\n     .then((response) =&gt; {\n      setFeaturedimage(response.data.source_url);\n    });\n  };\n\n  useEffect(() =&gt; {\n    getImage();\n  }, []);\n\n  return (\n    &lt;div class=\"container\"&gt;\n      &lt;div class=\"blog-container\"&gt;\n        &lt;p className=\"blog-date\"&gt;\n          {new Date(Date.now()).toLocaleDateString(\"en-US\", {\n            day: \"numeric\",\n            month: \"long\",\n            year: \"numeric\",\n          })}\n        &lt;\/p&gt;\n        &lt;h2 className=\"blog-title\"&gt;{post.title.rendered}&lt;\/h2&gt;\n        &lt;p\n          className=\"blog-excerpt\"\n          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n        \/&gt;\n        &lt;img src={featuredImage} class=\"mask\" \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<p>Dans le code ci-dessus, nous avons cr\u00e9\u00e9 un composant de carte qui prend la propri\u00e9t\u00e9 <code>posts<\/code> qui contient les informations sur l&rsquo;article de blog \u00e0 partir de l&rsquo;API de WordPress.<\/p>\n<p>Dans la fonction <code>getImage()<\/code>, nous utilisons Axios pour r\u00e9cup\u00e9rer l&rsquo;URL de l&rsquo;image mise en avant et enregistrer cette information dans l&rsquo;\u00e9tat.<\/p>\n<p>Ensuite, nous avons ajout\u00e9 un hook <code>useEffect<\/code> pour appeler la fonction <code>getImage()<\/code> une fois que le composant est mont\u00e9. Nous avons \u00e9galement ajout\u00e9 l&rsquo;instruction de retour dans laquelle nous rendons les donn\u00e9es de l&rsquo;article, le titre, l&rsquo;extrait et l&rsquo;image.<\/p>\n<p>Ensuite, ajoutez les styles ci-dessous au fichier <strong>blog.css <\/strong>:<\/p>\n<pre><code class=\"language-css\">@import url(\"https:\/\/fonts.googleapis.com\/css?family=Poppins\");\n\n.blog-container {\n  width: 400px;\n  height: 322px;\n  background: white;\n  border-radius: 10px;\n  box-shadow: 0px 20px 50px #d9dbdf;\n  -webkit-transition: all 0.3s ease;\n  -o-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n\nimg {\n  width: 400px;\n  height: 210px;\n  object-fit: cover;\n  overflow: hidden;\n  z-index: 999;\n  border-bottom-left-radius: 10px;\n  border-bottom-right-radius: 10px;\n}\n\n.blog-title {\n  margin: auto;\n  text-align: left;\n  padding-left: 22px;\n  font-family: \"Poppins\";\n  font-size: 22px;\n}\n\n.blog-date {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #c8c8c8;\n  line-height: 18px;\n  padding-top: 10px;\n}\n\n.blog-excerpt {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #8a8a8a;\n  line-height: 18px;\n  margin-bottom: 13px;\n}<\/code><\/pre>\n<p>Ensuite, dans le fichier App.jsx, ajoutez le code suivant dans l&rsquo;instruction <code>return<\/code> pour rendre le composant blog :<\/p>\n<pre><code class=\"language-javascript\">&lt;div&gt;\n\t{posts.map((item) =&gt; (\n\t\t&lt;Blog post={item} \/&gt;\n\t))}\n&lt;\/div&gt;;<\/code><\/pre>\n<p>Enfin, voici \u00e0 quoi devrait ressembler votre App.jsx :<\/p>\n<pre><code class=\"language-javascript\">import React, { useEffect, useState } from 'react'\nimport axios from \"axios\"\nimport Blog from '.\/components\/Blog';\n\nexport default function App() {\n  const [posts, setPosts] = useState([]);\n\n  const fetchPosts = () =&gt; {\n    axios\n      .get(\"http:\/\/my-awesome-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        setPosts(res.data);\n      });\n  }\n\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])\n\n  return (\n    &lt;div&gt;\n      {posts.map((item) =&gt; (\n        &lt;Blog\n          post={item}\n        \/&gt;\n      ))}\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n<p>Sauvegardez le fichier et rafra\u00eechissez l&rsquo;onglet de votre navigateur. Vous devriez maintenant voir vos articles de blog s&rsquo;afficher sur la page.<\/p>\n<figure id=\"attachment_152849\" aria-describedby=\"caption-attachment-152849\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152849 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_-1024x654.png\" alt=\"WordPress headless avec React.js\" width=\"1024\" height=\"654\"><\/a><figcaption id=\"caption-attachment-152849\" class=\"wp-caption-text\">WordPress headless avec React.js<\/figcaption><\/figure>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>WordPress headless offre un excellent moyen de cr\u00e9er des sites web rapides et performants avec une architecture \u00e9volutive. Avec l&rsquo;utilisation de React et de la REST API de WordPress, il est plus facile que jamais de cr\u00e9er des sites web dynamiques et interactifs avec WordPress comme syst\u00e8me de gestion de contenu.<\/p>\n<p>L&rsquo;endroit o\u00f9 vous h\u00e9bergez votre site WordPress est tout aussi important pour la rapidit\u00e9. Kinsta est id\u00e9alement plac\u00e9 pour fournir une <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">exp\u00e9rience d&rsquo;h\u00e9bergement WordPress<\/a> rapide comme l&rsquo;\u00e9clair avec des machines Google C2 haut de gamme sur leur <a href=\"https:\/\/kinsta.com\/fr\/blog\/plateforme-cloud-pour-developpeurs\/\">r\u00e9seau Premium Tier<\/a>, ainsi qu&rsquo;une <a href=\"https:\/\/kinsta.com\/fr\/integration-cloudflare\/\">int\u00e9gration Cloudflare<\/a> pour prot\u00e9ger votre site contre la perte de donn\u00e9es et les attaques malveillantes.<\/p>\n<p><em>Avez-vous construit &#8211; ou pr\u00e9voyez-vous de construire &#8211; un site WordPress headless avec React ? Faites-nous en part dans la section des commentaires ci-dessous !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress est l&rsquo;un des syst\u00e8mes de gestion de contenu (Content Management System) les plus populaires, utilis\u00e9 par 810 millions de personnes, soit 41 % de l&rsquo;ensemble &#8230;<\/p>\n","protected":false},"author":256,"featured_media":69460,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[535,341,47],"topic":[973,1028,1020,1004],"class_list":["post-69459","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-web-development","tag-webdev","topic-headless-cms","topic-developpement-wordpress","topic-outils-developpement-web","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er un site WordPress headless avec React.js ? - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er un site WordPress Headless avec React.js\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T06:55:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-08T15:05:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Suhail Kakar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suhail Kakar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\"},\"author\":{\"name\":\"Suhail Kakar\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\"},\"headline\":\"Comment cr\u00e9er un site WordPress Headless avec React.js\",\"datePublished\":\"2023-05-26T06:55:54+00:00\",\"dateModified\":\"2025-09-08T15:05:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\"},\"wordCount\":2417,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg\",\"keywords\":[\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\",\"name\":\"Comment cr\u00e9er un site WordPress headless avec React.js ? - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg\",\"datePublished\":\"2023-05-26T06:55:54+00:00\",\"dateModified\":\"2025-09-08T15:05:48+00:00\",\"description\":\"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Headless\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er un site WordPress Headless avec React.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\",\"name\":\"Suhail Kakar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"caption\":\"Suhail Kakar\"},\"description\":\"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/suhailkakar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er un site WordPress headless avec React.js ? - Kinsta\u00ae","description":"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un site WordPress Headless avec React.js","og_description":"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.","og_url":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-05-26T06:55:54+00:00","article_modified_time":"2025-09-08T15:05:48+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg","type":"image\/jpeg"}],"author":"Suhail Kakar","twitter_card":"summary_large_image","twitter_description":"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Suhail Kakar","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/"},"author":{"name":"Suhail Kakar","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b"},"headline":"Comment cr\u00e9er un site WordPress Headless avec React.js","datePublished":"2023-05-26T06:55:54+00:00","dateModified":"2025-09-08T15:05:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/"},"wordCount":2417,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg","keywords":["JavaScript","web development","webdev"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/","name":"Comment cr\u00e9er un site WordPress headless avec React.js ? - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg","datePublished":"2023-05-26T06:55:54+00:00","dateModified":"2025-09-08T15:05:48+00:00","description":"D\u00e9couvrez comment cr\u00e9er un site web en utilisant React.js et Wordpress headless gr\u00e2ce \u00e0 notre guide pas \u00e0 pas sur le fonctionnement des CMS headless.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"CMS Headless","item":"https:\/\/kinsta.com\/fr\/sujets\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er un site WordPress Headless avec React.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b","name":"Suhail Kakar","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","caption":"Suhail Kakar"},"description":"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/suhailkakar\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=69459"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69459\/revisions"}],"predecessor-version":[{"id":80772,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69459\/revisions\/80772"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69459\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/69460"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=69459"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=69459"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=69459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}