This is a boilerplate to speed up the development of a WordPress plugin with a React UI rendered in a top level settings page in the WP Admin.
- TypeScript. Can write modules either in TS or JavaScript
- Jest for testing, assertions, and mocks. Includes React Test Renderer for rendering snapshots
- async/await Babel plugin to work with act() and be able to test React hooks without warnings
- Enzyme for integration testing
- Integration tests mocking API requests
- REST API endpoints and React component for a complete CRUD task list
- React hot module replacement preserving state
- CSS/SASS hot reload
- Minification of production output
- Settings page in WP Admin
Clone this repo to your wp-content/plugins/ directory.
Run npm install to install all packages needed.
Go to WP Admin > Plugins and activate it. This will add a new settings page "Create WP React Plugin" to the WP Admin menu.
Edit create-wordpress-react-plugin/create-wordpress-react-plugin.php and set the CWPRP_DEVELOPMENT_MODE to true.
This allows to take advantage of the React hot module replacement and styles hot reload.
Run npm run watch.
Edit create-wordpress-react-plugin/create-wordpress-react-plugin.php and set the CWPRP_DEVELOPMENT_MODE to false.
This will load files from the js/ and css/ directories in the plugin.
Run npm run build.
Made by StartFunction.com Check our blog for articles on software engineering, front end development, and WordPress.