{"id":54769,"date":"2023-08-07T18:19:06","date_gmt":"2023-08-07T16:19:06","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=54769&#038;preview=true&#038;preview_id=54769"},"modified":"2023-08-17T10:45:42","modified_gmt":"2023-08-17T08:45:42","slug":"site-klonen-kinsta-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/","title":{"rendered":"Zo kloon je een WordPress site klonen met de Kinsta API en React"},"content":{"rendered":"<p>Je hoeft niet alle 800 miljoen <a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress sites<\/a> op het web te beheren voordat je op zoek gaat naar manieren om nieuwe sites effici\u00ebnt te lanceren.<\/p>\n<p>Het klonen van een bestaande WordPress configuratie is \u00e9\u00e9n manier om snel aan de slag te gaan, en klanten van Kinsta&#8217;s <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">Managed WordPress Hosting<\/a> dienst weten dat dit eenvoudig kan worden gedaan binnen ons gebruiksvriendelijke <a href=\"https:\/\/my.kinsta.com\/?lang=nl\">MyKinsta dashboard<\/a>.<\/p>\n<p>Bovendien kun je WordPress sites op schaal klonen met je favoriete technologie\u00ebn voor applicatieontwikkeling en de <a href=\"https:\/\/kinsta.com\/nl\/docs\/kinsta-api\/\">Kinsta API<\/a>. In deze tutorial gebruiken we die API en <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a>, een van de vele populaire <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">JavaScript bibliotheken<\/a>, om te laten zien hoe dat werkt.<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>Wat je gaat bouwen<\/h2>\n<p>Dit is het scenario: Je bent een WordPress ontwikkelingsbureau met een of meer sites die gebruikt kunnen worden als starttemplates. De React applicatie voor het klonen van WordPress sites die we bouwen ziet er als volgt uit:<\/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=\"React applicatie voor het klonen van site met Kinsta API.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">React applicatie voor het klonen van site met Kinsta API.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Heb je haast? Alle onderstaande code is beschikbaar in <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">deze GitHub template<\/a>. Gebruik het om je eigen repository te maken en te deployment via <a href=\"https:\/\/my.kinsta.com\/?lang=nl\">MyKinsta<\/a>, door je eigen bedrijfs-ID en API sleutel als omgevingsvariabelen toe te voegen. (Bekijk het <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/blob\/main\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Readme.md bestand<\/a> voor instructies.)<\/p>\n<\/aside>\n\n<h3>Vereisten<\/h3>\n<p>Om deze tutorial te kunnen volgen, heb je een basiskennis nodig van <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a> en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> en enige bekendheid met React. Ook moet je Node.js en npm (de <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">Node Package Manager<\/a>) of yarn ge\u00efnstalleerd hebben op je computer. De focus van dit project ligt meer op het bouwen van een WordPress kloonapplicatie met React en de Kinsta API dan op de details van het maken en stylen van de UI.<br \/>\n<\/p>\n<h2>De ontwikkelomgeving instellen<\/h2>\n<p>Je kunt een React applicatie vanaf nul maken en je eigen interface ontwikkelen, of je kunt de <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/git\/\">Git<\/a> starter template pakken die hierboven genoemd is door deze stappen te volgen:<\/p>\n<ol start=\"1\">\n<li>Bezoek de <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub repository<\/a> van dit project.<\/li>\n<li>Selecteer <strong>Use this template<\/strong> &gt; <strong>Create a new repository<\/strong> om de starter code naar een repository binnen je GitHub account te kopi\u00ebren. (Vink het vakje aan om <strong>alle branches mee te nemen<\/strong>.)<\/li>\n<li>Pull het repository naar je lokale computer en schakel over naar de <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a> branch met het commando: <code>git checkout starter-files<\/code><\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Installeer de benodigde dependencies door het commando <code>npm install<\/code> uit te voeren.<\/li>\n<\/ol>\n<p>Als de installatie voltooid is, kun je het project op je lokale computer starten met <code>npm run start<\/code>. Dit opent het project op <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h3>De projectbestanden begrijpen<\/h3>\n<p>De <strong>src-map <\/strong>is het hart van een React applicatie, omdat deze de JavaScript bevat die webpack nodig heeft. In de map staat <strong>App.js,<\/strong> waarin de twee routes voor dit project zijn geconfigureerd.<\/p>\n<p>Binnen de <strong>src-map<\/strong> bevinden zich de submappen <strong>components<\/strong> en <strong>pages<\/strong>. De map components bevat herbruikbare componenten, zoals de <strong>Header.jsx<\/strong> en <strong>Footer.jsx<\/strong>, die worden gebruikt in de pagina&#8217;s <strong>Home.jsx<\/strong> en <strong>Operations.jsx <\/strong>.<\/p>\n<p>Je concentreert je hier op het deployen van de logica in <strong>Home.jsx<\/strong> en <strong>Operations.jsx<\/strong>, omdat styling en routing te vinden zijn in onze GitHub startbestanden.<\/p>\n<p><strong>Home.jsx<\/strong> heeft een formulier met twee velden: de naam van de site die je aanmaakt en een selectieveld dat de WordPress sites opsomt die in je MyKinsta account staan (deze lijst wordt opgehaald via de Kinsta API).<\/p>\n<p>Als er op de verzendknop van het formulier (<strong>Clone site<\/strong>) wordt geklikt, wordt er een object met de property <code>operation_id<\/code> geretourneerd. Deze ID en weergavenaam worden doorgegeven als routeparameters aan <strong>Operations.jsx<\/strong>, waar de status van de kloonoperatie wordt gerapporteerd. De interface zal ook links bevatten naar de WordPress admin login en de homepage van de 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=\"Operations pagina met links naar WP admin en site.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Operations pagina met links naar WP admin en site.<\/figcaption><\/figure>\n<h2>De Kinsta API gebruiken om een WordPress site te klonen<\/h2>\n<p>Binnen <strong>Home.jsx<\/strong> worden drie API verzoeken gedaan aan de <a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta API<\/a>. Het eerste verzoek is om een lijst van sites op je Kinsta account te krijgen. Deze wordt opgeslagen in een state en vervolgens ge\u00eftereerd naar het select veld. Dit verzoek wordt direct na het renderen van de pagina gedaan met behulp van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/react-useeffect\/\">useEffect hook<\/a>.<\/p>\n<p>Het tweede en derde verzoek worden gedaan zodra op de knop <strong>Clone site<\/strong> wordt geklikt. Het tweede verzoek krijgt het omgevings-ID van de site die je wilt klonen. Het derde verzoek gebruikt die omgevings-ID en de weergavenaam van de site om het klonen van de site te starten.<\/p>\n<h3>Interactie met de Kinsta API in React<\/h3>\n<p>In deze tutorial heb je interactie met twee endpoints van de Kinsta API:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>: Hiermee kun je een lijst met alle sites retourneren, een site-omgevings-ID opvragen en ten slotte een bestaande site klonen.<\/li>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>: Dit wordt gebruikt om de state van de operatie op te vragen. Als de site kloonoperatie bijvoorbeeld bezig is, kun je dit endpoint gebruiken om de state van de operatie programmatisch bij te houden om te bepalen wanneer deze klaar is.<\/li>\n<\/ul>\n<p>Voor interactie met de Kinsta API heb je je <strong>bedrijfs-ID<\/strong> nodig (te vinden in MyKinsta onder <strong>Bedrijf<\/strong> &gt; <strong>Factureringsgegevens<\/strong> &gt; <strong>Bedrijfs-ID<\/strong>) en een <strong>API sleutel<\/strong>. Hier lees je hoe je <a href=\"https:\/\/kinsta.com\/nl\/blog\/kinsta-api-sleutel\/#how-to-create-an-api-key\">een Kinsta API sleutel aanmaakt<\/a>.<\/p>\n<p>Zodra je deze gegevens hebt, kun je ze het beste veilig opslaan als omgevingsvariabelen in je React applicatie. Om de omgevingsvariabelen in te stellen, maak je een <strong>.env<\/strong> bestand in de hoofdmap van je project. Voeg in dit bestand de volgende regels toe:<\/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>Om toegang te krijgen tot deze omgevingsvariabelen binnen je project, kun je de syntaxis <code>process.env.THE_VARIABLE<\/code> gebruiken. Om bijvoorbeeld toegang te krijgen tot <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, gebruik je <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>Het is belangrijk om het <strong>.env<\/strong> bestand toe te voegen aan je <a href=\"https:\/\/kinsta.com\/nl\/blog\/gitignore-repareren\/\">.gitignore bestand<\/a> om te voorkomen dat het naar GitHub gepushed wordt. Dit zorgt ervoor dat je gevoelige informatie, zoals API sleutels, priv\u00e9 blijft.<\/p>\n<\/aside>\n\n<h3>Een bestaande site klonen met Kinsta API<\/h3>\n<p>Laten we beginnen met het ophalen van de lijst van alle sites wanneer <strong>Home.jsx<\/strong> rendert met behulp van de useEffect Hook en ze op te slaan in een state. Om dit te bereiken importeer je de useEffect en <a href=\"https:\/\/kinsta.com\/nl\/blog\/usestate-react\/\">useState<\/a> Hooks en maak je een state aan om de array van sites die worden opgehaald in op te slaan:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\nconst [sites, setSites] = useState([]);<\/code><\/pre>\n<p>Gebruik vervolgens de useEffect Hook om de Kinsta API te bevragen met de <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-http-verzoek\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">JavaScript Fetch API<\/a>. Maak eerst twee constante variabelen om de headers en de Kinsta API URL op te slaan. Dit wordt gedaan om herhaling te voorkomen, omdat je op deze pagina meer dan \u00e9\u00e9n verzoek naar de Kinsta API zult sturen:<\/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>In de bovenstaande code onthoudt de <a href=\"https:\/\/kinsta.com\/blog\/react-usecallback\/#reacts-usecallback-vs-usememo\">useMemo<\/a> Hook het headers object zodat het niet bij elke render opnieuw ge\u00ebvalueerd hoeft te worden omdat de waarde constant is. Nu kun je het API verzoek maken:<\/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>In de bovenstaande code wordt een asynchrone functie <code>fetchAllSites<\/code> gemaakt. In deze functie definieer je eerst de parameter <code>query<\/code> (je bedrijfs-ID) die je hebt opgehaald uit je <strong>.env<\/strong> bestand. Vervolgens doe je een GET-verzoek naar het <code>\/sites<\/code> endpoint van de Kinsta API met behulp van de <code>query<\/code> parameter. Het antwoord wordt dan opgeslagen in de <code>sites<\/code> state die je eerder hebt aangemaakt. Tot slot call je <code>fetchAllSites<\/code> om het fetchen te starten.<\/p>\n<p>Laten we nu de waarden opnemen die zijn opgeslagen in de <code>sites<\/code> state door er doorheen te lopen om het select veld te vullen. De displaynaam wordt getoond aan de gebruiker, terwijl de site-ID wordt gebruikt als optiewaarde. Op deze manier kan, wanneer het formulier wordt verzonden, de ID van de geselecteerde site worden gebruikt om omgevingsdetails op te vragen:<\/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>Laten we verder gaan met het afhandelen van het verzenden van het formulier en het ophalen van waarden uit het formulier. Hiervoor moet je voor elk invoerveld state variabelen maken:<\/p>\n<pre><code class=\"language-jsx\">const [selectedSiteId, setSelectedSiteId] = useState('');\nconst [displayName, setDisplayName] = useState('');<\/code><\/pre>\n<p>Vervolgens bind je de formuliervelden aan hun respectievelijke state waarden door de attributen <code>value<\/code> en <code>onChange<\/code> toe te voegen aan elk invoerelement. Zo ziet het formulier eruit:<\/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>In de bovenstaande code heeft elk invoerelement het value attribuut ingesteld op de corresponderende toestandsvariabele, en het <code>onChange<\/code> attribuut wordt gebruikt om de state waarde bij te werken als de gebruiker interactie heeft met de invoervelden.<\/p>\n<p>Om het verzenden van het formulier af te handelen, koppel je een <code>onSubmit<\/code> methode aan het formulierelement. Bijvoorbeeld:<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt; onSubmit={handleSubmission}&gt;\n    {\/* form details *\/}\n&lt;\/form&gt;<\/code><\/pre>\n<p>Definieer de methode <code>handleSubmission<\/code>, waarbij twee API verzoeken worden gedaan aan de Kinsta API. Het eerste verzoek vraagt de omgevings-ID op van de site die gekloond moet worden en het tweede verzoek voert de kloonbewerking uit.<\/p>\n<p>Laten we beginnen met het ophalen van de omgevings-ID. Maak in de methode <code>handleSubmission<\/code> een asynchrone functie om dit verzoek af te handelen. De functie stuurt een GET verzoek naar het <code>\/sites<\/code> endpoint, voegt de ID van de geselecteerde site toe, gevolgd door het <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/getSiteEnvironments\" target=\"_blank\" rel=\"noopener noreferrer\">\/environments<\/a><\/code> endpoint:<\/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>Hierboven is <code>fetchEnvironmentId<\/code> een asynchrone functie die een GET verzoek naar de Kinsta API stuurt. Het haalt de omgevingen van de geselecteerde site op en haalt de ID van de omgeving uit het antwoord. De omgevings-ID wordt opgeslagen in de variabele <code>envId<\/code> en vervolgens geretourneerd. Bij het callen van de functie wijzen we de retourwaarde toe aan de variabele <code>envId<\/code>.<br \/>\n<br \/>\nOp dit punt kun je een bestaande site klonen met de Kinsta API omdat je de essenti\u00eble informatie hebt over de bronsite: bedrijfs-ID, weergavenaam en omgevings-ID.<\/p>\n<p>Maak binnen de methode <code>handleSubmission<\/code> een functie genaamd <code>cloneExistingSite<\/code> om dit API verzoek af te handelen. Dit verzoek gaat naar het <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/cloneWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites\/clone<\/a><\/code> endpoint. In tegenstelling tot de vorige verzoeken zijn de headers voor dit verzoek anders, omdat je de <code>Content-Type<\/code> moet specificeren als <code>application\/json<\/code>. Bovendien is dit een POST verzoek, dus je moet een verzoektekst toevoegen die de payload bevat die je naar de API wilt sturen. Dit is hoe het verzoek wordt opgebouwd:<\/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>In deze code wordt het verzoek <code>body<\/code> geconstrueerd met <code>JSON.stringify()<\/code> om het payload object om te zetten in een JSON string. Het antwoord wordt vervolgens opgeslagen in de gegevensvariabele. Met behulp van de methode <code>useNavigate<\/code> uit de bibliotheek <code>react-router-dom<\/code> worden de <code>displayName<\/code> en <code>operation_id<\/code> doorgegeven als routeparameters. Zorg ervoor dat je de methode <code>useNaviagte<\/code> importeert en installeert:<\/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>Als je nu het formulier invult en op de knop <strong>Clone site <\/strong>klikt, begint een nieuwe site met het kloonproces, die zichtbaar zou zijn op je MyKinsta dashboard. Maar we willen het klonen van de site programmatisch volgen binnen de custom UI. Je regelt dit in <strong>Operations.jsx <\/strong>met behulp van de gegevens die via de route worden verzonden.<\/p>\n<h3>Operationele statuscontrole gebruiken met Kinsta API<\/h3>\n<p>Haal in <strong>Operations.jsx<\/strong> de ID van de operatie op uit de route met de methode <code>useParams<\/code> van <code>react-router-dom<\/code>. Deze ID wordt gebruikt om een API verzoek te doen wanneer op de knop <strong>Check Site Status <\/strong>wordt geklikt.<\/p>\n<p>Importeer eerst de methode <code>useParams<\/code> en gebruik deze om de variabelen <code>displayName<\/code> en <code>operationId<\/code> te instanti\u00ebren:<\/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>Maak vervolgens een state aan om de state van de operatie op te slaan wanneer het verzoek wordt gedaan:<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress.\" });<\/code><\/pre>\n<p>In de bovenstaande code wordt de state ge\u00efnitialiseerd met een standaardbericht, dat wordt weergegeven totdat op de knop <strong>Check Site Status <\/strong>wordt geklikt. Voeg een <code>onClick<\/code> event toe aan de knop <strong>Check Site Status <\/strong>en call de methode <code>checkOperation<\/code> wanneer op de knop wordt geklikt:<\/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>Maak nu de functie <code>checkOperation<\/code> om de bewerkingsaanvraag aan de Kinsta API te doen. Sla de constanten <code>headers<\/code> en <code>KinstaAPIUrl<\/code> op in variabelen en gebruik ze in het API-verzoek:<\/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>In de bovenstaande code wordt een GET verzoek verzonden naar het <code>\/operations<\/code> endpoint met de ID van de bewerking en het antwoord wordt opgeslagen in de <code>operationData<\/code> state. Nu kun je de gegevens gebruiken in de opmaak:<\/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>Tot slot worden de <code>displayName<\/code> gegevens die via de route worden doorgegeven gebruikt om de URL voor de nieuwe site en de WordPress admin URL te construeren. Beide links worden geopend in een nieuw tabblad.<\/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>Met deze wijzigingen haalt <strong>Operations.jsx<\/strong> de ID van de operatie op uit de route, doet een API verzoek wanneer op de knop wordt geklikt, geeft de state van de operatie weer en biedt links naar de WordPress admin en site URL op basis van de <code>displayName<\/code> gegevens.<\/p>\n<h2>Je applicatie deployen naar Kinsta<\/h2>\n<p>Om je applicatie te deployen naar Kinsta&#8217;s <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applicatie Hosting<\/a> platform, moet je het project pushen naar <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">je favoriete Git provider<\/a>. Als je project is gehost op <a href=\"https:\/\/kinsta.com\/blog\/what-is-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/gitlab-en-github\/\">GitLab<\/a> of <a href=\"https:\/\/kinsta.com\/nl\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>, kun je verder gaan met de deployment naar Kinsta.<\/p>\n<p>Om je repository naar Kinsta te deployen, volg je deze stappen:<\/p>\n<ol start=\"1\">\n<li>Log in of maak je Kinsta account aan op het MyKinsta dashboard.<\/li>\n<li>Klik in de linker zijbalk op <b>Applicaties <\/b>en vervolgens op <strong>Dienst toevoegen<\/strong>.<\/li>\n<li>Selecteer <strong>Applicatie<\/strong> in het vervolgkeuzemenu om een React applicatie te deployen op Kinsta.<\/li>\n<li>Kies in de modal die verschijnt de repository die je wilt deployen. Als je meerdere branches hebt, kun je de gewenste branch selecteren en een naam geven aan je applicatie.<\/li>\n<li>Selecteer een van de beschikbare datacenterlocaties uit de lijst met 24 opties.<\/li>\n<li>Kinsta detecteert automatisch het start commando voor je applicatie.<\/li>\n<\/ol>\n<p>Tot slot is het niet veilig om API sleutels naar publieke hosts zoals je Git provider te pushen. Bij het hosten kun je ze toevoegen als <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">omgevingsvariabelen<\/a> met dezelfde variabelenaam en -waarde die zijn opgegeven in het <strong>.env<\/strong> bestand.<\/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=\"Stel omgevingsvariabelen in op MyKinsta bij het deployen.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Stel omgevingsvariabelen in op MyKinsta bij het deployen.<\/figcaption><\/figure>\n<p>Zodra je de deployment van je applicatie start, begint het proces en is meestal binnen een paar minuten klaar. Een succesvolle deployment genereert een link naar je applicatie, zoals <strong>https:\/\/clone-wp-site-12teh.kinsta.app\/<\/strong>.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Je kunt automatische deployments inschakelen, zodat Kinsta je applicatie opnieuw deployt wanneer je je codebase wijzigt en naar je Git host pusht.<\/p>\n<\/aside>\n<\/p>\n<h2>Samenvatting<\/h2>\n<p>De Kinsta API biedt de flexibiliteit om custom gebruikersinterfaces te maken voor het beheren van WordPress sites, inclusief de mogelijkheid om bestaande sites te klonen en verschillende aspecten van je WordPress omgeving te beheren.<\/p>\n<p>In dit artikel heb je geleerd hoe je een applicatie kunt ontwikkelen die het klonen van sites buiten MyKinsta mogelijk maakt.<\/p>\n<p><em>Hoe gebruik jij de Kinsta API? Welke features en endpoints zou je graag toegevoegd zien aan de API? Deel ze in de commentsectie!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je hoeft niet alle 800 miljoen WordPress sites op het web te beheren voordat je op zoek gaat naar manieren om nieuwe sites effici\u00ebnt te lanceren. &#8230;<\/p>\n","protected":false},"author":287,"featured_media":54770,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[911,853,871],"class_list":["post-54769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-kinsta-diensten","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>Zo kloon je een WordPress site met Kinsta API &amp; React<\/title>\n<meta name=\"description\" content=\"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.\" \/>\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\/nl\/blog\/site-klonen-kinsta-api\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo kloon je een WordPress site klonen met de Kinsta API en React\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:19:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T08:45:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo kloon je een WordPress site klonen met de Kinsta API en React\",\"datePublished\":\"2023-08-07T16:19:06+00:00\",\"dateModified\":\"2023-08-17T08:45:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/\"},\"wordCount\":2294,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/\",\"name\":\"Zo kloon je een WordPress site met Kinsta API & React\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg\",\"datePublished\":\"2023-08-07T16:19:06+00:00\",\"dateModified\":\"2023-08-17T08:45:42+00:00\",\"description\":\"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Zo kloon je een WordPress site met Kinsta API &amp; React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo kloon je een WordPress site klonen met de Kinsta API en React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo kloon je een WordPress site met Kinsta API & React","description":"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.","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\/nl\/blog\/site-klonen-kinsta-api\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo kloon je een WordPress site klonen met de Kinsta API en React","og_description":"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-08-07T16:19:06+00:00","article_modified_time":"2023-08-17T08:45:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"15 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo kloon je een WordPress site klonen met de Kinsta API en React","datePublished":"2023-08-07T16:19:06+00:00","dateModified":"2023-08-17T08:45:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/"},"wordCount":2294,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/","url":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/","name":"Zo kloon je een WordPress site met Kinsta API & React","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg","datePublished":"2023-08-07T16:19:06+00:00","dateModified":"2023-08-17T08:45:42+00:00","description":"Leer hoe je moeiteloos een WordPress site kunt klonen met behulp van de krachtige Kinsta API en React door een custom gebruikersinterface te bouwen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/08\/clone-site-kinsta-api.jpg","width":1460,"height":730,"caption":"Zo kloon je een WordPress site met Kinsta API &amp; React"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/site-klonen-kinsta-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/api\/"},{"@type":"ListItem","position":3,"name":"Zo kloon je een WordPress site klonen met de Kinsta API en React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/54769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=54769"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/54769\/revisions"}],"predecessor-version":[{"id":55009,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/54769\/revisions\/55009"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/54769\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/54770"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=54769"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=54769"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=54769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}