Today we're going to introduce you to Foxhound, a text-based WordPress SPA theme based on React JS, which uses React JS as the front-end framework and is implemented through the WordPress Restful API Call WordPress article data and display it on the front end, the theme does not have too many fancy features, only support for articles, pages, comments on images and other WordPress content is normally displayed, all the links within the theme have been converted to React Router links, so this is a WordPress single-page application theme, suitable for text-based blogs to use.

Foxhound React Theme Features and Settings

Since this is an experimental theme, we need to do some setup before we can make the theme work, we group some conditions, first of all, we need WordPress 4.7 or above with built-in REST API, since WordPressREST API doesn't have an endpoint for menus, we need to install the WP-API Menus plugin; The fixed link format of the WordPress site must be./%year%/%monthnum%/%postname%/The Foxhound theme is better suited for text-focused websites, where only text is displayed on the article listings page, and a featured image is displayed on the article and page body pages, accordingly.

Some limitations of the Foxhound React theme

Because it's a React JS based theme, the Foxhound theme will have a bit of a limitation in functionality and won't work as well as other PHP based WordPress themes. If JavaScript is disabled in your browser, the theme will not display any content.

For Google, the use of the Foxhound theme will not have a bad impact on SEO, since Google already crawls JS-generated content. It also doesn't affect the accessibility of the site (99% of screen reader users have JavaScript enabled in 2012), and there's no official word on whether Baidu can crawl JS-generated content.

WordPress Restful API can't be blocked by some security plugins, some plugins may block the user endpoint, and this endpoint is needed to display the author archive, if you must block the user endpoint, the author archive page can't be displayed.

If the theme is disabled, the fixed link structure of the site will be changed and we need some redirection plugin to do 301 redirection properly.

The theme supports nested categorized directory archives, is that there are parent themes can be displayed as an archive way, a later version can will fix this problem.

If the plugin adds content to the front end of the site, the plugin may not work properly, most Jetpack features work fine.

If we are logged into the site, the admin toolbar will not update based on a different page, the "Edit X" link will remain as the link to the page that was initially opened, and the Edit link will only change to the link to the current page after forcing a refresh of the current page.

Theme Development

We can also install the theme from the theme's Git repository and build it ourselves by downloading the theme to the /themes directory and running npm to install and build, JavaScript and CSS files. The process is as follows:

git clone https://github.com/ryelle/Foxhound foxhound
cd foxhound
npm install
npm run build

After running the above command, we can find the build/app.js file in the theme directory, and then, in the dashboard, switch the theme to Foxhound theme.

In addition to the above commands, we can also use the following commands to perform some operations.

• npm run dev: Run webpack, this command compiles code that includes a source map for front-end debugging.
• npm run watch: Run webpack -watch, which will run all the previous commands and also monitor changes to the source files, and recompile them when they change, so you can use this command to see the effect of the modifications in a timely manner.
• npm run lint: Checks all JavaScript files. Webpack also checks before compiling, but only displays an error message, whereas this command also displays a warning message.

On the PHP side, the Foxhound theme modifies some of theCustomized Routing Linksto make it easier for React JS to access the data.

Because the theme is relatively simple, the use of the scope may be limited, but this is Github can find a few bits of WordPress React Theme, there is a relatively large learning significance, interested friends can read the source code, try to transform it to see if the secondary development for their own needs style.