Exploring the WP REST API and React

With the inclusion of the REST API infrastructure in WP core 4.4, it's time I stopped 'keeping an eye on' the API and start seeing how it can be used to push Wordpress (and to practice using React).

I have a plan

I've been rolling an idea around for a while - which usually means it's something I'll do - eventually. I've told a couple of people about my idea and they laughed, so that usually means it'll happen sooner. That idea is pretty simple - a site that is a compendium of pharmacy signs. Images and videos that can be uploaded documenting the incredibly diverse (stay with me) way that a simple green cross is used to say - get your pills and plasters here.

It seems like a good opportunity to apply some learning to a 'real' project

Some things to note

  1. I'd like to build this using the Wordpress API and React. This is totally the WRONG approach. The project should dictate the technology used, but it's a learning exercise so I don't care!
  2. I'd like to make this as open as possible. Input from different people is most welcome.
  3. I want to document it along the way here, but I'm not going to be writing tutorials.
  4. There are already a few great resources on the WP API, React etc. So I will be stealing using these as a reference.

Where to start

I'm going to start by stepping back in time - back to 21st March 2015 at WordCamp London where Jack Lenox gave this talk on the WordPress REST API...

...That was a really great introduction - and I've taken a few notes:

So Jack mentions the experimental Picard Theme in the video. Sounds like that should be the next thing to check out, so I'm going to spin up a local instance of WordPress and do just that.

So I'm going to start by setting up my local WP test environment using Trellis and Bedrock using the subtree method I outlined in a previous post but I'm going to pull in my forked version of the Picard theme instead of Sage.

So for the third step in that process istead of installing sage I run:

$ git remote add picard https://github.com/chrisk2020/Picard
$ git fetch picard
$ git checkout -b picard picard/master
$ git checkout master
$ git read-tree --prefix=site/web/app/themes/picard -u picard/master
$ git commit -m "add picard subtree"

I'm also going to need the WP REST API plugin using the master branch - according to the docs. Instead of downloading it or using composer to install it, I'm going to grab it as a git subtree of this project (I'm doing this because the plugin is in active development and hey - this is only a test)

$ git remote add wp-api https://github.com/WP-API/WP-API
$ git fetch wp-api
$ git checkout -b wp-api wp-api/master
$ git checkout master
$ git read-tree --prefix=site/web/app/plugins/WP-API -u wp-api/master
$ git commit -m "add wp-api plugin subtree"

Then I setup the Trellis development variables and instal the ansible roles needed andva

$ vagrant up

Once the VM has provisioned I need to setup the build process for the theme. As I already use node, npm and gulp in most if not all my projects I just need to go to the theme diractory and

$ npm install

in the theme directory.

One thing I notice straight away is that there are a few deprication warnings (at the time of writing the Picard theme was last updated 3 months ago - so you know, it's OLD(!)) Anyway I'm only testing so let's no worry too much for now. I can use npm-check-updates to check and update dependencies.

Following the istructions I activate the WP-API plugin and

$ gulp
$ gulp watch

in the picard theme directory. I'm also going to need some data so I've installed the importer and imported the theme unit testing data and attachments.

Next I activate the Picard Theme and visit the front-end... and...

I'm met by the correct theme, but with no posts displayed. So a qucik peek at the error console shows that indeed the deprication warnings do indeed need listening to (obviously).

react/addons is depricated and so is React.render - so lets upadte some stuff:

React.render has been depricated since v0.14 and now we need to use react-dom so that's easy:

$ npm install --save react-dom

and then we need to update the render call which is in

picard/components/picard.jsx

so I change

/**
 * External dependencies
 */
var React = require( 'react' );

...

/**
 * Make it so…
 */
React.render(
    <Router />, document.getElementById( 'main' )
);

to

/**
 * External dependencies
 */
var React = require( 'react' );
var ReactDOM = require('react-dom');

...

/**
 * Make it so…
 */
ReactDOM.render(
    <Router />, document.getElementById( 'main' )
);

I had to delete the compiled js file and the rebuild, but that sorted that warning. Now to address the react/addons error I seached React.addons in picard/components and the only refernce I found was for the css transitions addon. So I installed that package - addons are now separate packages.

$ npm install -save react-addons-css-transition-group

and then require that package in the two files where nedded: picard/components/content/loop/hentry/hentry.jsx picard/components/content/loop/loop.jsx

and also update the ReactCSSTransitionGroup call syntax adding:

transitionEnterTimeout={500} transitionLeaveTimeout={300}

and then update the other 8 references to "react/addons" with "react" - rebuild: No errors - yay, no content displaying on front end - boo!

But then I had a RTFM (read the fucking manual) moment - updated permalinks and... boom! posts showing on the front end. Now there is still a warning in the console: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Loop.

PHEW - I think I'll save that for the next post.


Code and Process