WP React Plugin Boilerplate is a starter WordPress plugin to develop WordPress Plugin via React and Rest API.

WP React Plugin Boilerplate

WP React Plugin Boilerplate is a starter WordPress plugin to develop WordPress Plugin via React and Rest API. The Plugin Settings was added by React, Gutenberg Components and Rest API

GETTING STARTED

Upload the plugin files to the /wp-content/plugins/wp-react-plugin-boilerplate directory, or install the plugin through the WordPress plugins screen directly.

You need to rename the plugin folder name and files name. Also need to rename constants, variables, classes , text-domain, and functions inside of it to fit your needs. For example, if your plugin is named 'react-settings' then:

• rename folder from wp-react-plugin-boilerplate to react-settings
• rename all files from wp-react-plugin-boilerplate to react-settings PHP,JS and CSS
• change wp_react_plugin_boilerplate to react_settings
• change wp-react-plugin-boilerplate to react-settings
• change Wp_React_Plugin_Boilerplate to React_Settings
• change WP_REACT_PLUGIN_BOILERPLATE to REACT_SETTINGS

It's safe to activate the plugin at this point. Activate the plugin through the 'Plugins' screen in WordPress

Development Process

node -v
# Results into 7.19.1 — or installed version.

npm -v
# Results into v14.15.1 — or installed version.

Follow the following steps to add your functionalities to the plugin:

1. Navigate to plugin files /wp-content/plugins/your-renamed-plugin-folder, open terminal app.
2. Run the npm install command to install npm dependencies, wait sometimes to complete it.
3. Run the npm run packages-update command to update the package.
4. Run npm run start command to initialize development of React JS, Development can be done any time. Use it in the development environment.
5. Run the npm run build command to finalize the development and be ready for production. The command creates production files. After building the production file move it to the production level.

Go to WordPress Dashboard => React Settings and View the Default Settings of the Plugin.

Folder Information

WP React Plugin Boilerplate Folder Information

INSIDE: /wp-installatioon-folder/wp-content/plugins/your-renamed-plugin-folder

├── .gitignore
├── index.php
├── LICENSE.txt
├── package.json
├── readme.md
├── README.txt
├── uninstall.php
├── your-renamed-plugin.php
|
├── admin
|  |  ├── class-your-renamed-plugin-admin.php
|  |  └── index.php
|  |
|  └── partials
|     └── your-renamed-plugin-admin-display.php
|
├── build
|  ├── index.asset.php
|  ├── index.js
|  └── style-index.css
|
├── includes
|  ├── class-your-renamed-plugin.php
|  ├── class-your-renamed-plugin-activator.php
|  ├── class-your-renamed-plugin-deactivator.php
|  ├── class-your-renamed-plugin-i18n.php
|  ├── class-your-renamed-plugin-loader.php
|  ├── functions.php
|  └── index.php
|
├── languages
|  └── your-renamed-plugin.pot
|
├── public
|  |  ├── class-your-renamed-plugin-public.php
|  |  └── index.php
|  |
|  └── css
|  |  └── your-renamed-plugin-public.css
|  |
|  └── js
|  |  └── your-renamed-plugin-public.js
|  |
|  └── partials
|     └── your-renamed-plugin-public-display.php
|
└── src
   ├── components
   |  ├── render-tabs
   |  |  ├── advanced.js
   |  |  └── general.js
   |  |
   |  └── tabs.js
   |
   ├── utils
   |  └── components.js
   |
   ├── index.js
   └── style.scss

Changelog

1.0.0

• Initial Release

License & Attribution

• GPLv2 or later © Santosh Kunwar.

I would like to thanks all the React.js team, Gutenberg Team, WordPress Core Contributors, WordPress Plugin Boilerplate teams and My friends to motivate me to create the starter plugin.

About Me

I just love WordPress more…

• 
• WordPress Profile

Recent Projects

Gutentor - WordPress Page Building Blocks - Page Builder for Gutenberg