How to build React WordPress plugins

How to build React WordPress plugins

Learn how to develop a professional WordPress plugin from scratch using React.js

Take Every Opportunity to really beef up your JavaScript Chops — Matt Mullenweg, Creator of WordPress

There’s good evidence available that learning Javascript in 2017 should be in your best interest. I’m working on a course will help you get up to speed with the latest development techniques and skip all of the hard research that I had to do up front :)

What is React.js?

React is a Javascript framework (think Backbone, Angular, Vue etc.) that has been under development by Facebook since 2012. The reason that you’ve been hearing more and more about it recently is due to the fact that Facebook did not publicly announce the project until 2015.

As someone who has been through a lot of javascript frameworks, React is the first one that has just made sense to me. Sure, it is a bit of a departure from what you may have already learned in the past with tools such as jQuery.

However, once you are exposed to the benefits of doing things The React Way™, I’m confident that you’ll feel the same that I did – and you’ll never want to look back.

What you’ll learn

In this course, you will learn how to build and ship a React-powered WordPress plugin from scratch. We’ll go into detail on the whole process, from setting up your build processes to component interaction and exporting for production. No boilerplates or starter templates here. That way, you’ll know exactly how everything works and what purpose it serves.

Here’s a summary of the course contents and outline so far:

Part 1: The basics.

  • Introduction, tooling, and editor setup
  • Generating Base Plugin Files
  • Setting up the Main Plugin Class
  • Registering a Custom Post Type
  • Adding a CPT metabox
  • Setting up a Webpack config file
  • Reactifying the Metabox
  • Understanding Development vs Production Modes
  • Preserving Component State with react-hot-loader
  • Styling the Metabox with Styled Components
  • Implementing cachebusting with webpack-manifest-plugin

Part 2: Creating the admin

  • Refactoring to Individual Components
  • Routing the admin with React Router
  • Registering a REST endpoint for the Custom Post Type
  • Fetching objects with React via the WordPress REST API
  • Testing Component Expectations using Jest
  • Using Shortcode to Load the App
  • Animating with react-move
  • Introduction to React Props
  • Refactoring to ES6 Class Components
  • Using Component State

Part 3: Creating the frontend

  • Outputting objects through the REST API
  • Celebrating with React Confetti

Meet the Instructor

This course is being written and recorded in June 2017 by Dave Kiss (hey, that’s me!)

You can find me on Twitter here 👉 Davey-boy’s Twitter

I’ve been working with WordPress for 8 years, and have been successfully selling many different WordPress plugins since 2012. It’s my only revenue stream, and it allowed me and my family to travel the country while working remotely. Now, it’s time to share what I’ve learned along the way.

Join me, will ya?

Comments are closed.