WP Reactivate is a React boilerplate built specifically for WordPress, allowing you to quickly and easily integrate React into your WordPress plugins.
- Install Node 4.0.0 or greater
- Install Yarn (Or use npm if you prefer)
- Install required modules:
yarn(ornpm install) - Build development version of app and watch for changes:
yarn build(ornpm run build) - Build production version of app:
yarn prod(ornpm run prod)
This boilerplate plugin provides three different WordPress views in which an independant React app can be rendered:
- Shortcode
- Widget
- Settings page in the backend (wp-admin)
Each JavaScript root file will correspond to the independant React app to be bundled by Webpack.
webpack.config.js
entry: {
'js/admin': path.resolve(__dirname, 'app/admin.js'),
'js/shortcode': path.resolve(__dirname, 'app/shortcode.js'),
'js/widget': path.resolve(__dirname, 'app/widget.js'),
},In order to get the shortcode attributes into our Javascript we need to pass them to an object which will be made available to the shortcode.js app via wp_localize_script. Be careful with the security of data you pass here as this will be output in a <script> tag in the rendered html.
includes/Shortcode.php
public function shortcode( $atts ) {
wp_enqueue_script( $this->plugin_slug . '-shortcode-script' );
wp_enqueue_style( $this->plugin_slug . '-shortcode-style' );
$object_name = 'wpr_object_' . uniqid();
$object = shortcode_atts( array(
'title' => 'Hello world',
'api_nonce' => wp_create_nonce( 'wp_rest' ),
'api_url' => rest_url( 'wp-reactivate/v1/' ),
), $atts, 'wp-reactivate' );
wp_localize_script( $this->plugin_slug . '-shortcode-script', $object_name, $object );
$shortcode = '<div class="wp-reactivate-shortcode" data-object-id="' . $object_name . '"></div>';
return $shortcode;
}You can access the shortcode attributes via the wpObject prop which is passed into your React container component.
app/containers/Shortcode.jsx
import React, { Component } from 'react';
export default class Shortcode extends Component {
render() {
return (
<div className="wrap">
<h1>WP Reactivate Frontend</h1>
<p>Title: {this.props.wpObject.title}</p>
</div>
);
}
}In order to get the widget options into our Javascript we need to pass them to an object which will be made available to the widget.js app via wp_localize_script. Be careful with the security of data you pass here as this will be output in a <script> tag in the rendered html.
includes/Widget.php
public function widget( $args, $instance ) {
wp_enqueue_script( $this->plugin_slug . '-widget-script', plugins_url( 'assets/js/widget.js', dirname( __FILE__ ) ), array( 'jquery' ), $this->version );
wp_enqueue_style( $this->plugin_slug . '-widget-style', plugins_url( 'assets/css/widget.css', dirname( __FILE__ ) ), $this->version );
$object_name = 'wpr_object_' . uniqid();
$object = array(
'title' => $instance['title'],
'api_nonce' => wp_create_nonce( 'wp_rest' ),
'api_url' => rest_url( 'wp-reactivate/v1/' ),
);
wp_localize_script( $this->plugin_slug . '-widget-script', $object_name, $object );
echo $args['before_widget'];
?><div class="wp-reactivate-widget" data-object-id="<?php echo $object_name ?>"></div><?php
echo $args['after_widget'];
}You can access the widget options via the wpObject prop which is passed into your React container component.
app/containers/Widget.jsx
import React, { Component } from 'react';
export default class Widget extends Component {
render() {
return (
<div className="wrap">
<h1>WP Reactivate Widget</h1>
<p>Title: {this.props.wpObject.title}</p>
</div>
);
}
}We have included a single base REST controller class in the plugin. You will need to use this controller to create endpoints to interact with your React components. Depending on the complexity of your plugin you may need to have multiple controllers or may want to extend default WordPress REST API endpoints.
We have chosen the custom controller approach for its control and flexibility. Please see the WordPress developer documentation on adding custom endpoints and specifically the controller pattern to familiarise your with our choice of implementation.
It is important to become well versed in using the WordPress REST API as this is how you will be passing data to and from your React applications.
In our admin class we add a sub menu page to the Settings menu using add_options_page and render the React Admin container onto the root DOM node.
includes/Admin.php
public function display_plugin_admin_page() {
?><div id="wp-reactivate-admin"></div><?php
}We have provided a utility class called fetchWP which is a simple abstraction over the Fetch API which allows you to easily make requests to the WordPress REST API.
In the React container component we show how to retrieve and update this setting via the example REST controller included in the boilerplate.
First we initialise fetchWP in the ES6 class constructor of our container component. It requires two parameters being the REST URL and the REST nonce which can be supplied from our wpObject.
app/containers/Admin.jsx
constructor(props) {
super(props);
this.state = {
example_setting: '',
};
this.fetchWP = new fetchWP({
restURL: this.props.wpObject.api_url,
restNonce: this.props.wpObject.api_nonce,
});
this.getSetting();
}In the getSetting call you can now see how we use the utility to perform a GET request on the 'example' endpoint.
app/containers/Admin.jsx
getSetting = () => {
this.fetchWP.get( 'example' )
.then(
(json) => this.setState({
example_setting: json.value,
saved_example_setting: json.value
}),
(err) => console.log( 'error', err )
);
};We have found this utility covers most of our use cases. If you are looking for something more full featured (especially if you are working with standard WP endpoints) then have a look at node-wpapi.
| Tech | Description |
|---|---|
| React | A JavaScript library for building user interfaces. |
| Babel | Compiles next generation JS features to ES5. Enjoy the new version of JavaScript, today. |
| Webpack | For bundling our JavaScript assets. |
| ESLint | Pluggable linting utility for JavaScript and JSX |
The boilerplate has been updated to use PHP namespaces and autoloading. Please see Tom McFarlin's article on the subject if you are not familiar.
Building a WordPress plugin with React - Part 1
Made by Pangolin
##WooCommerce Bill of Materials with WooBOM™
WooCommerce Bill of Materials designed for Manufacturing Creating a Bill of Materials (BOM) is a very valuable asset for any company that uses raw materials and parts to manufacture products. Any business using WooCommerce have had no way to add inventory and material usage tracking, until now.
WooBOM™ is the first plugin that takes a step towards achieving Material Requirements Planning (MRP) to create a way to easily and automatically track inventory and materials used to make their products. Unlike many other software solutions on the market, WooBOM is user friendly, easy to use, customizable, and lightweight.
##Modular and Multilevel in nature Many companies have unique processes and do things their own way. There is no one-size-fits-all solution for MRP and BOM solutions, and we know that from experience. WooBOM lets you customize certain aspects to be flexible and allow you to have your own unique way to create a Bill of Materials. This allows you to create your own indented BOM that records the raw materials, sub-components, components, parts, sub-assemblies, assemblies and their quantities used to create the products that are used in their online WooCommerce store. Our abstraction of the way materials come in and leave the door lets you have full flexibility of things like shipping/receiving, vendors, customers, purchase orders (PO), blanket orders, requisitions, work orders, material location, and items that are defective, broken, reworked, resold, missing, or whatever the case may be. We also allow the specific details of materials to be customized like if their use in the assembly process is measured in dimensions, rather than just quantity and weight. ##Engineering Change Notices
Tracking all the information lays the framework for adding even more value to your production process. Creating a modular BOM will allow you take utilize the Engineering Change Notice (ECN) feature that will allow you to enter when a material, component, part, or assembly has changed in someway that effects a item assembly or status. This can streamline communication so that a product or assembly isn’t continually made the old way it was before the change, providing a valuable and timesaving to centralize this information. Desktop App and Coming features Currently in the latter stages of development are native features for importing, exporting and custom, detailed reports that are exportable and beautiful. There is also a cross-platform desktop application were developing for Mac, Windows, Linux to use the REST API so all your data is available and updateable from a lightweight desktop app. Beta release is coming soon
In order to produce something distributable we need to test and evaluate how our platform works when its actually used by a business. This means we are proceeding with caution for releasing this product because we know how crucial eCommerce is to your business and we don’t take that lightly. With a little time and maturity, this can be achieved and it’s not too far away. Anyone who would like to help us at this level would be granted a free license and be treated as our highest-priority users. Without you, we couldn’t deliver the best possible product and we promise to reward you and make it worth your while!