{"id":8302,"date":"2026-09-02T21:34:44","date_gmt":"2026-09-02T21:34:44","guid":{"rendered":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/"},"modified":"2026-09-02T21:34:44","modified_gmt":"2026-09-02T21:34:44","slug":"wordpress-as-a-headless-cms-and-react-js","status":"publish","type":"post","link":"https:\/\/kutia.net\/fr\/wordpress-as-a-headless-cms-and-react-js\/","title":{"rendered":"WordPress en tant que CMS sans t\u00eate et React.js"},"content":{"rendered":"

Process & Challenges<\/strong><\/p>\n

In late 2019, we started working on a project which was a new version of an existing E-Commerce solution of a grocery shop here in Pristina. Its previous version was built using WordPress & WooCommerce in order to make use of their set of tools & features. The challenge here was that the clients\u2019 requirements were to build an extremely fast site. Also, have a very user-friendly interface (so it would be easier for customers to keep adding stuff to their cart :)). Given all the requirements & experience in developing WooCommerce sites we had, we knew that this wouldn’t be an easy task to finish. <\/p>\n

Solution<\/strong><\/p>\n

We decided to keep using WordPress as our back-end, so we wouldn\u2019t lose any important data from the previous version. So, we started looking at what we could do in order to improve from the front-end side. We started thinking about making use of one of the most popular Javascript libraries. It was React.js to do the UI part. However, we were in doubt about how fast & easy would be the workflow on making use of the WordPress API. We continued searching for ways we could make it work. While looking for this, we happened to find a video<\/a> that showed us a very new way of using WordPress. It was to access its API not from its REST endpoints but via GraphQL<\/a> from a plugin called WPGraphQL<\/a>. That was very interesting to find but what was still holding us back as if it had enough WooCommerce support. Just for that, there was an extension of this plugin called WooGraphQL<\/a>.<\/p>\n

That was super awesome to find out! After we started working with these two, it was an immediate impression of how easy it was for us to do the front-end side using React and GraphQL endpoint to retrieve just the data that we wanted. <\/p>\n

Output<\/strong><\/p>\n

This solution happened to suit this project very well and the client was very happy with the end result. We learned quite a lot along the way. Not to mention the friendly support from their respective maintainers(Jason Bahl<\/a> & Geoffrey K Taylor<\/a>) & its community on Slack. After this project, we started implementing this tech-stack in more exciting projects. We can’t wait to share them with you in the coming months!<\/p>\n

Tech stack used<\/strong>:<\/p>\n

-React<\/p>\n

-WordPress<\/p>\n

-GraphQL<\/p>\n","protected":false},"excerpt":{"rendered":"

Processus et d\u00e9fis Fin 2019, nous avons commenc\u00e9 \u00e0 travailler sur un projet qui \u00e9tait une nouvelle version d’une solution de commerce \u00e9lectronique existante d’une \u00e9picerie ici \u00e0 Pristina. <\/p>\n","protected":false},"author":0,"featured_media":3011,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[82],"tags":[],"class_list":["post-8302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classifiee"],"acf":[],"yoast_head":"\nWordPress as a headless CMS and React.js - Kutia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress as a headless CMS and React.js - Kutia\" \/>\n<meta property=\"og:description\" content=\"Processus et d\u00e9fis Fin 2019, nous avons commenc\u00e9 \u00e0 travailler sur un projet qui \u00e9tait une nouvelle version d'une solution de commerce \u00e9lectronique existante d'une \u00e9picerie ici \u00e0 Pristina.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Kutia\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-02T21:34:44+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"WordPress en tant que CMS sans t\u00eate et React.js\",\"datePublished\":\"2026-09-02T21:34:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/\"},\"wordCount\":8,\"image\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/blog-2-1.webp\",\"articleSection\":[\"Non classifi\u00e9(e)\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/\",\"url\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/\",\"name\":\"WordPress as a headless CMS and React.js - Kutia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/blog-2-1.webp\",\"datePublished\":\"2026-09-02T21:34:44+00:00\",\"author\":{\"@id\":\"\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/kutia.net\\\/wordpress-as-a-headless-cms-and-react-js-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/blog-2-1.webp\",\"contentUrl\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/blog-2-1.webp\",\"width\":1200,\"height\":1200,\"caption\":\"WordPress as a headless CMS and React.js\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kutia.net\\\/#website\",\"url\":\"https:\\\/\\\/kutia.net\\\/\",\"name\":\"Kutia\",\"description\":\"Custom software, team augmentation, IT recruitment\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kutia.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress as a headless CMS and React.js - Kutia","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:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/","og_locale":"fr_FR","og_type":"article","og_title":"WordPress as a headless CMS and React.js - Kutia","og_description":"Processus et d\u00e9fis Fin 2019, nous avons commenc\u00e9 \u00e0 travailler sur un projet qui \u00e9tait une nouvelle version d'une solution de commerce \u00e9lectronique existante d'une \u00e9picerie ici \u00e0 Pristina.","og_url":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/","og_site_name":"Kutia","article_published_time":"2026-09-02T21:34:44+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/#article","isPartOf":{"@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/"},"author":{"name":"","@id":""},"headline":"WordPress en tant que CMS sans t\u00eate et React.js","datePublished":"2026-09-02T21:34:44+00:00","mainEntityOfPage":{"@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/"},"wordCount":8,"image":{"@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/#primaryimage"},"thumbnailUrl":"https:\/\/kutia.net\/wp-content\/uploads\/2021\/02\/blog-2-1.webp","articleSection":["Non classifi\u00e9(e)"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/","url":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/","name":"WordPress as a headless CMS and React.js - Kutia","isPartOf":{"@id":"https:\/\/kutia.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/#primaryimage"},"image":{"@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/#primaryimage"},"thumbnailUrl":"https:\/\/kutia.net\/wp-content\/uploads\/2021\/02\/blog-2-1.webp","datePublished":"2026-09-02T21:34:44+00:00","author":{"@id":""},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kutia.net\/wordpress-as-a-headless-cms-and-react-js-2\/#primaryimage","url":"https:\/\/kutia.net\/wp-content\/uploads\/2021\/02\/blog-2-1.webp","contentUrl":"https:\/\/kutia.net\/wp-content\/uploads\/2021\/02\/blog-2-1.webp","width":1200,"height":1200,"caption":"WordPress as a headless CMS and React.js"},{"@type":"WebSite","@id":"https:\/\/kutia.net\/#website","url":"https:\/\/kutia.net\/","name":"Kutia","description":"Custom software, team augmentation, IT recruitment","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kutia.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/posts\/8302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/comments?post=8302"}],"version-history":[{"count":0,"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/posts\/8302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/media\/3011"}],"wp:attachment":[{"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/media?parent=8302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/categories?post=8302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kutia.net\/fr\/wp-json\/wp\/v2\/tags?post=8302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}