{"id":71744,"date":"2023-08-07T17:15:25","date_gmt":"2023-08-07T16:15:25","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=71744&#038;preview=true&#038;preview_id=71744"},"modified":"2023-08-22T14:30:44","modified_gmt":"2023-08-22T13:30:44","slug":"cloner-site-api-kinsta-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/","title":{"rendered":"Comment cloner un site WordPress en utilisant l&rsquo;API Kinsta et React"},"content":{"rendered":"<p>Vous n&rsquo;avez pas besoin de g\u00e9rer un grand nombre des 800 millions de <a href=\"https:\/\/kinsta.com\/wordpress\/\">sites WordPress<\/a> pr\u00e9sents sur le web avant de chercher des moyens de lancer de nouveaux sites de mani\u00e8re efficace.<\/p>\n<p>Cloner une configuration WordPress existante est un moyen d&rsquo;\u00eatre rapidement op\u00e9rationnel, et les clients du service d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergement WordPress infog\u00e9r\u00e9<\/a> de Kinsta savent qu&rsquo;il est facile de le faire \u00e0 partir de notre <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">tableau de bord MyKinsta<\/a> convivial.<\/p>\n<p>De plus, vous pouvez cloner des sites WordPress \u00e0 grande \u00e9chelle en utilisant vos technologies de d\u00e9veloppement d&rsquo;applications pr\u00e9f\u00e9r\u00e9es et l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/api-kinsta\/\">API de Kinsta<\/a>. Dans ce tutoriel, nous utilisons cette API et <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a>, l&rsquo;une des nombreuses <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">biblioth\u00e8ques JavaScript<\/a> populaires, pour montrer comment cela fonctionne.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Ce que vous construisez<\/h2>\n<p>Voici le sc\u00e9nario : Vous \u00eates une agence de d\u00e9veloppement WordPress avec un ou plusieurs sites qui peuvent \u00eatre utilis\u00e9s comme mod\u00e8les de d\u00e9part. L&rsquo;application React pour le clonage de sites WordPress que nous construisons ressemble \u00e0 ceci :<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/clone-wp-site-demo.gif\" alt=\"Application React pour cloner un site avec l'API Kinsta.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Application React pour cloner un site avec l&rsquo;API Kinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vous \u00eates press\u00e9 ? Tout le code ci-dessous est disponible dans <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">ce mod\u00e8le GitHub<\/a>. Utilisez-le pour cr\u00e9er votre propre d\u00e9p\u00f4t et d\u00e9ployer via <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">MyKinsta<\/a>, en ajoutant votre propre identifiant d&rsquo;entreprise et votre cl\u00e9 API comme variables d&rsquo;environnement. (Consultez le <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/blob\/main\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">fichier Readme.md<\/a> pour les instructions)<\/p>\n<\/aside>\n\n<h3>Pr\u00e9-requis<\/h3>\n<p>Pour suivre ce tutoriel, vous aurez besoin d&rsquo;une compr\u00e9hension de base de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> et <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> et d&rsquo;une certaine familiarit\u00e9 avec React. Vous aurez \u00e9galement besoin de Node.js et de npm (le <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">gestionnaire de paquets Node<\/a>) ou de yarn install\u00e9s sur votre ordinateur. Ce projet se concentre sur la construction d&rsquo;une application de clonage WordPress \u00e0 l&rsquo;aide de React et de l&rsquo;API Kinsta plut\u00f4t que sur les d\u00e9tails de la cr\u00e9ation et du style de l&rsquo;interface utilisateur.<br \/>\n<\/p>\n<h2>Configuration de l&rsquo;environnement de d\u00e9veloppement<\/h2>\n<p>Vous pouvez cr\u00e9er une application React \u00e0 partir de z\u00e9ro et d\u00e9velopper votre propre interface, ou vous pouvez utiliser le mod\u00e8le de d\u00e9marrage <a href=\"https:\/\/kinsta.com\/fr\/sujets\/git\/\">Git<\/a> mentionn\u00e9 ci-dessus en suivant les \u00e9tapes suivantes :<\/p>\n<ol start=\"1\">\n<li>Visitez le <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9p\u00f4t GitHub<\/a> de ce projet.<\/li>\n<li>S\u00e9lectionnez <strong>Utiliser ce mod\u00e8le<\/strong> &gt; <strong>Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong> pour copier le code de d\u00e9marrage dans un d\u00e9p\u00f4t de votre compte GitHub. (Cochez la case pour <strong>inclure toutes les branches<\/strong>)<\/li>\n<li>T\u00e9l\u00e9chargez le d\u00e9p\u00f4t sur votre ordinateur local et passez \u00e0 la branche <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a> \u00e0 l&rsquo;aide de la commande : <code>git checkout starter-files<\/code><\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Installez les d\u00e9pendances n\u00e9cessaires en ex\u00e9cutant la commande <code>npm install<\/code><\/li>\n<\/ol>\n<p>Une fois l&rsquo;installation termin\u00e9e, vous pouvez lancer le projet sur votre ordinateur local \u00e0 l&rsquo;aide de la commande <code>npm run start<\/code>. Le projet s&rsquo;ouvre alors \u00e0 l&rsquo;adresse <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h3>Comprendre les fichiers du projet<\/h3>\n<p>Le dossier <strong>src <\/strong>est le c\u0153ur d&rsquo;une application React, car il contient le JavaScript n\u00e9cessaire \u00e0 webpack. Dans ce dossier se trouve <strong>App.js,<\/strong> o\u00f9 sont configur\u00e9es les deux routes de ce projet.<\/p>\n<p>Dans le dossier <strong>src<\/strong> se trouvent les sous-dossiers <strong>components<\/strong> et <strong>pages<\/strong>. Le dossier components contient des composants r\u00e9utilisables, tels que <strong>Header.jsx<\/strong> et <strong>Footer.jsx<\/strong>, utilis\u00e9s dans les pages <strong>Home.jsx<\/strong> et <strong>Operations.jsx <\/strong>.<\/p>\n<p>Vous vous concentrez ici sur l&rsquo;impl\u00e9mentation de la logique dans <strong>Home.jsx<\/strong> et <strong>Operations.jsx<\/strong>, puisque le style et le routage peuvent \u00eatre trouv\u00e9s dans nos fichiers de d\u00e9marrage GitHub.<\/p>\n<p><strong>Home.jsx<\/strong> a un formulaire avec deux champs : le nom du site que vous cr\u00e9ez et un champ de s\u00e9lection qui liste les sites WordPress trouv\u00e9s dans votre compte MyKinsta (cette liste est r\u00e9cup\u00e9r\u00e9e via l&rsquo;API Kinsta).<\/p>\n<p>Lorsque vous cliquez sur le bouton de soumission du formulaire (<strong>Cloner le site<\/strong>), un objet contenant la propri\u00e9t\u00e9 <code>operation_id<\/code> est renvoy\u00e9. Cet identifiant et ce nom d&rsquo;affichage seront transmis comme param\u00e8tres de route \u00e0 <strong>Operations.jsx<\/strong>, o\u00f9 l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration de clonage est signal\u00e9. L&rsquo;interface comprendra \u00e9galement des liens permettant d&rsquo;acc\u00e9der \u00e0 l&rsquo;interface d&rsquo;administration de WordPress et \u00e0 la page d&rsquo;accueil du site.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/operations-page.jpg\" alt=\"Page des op\u00e9rations affichant les liens vers l'administrateur WP et le site.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Page des op\u00e9rations affichant les liens vers l&rsquo;administrateur WP et le site.<\/figcaption><\/figure>\n<h2>Utilisation de l&rsquo;API Kinsta pour cloner un site WordPress<\/h2>\n<p>Dans <strong>Home.jsx<\/strong>, trois requ\u00eates API seront faites \u00e0 <a href=\"https:\/\/api-docs.kinsta.com\/\">l&rsquo;API Kinsta<\/a>. La premi\u00e8re requ\u00eate vise \u00e0 obtenir une liste de sites sur votre compte Kinsta. Cette liste sera stock\u00e9e dans un \u00e9tat, puis it\u00e9r\u00e9e dans le champ de s\u00e9lection. Cette requ\u00eate sera effectu\u00e9e imm\u00e9diatement apr\u00e8s le rendu de la page \u00e0 l&rsquo;aide du <a href=\"https:\/\/kinsta.com\/fr\/blog\/react-useeffect\/\">crochet useEffect<\/a>.<\/p>\n<p>Les deuxi\u00e8me et troisi\u00e8me requ\u00eates sont effectu\u00e9es une fois que vous avez cliqu\u00e9 sur le bouton <strong>Cloner le site<\/strong>. La deuxi\u00e8me requ\u00eate obtient l&rsquo;identifiant de l&rsquo;environnement du site que vous souhaitez cloner. La troisi\u00e8me demande utilise cet identifiant d&rsquo;environnement et le nom d&rsquo;affichage du site pour lancer le clonage du site.<\/p>\n<h3>Interagir avec l&rsquo;API Kinsta dans React<\/h3>\n<p>Dans ce tutoriel, vous interagissez avec deux points de terminaison de l&rsquo;API Kinsta :<\/p>\n<ul>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>: Le premier peut renvoyer une liste de tous les sites, demander un ID d&rsquo;environnement de site et enfin cloner un site existant.<\/li>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>: Ce point est utilis\u00e9 pour obtenir le statut de l&rsquo;op\u00e9ration. Par exemple, lorsque l&rsquo;op\u00e9ration de clonage de site est en cours, vous pouvez utiliser ce point de terminaison pour suivre de mani\u00e8re programmatique l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration et d\u00e9terminer quand elle est termin\u00e9e.<\/li>\n<\/ul>\n<p>Pour interagir avec l&rsquo;API Kinsta, vous avez besoin de l&rsquo;<strong>ID de votre entreprise<\/strong> (que vous trouverez dans MyKinsta sous <strong>Entreprise<\/strong> &gt; <strong>D\u00e9tails de facturation<\/strong> &gt; <strong>ID de l&rsquo;entreprise<\/strong>) et d&rsquo;une <strong>cl\u00e9 API<\/strong>. Voici comment <a href=\"https:\/\/kinsta.com\/fr\/blog\/cle-api-kinsta\/#how-to-create-an-api-key\">cr\u00e9er une cl\u00e9 API Kinsta<\/a>.<\/p>\n<p>Une fois que vous avez ces informations d&rsquo;identification, il est pr\u00e9f\u00e9rable de les stocker en toute s\u00e9curit\u00e9 en tant que variables d&rsquo;environnement dans votre application React. Pour configurer les variables d&rsquo;environnement, cr\u00e9ez un fichier <strong>.env<\/strong> dans le dossier racine de votre projet. Dans ce fichier, ajoutez les lignes suivantes :<\/p>\n<pre><code class=\"language-bash\">REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' \nREACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'<\/code><\/pre>\n<p>Pour acc\u00e9der \u00e0 ces variables d&rsquo;environnement dans votre projet, vous pouvez utiliser la syntaxe <code>process.env.THE_VARIABLE<\/code>. Par exemple, pour acc\u00e9der \u00e0 <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, vous devez utiliser <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Il est important d&rsquo;ajouter le fichier <strong>.env<\/strong> \u00e0 votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/gitignore-ne-fonctionne-pas\/\">fichier .gitignore<\/a> pour \u00e9viter qu&rsquo;il ne soit pouss\u00e9 sur GitHub. Cela permet de garantir la confidentialit\u00e9 de vos informations sensibles, telles que les cl\u00e9s d&rsquo;API.<\/p>\n<\/aside>\n\n<h3>Cloner un site existant avec l&rsquo;API Kinsta<\/h3>\n<p>Commen\u00e7ons par r\u00e9cup\u00e9rer la liste de tous les sites lors du rendu de <strong>Home.jsx<\/strong> en utilisant le hook useEffect et en les stockant dans un \u00e9tat. Pour ce faire, importez les hooks useEffect et <a href=\"https:\/\/kinsta.com\/fr\/blog\/usestate-react\/\">useState<\/a> et cr\u00e9ez un \u00e9tat pour stocker le tableau des sites qui seront r\u00e9cup\u00e9r\u00e9s :<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\nconst [sites, setSites] = useState([]);<\/code><\/pre>\n<p>Ensuite, utilisez le hook useEffect pour interroger l&rsquo;API Kinsta \u00e0 l&rsquo;aide de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/requetes-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>. Tout d&rsquo;abord, cr\u00e9ez deux variables constantes pour stocker les en-t\u00eates et l&rsquo;URL de l&rsquo;API Kinsta. Cela permet d&rsquo;\u00e9viter les r\u00e9p\u00e9titions puisque vous enverrez plus d&rsquo;une requ\u00eate \u00e0 l&rsquo;API Kinsta sur cette page :<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);<\/code><\/pre>\n<p>Dans le code ci-dessus, le hook <a href=\"https:\/\/kinsta.com\/fr\/blog\/utiliser-callback-react\/#reacts-usecallback-vs-usememo\">useMemo<\/a> m\u00e9morise l&rsquo;objet headers de sorte qu&rsquo;il n&rsquo;a pas besoin d&rsquo;\u00eatre r\u00e9\u00e9valu\u00e9 \u00e0 chaque rendu puisque sa valeur est constante. Vous pouvez maintenant cr\u00e9er la requ\u00eate API :<\/p>\n<pre><code class=\"language-jsx\">useEffect(() =&gt; {\n    const fetchAllSites = async () =&gt; {\n        const query = new URLSearchParams({\n            company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n        }).toString();\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites?${query}`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        setSites(data.company.sites);\n    };\n    fetchAllSites();\n}, [headers]);<\/code><\/pre>\n<p>Dans le code ci-dessus, une fonction asynchrone <code>fetchAllSites<\/code> est cr\u00e9\u00e9e. Dans cette fonction, vous d\u00e9finissez d&rsquo;abord le param\u00e8tre <code>query<\/code> (l&rsquo;ID de votre entreprise) r\u00e9cup\u00e9r\u00e9 dans votre fichier <strong>.env<\/strong>. Ensuite, vous faites une demande GET au point de terminaison <code>\/sites<\/code> de l&rsquo;API Kinsta en utilisant le param\u00e8tre <code>query<\/code>. La r\u00e9ponse est alors stock\u00e9e dans l&rsquo;\u00e9tat <code>sites<\/code> que vous avez cr\u00e9\u00e9 pr\u00e9c\u00e9demment. Enfin, vous appelez <code>fetchAllSites<\/code> pour lancer le processus de r\u00e9cup\u00e9ration.<\/p>\n<p>Int\u00e9grons maintenant les valeurs stock\u00e9es dans l&rsquo;\u00e9tat <code>sites<\/code> en les parcourant en boucle pour remplir le champ de s\u00e9lection. Le nom affich\u00e9 sera montr\u00e9 \u00e0 l&rsquo;utilisateur, tandis que l&rsquo;ID du site sera utilis\u00e9 comme valeur de l&rsquo;option. Ainsi, lorsque le formulaire est soumis, l&rsquo;ID du site s\u00e9lectionn\u00e9 peut \u00eatre utilis\u00e9 pour demander des d\u00e9tails sur l&rsquo;environnement :<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Select a site&lt;\/label&gt;\n    &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n    &lt;select className=\"form-control\"&gt;\n        &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n        {sites && (\n            sites.map((site) =&gt; {\n                return (\n                    &lt;option&gt; key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                )\n            })\n        )}\n    &lt;\/select&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Passons maintenant \u00e0 la gestion de l&rsquo;envoi du formulaire et \u00e0 l&rsquo;extraction des valeurs du formulaire. Pour ce faire, vous devez cr\u00e9er des variables d&rsquo;\u00e9tat pour chaque champ de saisie :<\/p>\n<pre><code class=\"language-jsx\">const [selectedSiteId, setSelectedSiteId] = useState('');\nconst [displayName, setDisplayName] = useState('');<\/code><\/pre>\n<p>Ensuite, liez les champs du formulaire \u00e0 leurs valeurs d&rsquo;\u00e9tat respectives en ajoutant les attributs <code>value<\/code> et <code>onChange<\/code> \u00e0 chaque \u00e9l\u00e9ment de saisie. Voici \u00e0 quoi ressemblera le formulaire :<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt;\n    &lt;div className=\"form-container\"&gt;\n        &lt;div className=\"input-div\"&gt;\n            &lt;label&gt;Display name&lt;\/label&gt;\n            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n            &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"input-div\"&gt;\n            &lt;label&gt;Select a site&lt;\/label&gt;\n            &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n            &lt;select className=\"form-control\" value={selectedSiteId} onChange={(e) =&gt; setSelectedSiteId(e.target.value)}&gt;\n                &lt;option value=\"\"&gt;&lt;\/option&gt;\n                {sites && (\n                    sites.map((site) =&gt; {\n                        return (\n                            &lt;option key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                        )\n                    })\n                )}\n            &lt;\/select&gt;\n        &lt;\/div&gt;\n        &lt;button className='btn'&gt;Clone Site&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Dans le code ci-dessus, l&rsquo;attribut value de chaque \u00e9l\u00e9ment de saisie est d\u00e9fini sur la variable d&rsquo;\u00e9tat correspondante, et l&rsquo;attribut <code>onChange<\/code> est utilis\u00e9 pour mettre \u00e0 jour la valeur d&rsquo;\u00e9tat lorsque l&rsquo;utilisateur interagit avec les champs de saisie.<\/p>\n<p>Pour g\u00e9rer l&rsquo;envoi du formulaire, attachez une m\u00e9thode <code>onSubmit<\/code> \u00e0 l&rsquo;\u00e9l\u00e9ment de formulaire. Par exemple, vous pouvez attacher une m\u00e9thode \u00e0 l&rsquo;\u00e9l\u00e9ment de formulaire :<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt; onSubmit={handleSubmission}&gt;\n    {\/* form details *\/}\n&lt;\/form&gt;<\/code><\/pre>\n<p>D\u00e9finissez la m\u00e9thode <code>handleSubmission<\/code>, qui consiste \u00e0 effectuer deux requ\u00eates \u00e0 l&rsquo;API de Kinsta. La premi\u00e8re requ\u00eate r\u00e9cup\u00e8re l&rsquo;ID de l&rsquo;environnement du site \u00e0 cloner, et la seconde ex\u00e9cute l&rsquo;op\u00e9ration de clonage.<\/p>\n<p>Commen\u00e7ons par r\u00e9cup\u00e9rer l&rsquo;ID de l&rsquo;environnement. Dans la m\u00e9thode <code>handleSubmission<\/code>, cr\u00e9ez une fonction asynchrone pour g\u00e9rer cette requ\u00eate. La fonction enverra une requ\u00eate GET au point de terminaison <code>\/sites<\/code>, en ajoutant l&rsquo;ID du site s\u00e9lectionn\u00e9, suivi du param\u00e8tre <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/getSiteEnvironments\" target=\"_blank\" rel=\"noopener noreferrer\">\/environments<\/a><\/code> du point de terminaison :<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n    const fetchEnvironmentId = async (siteId) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/${siteId}\/environments`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        let envId = data.site.environments[0].id;\n        return envId;\n    }\n    let environmentId = await fetchEnvironmentId(selectedSiteId);\n}<\/code><\/pre>\n<p>Ci-dessus, <code>fetchEnvironmentId<\/code> est une fonction asynchrone qui envoie une requ\u00eate GET \u00e0 l&rsquo;API Kinsta. Elle r\u00e9cup\u00e8re les environnements du site s\u00e9lectionn\u00e9 et extrait l&rsquo;identifiant de l&rsquo;environnement de la r\u00e9ponse. L&rsquo;identifiant de l&rsquo;environnement est stock\u00e9 dans la variable <code>envId<\/code>, puis renvoy\u00e9. Lors de l&rsquo;appel de la fonction, nous assignons sa valeur de retour \u00e0 la variable <code>envId<\/code>.<br \/>\n<br \/>\n\u00c0 ce stade, vous pouvez cloner un site existant avec l&rsquo;API de Kinsta car vous disposez des informations essentielles sur le site source : l&rsquo;identifiant de l&rsquo;entreprise, le nom d&rsquo;affichage et l&rsquo;identifiant de l&rsquo;environnement.<\/p>\n<p>Dans la m\u00e9thode <code>handleSubmission<\/code>, cr\u00e9ez une fonction appel\u00e9e <code>cloneExistingSite<\/code> pour g\u00e9rer cette requ\u00eate API. Cette requ\u00eate sera adress\u00e9e au point de terminaison <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/cloneWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites\/clone<\/a><\/code> . Contrairement aux requ\u00eates pr\u00e9c\u00e9dentes, les en-t\u00eates de cette requ\u00eate sont diff\u00e9rents car vous devez sp\u00e9cifier <code>Content-Type<\/code> en tant que <code>application\/json<\/code>. En outre, il s&rsquo;agit d&rsquo;une requ\u00eate POST, vous devez donc inclure un corps de requ\u00eate contenant la charge utile que vous souhaitez envoyer \u00e0 l&rsquo;API. Voici comment la requ\u00eate sera structur\u00e9e :<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n\n    \/\/ fetch environment Id\n\n    const cloneExistingSite = async (env_Id) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/clone`,\n            {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                    Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n                },\n                body: JSON.stringify({\n                    company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                    display_name: displayName,\n                    source_env_id: env_Id,\n                })\n            }\n        );\n        const data = await resp.json();\n        navigate(`\/operations\/${displayName}\/${data.operation_id}`)\n        console.log(data);\n    }\n    cloneExistingSite(environmentId);\n}<\/code><\/pre>\n<p>Dans ce code, la requ\u00eate <code>body<\/code> est construite \u00e0 l&rsquo;aide de <code>JSON.stringify()<\/code> pour convertir l&rsquo;objet payload en une cha\u00eene JSON. La r\u00e9ponse est ensuite stock\u00e9e dans la variable data. En utilisant la m\u00e9thode <code>useNavigate<\/code> de la biblioth\u00e8que <code>react-router-dom<\/code>, les donn\u00e9es <code>displayName<\/code> et <code>operation_id<\/code> sont transmises en tant que param\u00e8tres de la route. Veillez \u00e0 importer la m\u00e9thode <code>useNaviagte<\/code> et \u00e0 l&rsquo;instancier :<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the required method \nimport { useNavigate } from 'react-router-dom'; \n\n\/\/ Instantiate the useNavigate method \nconst navigate = useNavigate();<\/code><\/pre>\n<p>Maintenant, lorsque vous remplissez le formulaire et cliquez sur le bouton <strong>Cloner le site<\/strong>, un nouveau site commencera le processus de clonage, qui sera visible dans votre tableau de bord MyKinsta. Cependant, nous voulons suivre l&rsquo;op\u00e9ration de clonage de site de mani\u00e8re programmatique dans l&rsquo;interface utilisateur personnalis\u00e9e. Vous g\u00e9rez cela dans <strong>Operations.jsx <\/strong>en utilisant les donn\u00e9es envoy\u00e9es par la route.<\/p>\n<h3>Mise en \u0153uvre de la v\u00e9rification de l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration avec l&rsquo;API Kinsta<\/h3>\n<p>Dans <strong>Operations.jsx<\/strong>, r\u00e9cup\u00e9rez l&rsquo;identifiant de l&rsquo;op\u00e9ration \u00e0 partir de la route en utilisant la m\u00e9thode <code>useParams<\/code> de <code>react-router-dom<\/code>. Cet identifiant sera utilis\u00e9 pour effectuer une requ\u00eate API chaque fois que vous cliquerez sur le bouton <strong>V\u00e9rifier l&rsquo;\u00e9tat du site<\/strong>.<\/p>\n<p>Tout d&rsquo;abord, importez la m\u00e9thode <code>useParams<\/code> et utilisez-la pour instancier les variables <code>displayName<\/code> et <code>operationId<\/code>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the useParams library\nimport { useParams } from 'react-router-dom';\n\n\/\/ Instantiate the paramters\nconst { displayName, operationId } = useParams();<\/code><\/pre>\n<p>Ensuite, cr\u00e9ez un \u00e9tat pour stocker l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration lorsque la requ\u00eate est effectu\u00e9e :<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress.\" });<\/code><\/pre>\n<p>Dans le code ci-dessus, l&rsquo;\u00e9tat est initialis\u00e9 avec un message par d\u00e9faut, qui sera affich\u00e9 jusqu&rsquo;\u00e0 ce que vous cliquiez sur le bouton <strong>V\u00e9rifier l&rsquo;\u00e9tat du<\/strong> <strong>site<\/strong>. Ajoutez un \u00e9v\u00e8nement <code>onClick<\/code> au bouton <strong>V\u00e9rifier l&rsquo;\u00e9tat du site<\/strong> et appelez la m\u00e9thode <code>checkOperation<\/code> lorsque vous cliquez sur le bouton :<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;<\/code><\/pre>\n<p>Cr\u00e9ez maintenant la fonction <code>checkOperation<\/code> pour effectuer la demande d&rsquo;op\u00e9ration aupr\u00e8s de l&rsquo;API Kinsta. Stockez les constantes <code>headers<\/code> et <code>KinstaAPIUrl<\/code> dans des variables, puis utilisez-les dans la requ\u00eate API :<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);\n\nconst checkOperation = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n};<\/code><\/pre>\n<p>Dans le code ci-dessus, une requ\u00eate GET est envoy\u00e9e au point de terminaison <code>\/operations<\/code> avec l&rsquo;ID de l&rsquo;op\u00e9ration, et la r\u00e9ponse est stock\u00e9e dans l&rsquo;\u00e9tat <code>operationData<\/code>. Vous pouvez maintenant utiliser les donn\u00e9es dans le balisage :<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"services\"&gt;\n    &lt;div className=\"details\"&gt;\n        &lt;p&gt;{operationData.message}..&lt;\/p&gt;\n        &lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Enfin, les donn\u00e9es <code>displayName<\/code> transmises par la route seront utilis\u00e9es pour construire l&rsquo;URL du nouveau site et l&rsquo;URL d&rsquo;administration de WordPress. Les deux liens s&rsquo;ouvriront dans un nouvel onglet.<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"details\"&gt;\n    &lt;a href={`http:\/\/${displayName}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n        &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n        &lt;FiExternalLink \/&gt;\n    &lt;\/a&gt;\n    &lt;a href={`http:\/\/${displayName}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n        &lt;p&gt;Open URL&lt;\/p&gt;\n        &lt;FiExternalLink \/&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Avec ces changements, <strong>Operations.jsx<\/strong> r\u00e9cup\u00e9rera l&rsquo;ID de l&rsquo;op\u00e9ration \u00e0 partir de la route, effectuera une requ\u00eate API lorsque le bouton est cliqu\u00e9, affichera le statut de l&rsquo;op\u00e9ration et fournira des liens vers l&rsquo;administrateur WordPress et l&rsquo;URL du site sur la base des donn\u00e9es <code>displayName<\/code>.<\/p>\n<h2>D\u00e9ployer votre application sur Kinsta<\/h2>\n<p>Pour d\u00e9ployer votre application sur la plateforme d&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a> de Kinsta, vous devez pousser le projet vers votre <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">fournisseur Git pr\u00e9f\u00e9r\u00e9<\/a>. Lorsque votre projet est h\u00e9berg\u00e9 sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/base-de-connaissances-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/gitlab-vs-github\/\">GitLab<\/a> ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>, vous pouvez proc\u00e9der au d\u00e9ploiement vers Kinsta.<\/p>\n<p>Pour d\u00e9ployer votre d\u00e9p\u00f4t sur Kinsta, suivez les \u00e9tapes suivantes :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez votre compte Kinsta sur le tableau de bord MyKinsta.<\/li>\n<li>Dans la colonne lat\u00e9rale de gauche, cliquez sur <strong>Applications<\/strong>, puis sur <strong>Ajouter un service<\/strong>.<\/li>\n<li>S\u00e9lectionnez <strong>Application<\/strong> dans le menu d\u00e9roulant pour d\u00e9ployer une application React sur Kinsta.<\/li>\n<li>Dans la fen\u00eatre modale qui s&rsquo;affiche, choisissez le d\u00e9p\u00f4t que vous souhaitez d\u00e9ployer. Si vous avez plusieurs branches, vous pouvez s\u00e9lectionner la branche souhait\u00e9e et donner un nom \u00e0 votre application.<\/li>\n<li>S\u00e9lectionnez l&rsquo;un des emplacements de centre de donn\u00e9es disponibles dans la liste des 24 options.<\/li>\n<li>Kinsta d\u00e9tecte automatiquement la commande de d\u00e9marrage de votre application.<\/li>\n<\/ol>\n<p>Enfin, il n&rsquo;est pas s\u00fbr d&rsquo;envoyer les cl\u00e9s d&rsquo;API \u00e0 des h\u00f4tes publics comme votre fournisseur Git. Lors de l&rsquo;h\u00e9bergement, vous pouvez les ajouter en tant que <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variables d&rsquo;environnement<\/a> en utilisant le m\u00eame nom de variable et la m\u00eame valeur que ceux sp\u00e9cifi\u00e9s dans le fichier <strong>.env.<\/strong><\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/environment-variables-mykinsta.jpg\" alt=\"D\u00e9finissez les variables d'environnement sur MyKinsta lors du d\u00e9ploiement.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">D\u00e9finissez les variables d&rsquo;environnement sur MyKinsta lors du d\u00e9ploiement.<\/figcaption><\/figure>\n<p>Une fois que vous avez lanc\u00e9 le d\u00e9ploiement de votre application, le processus commence et se termine g\u00e9n\u00e9ralement en quelques minutes. Un d\u00e9ploiement r\u00e9ussi g\u00e9n\u00e8re un lien vers votre application, comme <strong>https:\/\/clone-wp-site-12teh.kinsta.app\/.<\/strong><\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vous pouvez activer le d\u00e9ploiement automatique, de sorte que Kinsta red\u00e9ploie votre application chaque fois que vous modifiez votre base de code et que vous l&rsquo;envoyez \u00e0 votre h\u00f4te Git.<\/p>\n<\/aside>\n\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>L&rsquo;API Kinsta offre la flexibilit\u00e9 de cr\u00e9er des interfaces utilisateur personnalis\u00e9es pour g\u00e9rer les sites WordPress, y compris la possibilit\u00e9 de cloner des sites existants et de g\u00e9rer divers aspects de votre environnement WordPress.<\/p>\n<p>Dans cet article, vous avez appris \u00e0 d\u00e9velopper une application qui permet le clonage de sites en dehors de MyKinsta.<\/p>\n<p><em>Comment utilisez-vous l&rsquo;API Kinsta ? Quelles sont les fonctionnalit\u00e9s et les points de terminaison que vous aimeriez voir ajout\u00e9s \u00e0 l&rsquo;API ? Partagez-les dans la section des commentaires !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous n&rsquo;avez pas besoin de g\u00e9rer un grand nombre des 800 millions de sites WordPress pr\u00e9sents sur le web avant de chercher des moyens de lancer &#8230;<\/p>\n","protected":false},"author":287,"featured_media":71745,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[953,1004,985],"class_list":["post-71744","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-react","topic-services-kinsta"],"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 cloner un site WordPress en utilisant l&#039;API Kinsta et React<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l&#039;aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.\" \/>\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\/cloner-site-api-kinsta-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cloner un site WordPress en utilisant l&#039;API Kinsta et React\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l&#039;aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-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-08-07T16:15:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T13:30:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.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=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l&#039;aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment cloner un site WordPress en utilisant l&rsquo;API Kinsta et React\",\"datePublished\":\"2023-08-07T16:15:25+00:00\",\"dateModified\":\"2023-08-22T13:30:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/\"},\"wordCount\":2739,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/\",\"name\":\"Comment cloner un site WordPress en utilisant l'API Kinsta et React\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg\",\"datePublished\":\"2023-08-07T16:15:25+00:00\",\"dateModified\":\"2023-08-22T13:30:44+00:00\",\"description\":\"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l'aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cloner un site WordPress en utilisant l&rsquo;API Kinsta et React\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cloner un site WordPress en utilisant l'API Kinsta et React","description":"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l'aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.","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\/cloner-site-api-kinsta-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cloner un site WordPress en utilisant l'API Kinsta et React","og_description":"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l'aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.","og_url":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-08-07T16:15:25+00:00","article_modified_time":"2023-08-22T13:30:44+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l'aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment cloner un site WordPress en utilisant l&rsquo;API Kinsta et React","datePublished":"2023-08-07T16:15:25+00:00","dateModified":"2023-08-22T13:30:44+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/"},"wordCount":2739,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/","name":"Comment cloner un site WordPress en utilisant l'API Kinsta et React","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg","datePublished":"2023-08-07T16:15:25+00:00","dateModified":"2023-08-22T13:30:44+00:00","description":"Apprenez \u00e0 cloner sans effort un site WordPress \u00e0 l'aide de la puissante API Kinsta et de React en construisant une interface utilisateur personnalis\u00e9e.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/08\/clone-site-kinsta-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/cloner-site-api-kinsta-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/fr\/sujets\/api\/"},{"@type":"ListItem","position":3,"name":"Comment cloner un site WordPress en utilisant l&rsquo;API Kinsta et React"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/71744","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=71744"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/71744\/revisions"}],"predecessor-version":[{"id":71846,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/71744\/revisions\/71846"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/71744\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/71745"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=71744"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=71744"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=71744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}