PMPro React Demo

PMPro React Demo

Sample WordPress plugin for setting up a project with Yarn, Webpack, BrowserSync and React. Tailored to creating a wp-admin page, but completely flexible and can be used for themes as well.

Companion blog post: https://deliciousbrains.com/develop-wordpress-plugin-webpack-3-react/

Getting started

1. Fork repo to your Github account
2. Clone repo to your wp-content/plugins folder
3. In config.json change the proxyURL to match the admin url of the plugin page, http://pmpro.local/wp-admin/index.php?page=pmpro-react-demo.
4. In your host WordPress wp-config.php file add define( 'PMPRO_AJAX_BASE', 'http://pmpro.local/wp-json/pmpro/v1' ); and update it to point to your REST API base
5. Modify any WordPress config in pmpro-react-demo.php. Rename files/methods/strings as necessary.
6. Activate the plugin in wp-admin
7. Navigate to the the admin url of the plugin page, http://pmpro.local/wp-admin/index.php?page=pmpro-react-demo.
8. The page should be blank.
9. Open Terminal.
10. cd into your plugin's folder and run yarn
11. Run yarn start to get Webpack and BrowserSync running
12. A proxy window should open your plugin page, http://pmpro.local/wp-admin/index.php?page=pmpro-react-demo, at http://localhose:3000/wp-admin/index.php?page=pmpro-react-demo, and you should see your WP Options in an editable table.

To build for production run:

yarn build

A production-ready WordPress plugin will be built in the pmpro-react-demo-built folder.