- React single-page WordPress REST API theme tutorial (current)
- React WP theme: structure, Node packages and Webpack
- React WP theme: Smart vs Dumb components + React Router
- React WP theme: Creating dumb components
. to be written
I don’t have the blog coded up yet so there is no online demo. It will be a single-page theme based on Bootstrap blog design because I don’t want to spend much time in the design space and concentrate on the JS part instead. It’s main navigation will be composed of static menu items: home, about, articles. On the home page, there will be last 10 articles listed, without pagination. The other pages (except ‘Articles’) will be just simple pages matching their counterparts in the WordPress admin. The blog will not be much dynamic, no sidebars, but this is because I want to keep it simple. We might do that stuff later.
You can watch the progress on my “Lexi” GitHub repo.
Strong and weak parts
The blog will be single-page so it will be super-fast. Content will load on the background with Ajax requests by using WP REST API on the server-side.
The weakest part is that it won’t be dynamic and also it will not be universal (isomorphic). We might go around this problem by precomposing our application but for now, we won’t render anything on the server and everything on the client.
More on the technologies used in the later part of the article.
What you’ll learn
A lot, especially if coming from the PHP/jQuery world. We’ll jump on the React/Flux train and see all the best there. After finishing the tutorial, you’ll be able to build your own WordPress theme or plugin using these technologies. And anyways, it’s always good to learn new skills and technologies — they might catch up in a few years and you’ll be among the first ones to know how to use them.
A bit about technologies/tools we’ll be using
Unlike AngularJS, React doesn’t have routing built-in. If we were to program it ourselves, we would have to manage page transitions, remember current URL both in memory and in the URL field (with HTML5 history API) and much more. Fortunately, some good folks have created React-Router, a full-featured routing library for React-based web apps.
If you know Grunt or Gulp, Webpack is their (r)evolution. The main difference is that Webpack is much faster than any of them. It splits the modules into chunks, compiling only those which have been changed. It means that when you style your site in Sass and have many dependencies (such as Bootstrap), Webpack will compile everything on the first run (slow) but on the next runs it will only compile those files (or part of files) which have changed. Really fast.
What is more, Webpack supports so-called “loaders”. They are Webpack plugins which tell it how to compile/preprocess files. This way, if Webpack doesn’t support your favorite language, just write a new loader or pitch it to some of these folks. But in reality, most of the loaders are already programmed (Sass, JSX, etc).
ES6 or ECMAScript 2015
- module management (importing/exporting)
- class syntax with inheritance, constructors, methods, and properties
- the let keyword for creating new variables with block visibility (better than global var)
- arrow functions with lexical this (don’t have to do the `var that = this` trick anymore)
- and much more
WP REST API
I have to complain a bit here. When I used WP REST API for the first time, I was really excited about its possibilities. However, when I started to work on this single-page WP theme, I found out that it lacks many important features. It has no API endpoints for these things:
- site menu navigations (e.g., no way to get the items in the main menu)
- site permalink structure (what’s the link to an article? /%year%/%month% or vice versa or what)
- and some other things I’ve forgotten since
Without the above features, you can’t really build a standard, dynamic single-page WP theme.
On the other hand, WP REST API is open source so instead of complaining, I should be contributing. Pity me!
Bootstrap is the most popular front-end framework for making nice and UX-friendly web pages. They are just releasing the 4th version so I’m going to jump right into it. This project is on a cutting-edge of web technologies.
I think that we are on a brink of a revolution in the web, especially in the WordPress ecosystem. As people get used to the awesome UX of single page applications (like Facebook), they will demand similar experience of all the websites. You might say that SPAs are not SEO-friendly and not good for sites with a lot of content, but I have to disagree. Google already crawls SPAs, we just need to help it a little by precomposing or server-rendering it.
What is more, I think now is the best time to start learning and using WP REST API in combination with React/AngularJS. Not many people are using them yet, but they are becoming pretty mature technologies. And when WordPress will finally include WP REST API in the Core, you’ll be ready.
Useful resources and inspiration
In addition to the links provided throughout the article, here are some more interesting ones:
React/AngularJS WP Themes:
Universal (isomorphic) WP theme how to:
Oh, by the way, I’m calling the theme “Lexi”, which is the nickname of my girlfriend Alexandra. 🙂