We have created the WordPress theme starter project that will allow you to easily include React and Redux into your WordPress site.

This starter should be used:

• to learn how to include React and Redux in your WordPress site
• to quickly start building themes which include React and Redux
• as a starting point for your custom WordPress + React + Redux web applications

Features

Here are some of the features that are included:

• React + Redux development workflow
  • React for fast and simple UI
  • Redux state container
• Webpack module bundler
• Webpack Dev Server
• React Hot Loader – reloading of your components in realtime without losing the state
• Time traveling – good thing when you’re debugging your site
• CSS modules
• Global SCSS styles
• Simple router for WordPress sites
• Multiple entry points for React
  • Your components can be placed in several places inside your website
  • You don’t need to have all of your components inside a single container

See it in action

For the demo purposes we have created a simple counter application.

Our application has two entry points. Counter component is placed into the content section, and counter increment widget is placed into the navbar. As you can see, they interact without any problems. 🙂

Here you can see the time traveling in action. You just install the Redux DevTools and you can time travel from your browser debugger.

Before we start

If you already know how to use React, Redux and WordPress API, then you should skip to the GitHub repo.

Otherwise, please check out this chapter. 🙂

React

Just follow this and be patient.

Redux

Again, follow this tutorial.
Remember, patience is the virtue of patient people.

WordPress API

And for the last time: tutorial, patience and good will.
Learn how to make controllers
Learn something about authentication

Try it out

If you would like to try our starter theme, please go to GitHub repository.