Develop WordPress Plugin with React

Developing a WordPress plugin using React involves a combination of traditional WordPress plugin development practices and modern JavaScript tooling. Here’s a step-by-step guide to set up the environment and develop a WordPress plugin using React:

1. Set Up a Local WordPress Environment:

Before you start developing, it’s a good idea to have a local WordPress environment. Tools like Local by Flywheel, MAMP, WAMP, or XAMPP can help you set up a local WordPress site.

2. Create a New Plugin:

1. Navigate to wp-content/plugins in your WordPress directory.
2. Create a new directory for your plugin, e.g., my-react-plugin.
3. Inside this directory, create a main PHP file, e.g., my-react-plugin.php.

3. Set Up a Modern JavaScript Build Process:

1. Navigate to your plugin directory in the terminal.
2. Initialize a new npm project: npm init
3. Install necessary packages:

npm install --save react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react @babel/preset-env

Create a .babelrc file in your plugin directory with the following content:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Set up a basic webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

1. Create a src directory in your plugin directory and add an index.js file. This will be your main React entry point.

4. Develop Your React Component:

Inside src/index.js, you can start developing your React component:

import React from 'react';
import ReactDOM from 'react-dom';

function MyComponent() {
  return <div>Hello from React!</div>;
}

ReactDOM.render(<MyComponent />, document.getElementById('my-react-root'));

5. Enqueue Your Scripts in WordPress:

In your main plugin PHP file (my-react-plugin.php), enqueue the built JavaScript file:

function enqueue_my_react_plugin_scripts() {
    wp_enqueue_script('my-react-plugin', plugins_url('dist/bundle.js', __FILE__), ['wp-element'], time(), true);
}

add_action('wp_enqueue_scripts', 'enqueue_my_react_plugin_scripts');

Note: wp-element is a dependency that WordPress provides which includes React.

6. Display Your React Component:

You can display your React component anywhere in your WordPress site using a shortcode or a Gutenberg block. For simplicity, here’s how to do it with a shortcode:

In my-react-plugin.php:

function my_react_plugin_shortcode() {
    return '<div id="my-react-root"></div>';
}

add_shortcode('my_react_plugin', 'my_react_plugin_shortcode');

Now, you can use [my_react_plugin] in any post or page to display your React component.

7. Build and Iterate:

Whenever you make changes to your React code, you’ll need to rebuild your JavaScript bundle:

npx webpack --mode=development

For production, you can use:

npx webpack --mode=production

You can also set up webpack-dev-server or use webpack --watch to automatically rebuild on file changes.

This is a basic setup to get you started. As your plugin grows, you might want to consider adding more advanced configurations, such as code splitting, externalizing WordPress scripts, or integrating with the WordPress REST API.

See your changes in real-time without manually running the npx webpack --mode=development

If you want to see your changes in real-time without manually running the npx webpack --mode=development command every time you make a change, you can use the webpack-dev-server or the webpack --watch command.

Here’s how you can set up both methods:

1. Using webpack-dev-server:

1. First, you need to install webpack-dev-server:

npm install --save-dev webpack-dev-server

Update your webpack.config.js to include the devServer configuration:

module.exports = {
  // ... other configurations
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    writeToDisk: true // This ensures the output files are written to disk
  }
};

Add a script to your package.json to run the dev server:

"scripts": {
  "start": "webpack-dev-server --mode development"
}

4. Now, you can run npm start to start the webpack-dev-server. This will automatically rebuild your bundle when you make changes to your code.

However, keep in mind that webpack-dev-server serves the bundle from memory. If you want the files to be written to the dist directory, you need to set writeToDisk: true in the devServer configuration, as shown above.

2. Using webpack --watch:

If you don’t want to use webpack-dev-server, you can simply use the --watch flag with Webpack:

1. Add a script to your package.json:

"scripts": {
  "watch": "webpack --watch --mode development"
}

2. Run npm run watch to start Webpack in watch mode. This will watch your files for changes and automatically rebuild the bundle when changes are detected.

Checking in the Browser:

Once you’ve set up either of the above methods:

1. Ensure your local WordPress environment is running.
2. Navigate to the page or post where you’ve added your React component (using the shortcode [my_react_plugin] as mentioned in the previous answer).
3. Whenever you make changes to your React code, just refresh the page in your browser to see the updates. If you’re using webpack-dev-server, it might even refresh automatically for you.

Remember, for these changes to reflect in your WordPress environment, the output bundle should be written to the dist directory, which is why the writeToDisk: true configuration is essential if you’re using webpack-dev-server.