{"id":263039,"date":"2017-11-29T12:58:02","date_gmt":"2017-11-29T19:58:02","guid":{"rendered":"http:\/\/css-tricks.com\/?p=263039"},"modified":"2017-12-20T08:39:57","modified_gmt":"2017-12-20T15:39:57","slug":"wordpress-react","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/wordpress-react\/","title":{"rendered":"WordPress + React"},"content":{"rendered":"<p>I posted just 2 months ago about <a href=\"https:\/\/css-tricks.com\/foxhound\/\">Foxhound<\/a> and how I found it pretty cool, but also curious that it was one of very few themes around that combine the WordPress JSON API and React, even though they seem like a perfect natural fit. Like <a href=\"https:\/\/css-tricks.com\/what-is-a-headless-cms\/\">a headless CMS<\/a>, almost.<\/p>\n<p><!--more--><\/p>\n<p>Since then, a few more things have crossed my desk of people doing more with this idea and combination. <\/p>\n<p>Maxime Laboissonniere wrote <a href=\"https:\/\/snipcart.com\/blog\/reactjs-wordpress-rest-api-example\" rel=\"noopener\">Strapping React.js on a WordPress Backend: WP REST API Example<\/a>:<\/p>\n<blockquote>\n<p>I&#8217;ll use WordPress as a backend, and WordPress REST API to feed data into a simple React e-commerce SPA:<\/p>\n<ul>\n<li>Creating products with the WP Advanced Custom Fields plugin<\/li>\n<li>Mapping custom fields to JSON payload<\/li>\n<li>Consuming the JSON REST API with React<\/li>\n<li>Rendering products in our store<\/li>\n<\/ul>\n<\/blockquote>\n<p>Perhaps more directly usable, <a href=\"https:\/\/trackchanges.postlight.com\/introducing-postlights-wordpress-react-starter-kit-a61e2633c48c\" rel=\"noopener\">Postlight have put out a Starter Kit<\/a>. Gina Trapani:<\/p>\n<blockquote><p>People who publish on the web love WordPress. Engineers love React. With some research, configuration, and trial and error, you can have both\u200a\u2014\u200abut we\u2019d like to save you the work.<\/p><\/blockquote>\n<p><a href=\"https:\/\/github.com\/postlight\/headless-wp-starter\" rel=\"noopener\">Here&#8217;s that repo.<\/a><\/p>\n<p>Another example: Alex MacArthur&#8217;s <a href=\"http:\/\/wp.netlify.com\/posts\" rel=\"noopener\">WP Vue<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I posted just 2 months ago about Foxhound and how I found it pretty cool, but also curious that it was one of very few themes around that combine the WordPress JSON API and React, even though they seem like a perfect natural fit. Like a headless CMS, almost.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[785,1274,557,264,793],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":260599,"url":"https:\/\/css-tricks.com\/foxhound\/","url_meta":{"origin":263039,"position":0},"title":"Foxhound","date":"September 28, 2017","format":false,"excerpt":"As of WordPress 4.7 (December 2016), WordPress has shipped with a JSON API built right in. Wanna see? Hit up this URL right here on CSS-Tricks. There is loads of docs for it. That JSON API can be used for all sorts of things. I think APIs are often thought\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":200657,"url":"https:\/\/css-tricks.com\/using-the-wp-api-to-fetch-posts\/","url_meta":{"origin":263039,"position":1},"title":"Using the WP-API to Fetch Posts","date":"May 6, 2015","format":false,"excerpt":"It may be news to you, but there is a nifty resource called Quotes on Design that serves up interesting quotes about design, curated by our very own Chris Coyier. Up to this point, Quotes on Design (QoD) used a bit of custom code to query the WordPress database and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243538,"url":"https:\/\/css-tricks.com\/wp-rest-api-remote-control-wordpress\/","url_meta":{"origin":263039,"position":2},"title":"The WP REST API for Remote Control WordPress","date":"July 13, 2016","format":false,"excerpt":"At my day job, we have about 1,000 sites spread across 30 WordPress multisite installs. The installs all run many of the same plugins and settings, especially at the network level. This causes a lot of wasted time for our staff: They have to manually repeat the same settings across\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":247399,"url":"https:\/\/css-tricks.com\/api-based-cms-approach\/","url_meta":{"origin":263039,"position":3},"title":"The API-Based CMS Approach","date":"November 21, 2016","format":false,"excerpt":"For each type of content you need for your site, you develop in three steps: Create the custom content type and configure its fields Set up your app to retrieve that content from the API Load the content into your page template Let's take a look at each of these\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":200170,"url":"https:\/\/css-tricks.com\/thoughts-on-an-api-first-wordpress\/","url_meta":{"origin":263039,"position":4},"title":"Thoughts on an API-First WordPress","date":"April 21, 2015","format":false,"excerpt":"The following is a guest post by Eduardo Bou\u00e7as. We all know WordPress is a CMS, but here Eduardo thinks about using it only as an API for content. No front end at all, just URL endpoints that return JSON for use anywhere else. This doesn't detail a comprehensive solution\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":274506,"url":"https:\/\/css-tricks.com\/using-data-in-react-with-the-fetch-api-and-axios\/","url_meta":{"origin":263039,"position":5},"title":"Using data in React with the Fetch API and axios","date":"August 3, 2018","format":false,"excerpt":"If you are new to React, and perhaps have only played with building to-do and counter apps, you may not yet have run across a need to pull in data for your app. There will likely come a time when you\u2019ll need to do this, as React apps are most\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/dog-fetch.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263039"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=263039"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263039\/revisions"}],"predecessor-version":[{"id":264134,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263039\/revisions\/264134"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=263039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=263039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=263039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}