Start WordPress Plugin Development with React JS easily in just few steps

In todays world for PHP developer, WordPress plugin development is becoming very popoular nowadays. And after coming React JS in frontend world, it's now a common interest to work in WordPress plugin development using React JS as frontend library.

Yes, that's now super simple to work with WordPress plugin development with the help of React JS. Let's do step by step.

Step 1: Composer Setup

Inside plugins directory, create a folder called - jobplace, which is our test plugin name, or you can create as your own. We'll do everything from that folder. Go to that folder and Run below command to install PHP autoload setup -

composer init

It will generate a composer.json file like this -

{
    "name": "akash/jobplace",
    "description": "A Job posting platform made by WordPress",
    "type": "wordpress-plugin",
    "license": "GPL-2.0-or-later",
    "autoload": {
        "psr-4": {
            "Akash\\Jobplace\\": "includes/"
        }
    },
    "authors": [
        {
            "name": "ManiruzzamanAkash",
            "email": "manirujjamanakash@gmail.com"
        }
    ],
    "require": {}
}

Add gitignore .gitignore file

/node_modules
/vendor

Step 2: NPM setup - wp script

Setup simple npm environment by running

npm init

It'll generate a package.json like below -

{
  "name": "jobplace",
  "version": "1.0.0",
  "description": "A Job posting platform made by WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Install @wordpress/scripts npm library in dev environment

npm install @wordpress/scripts --save-dev

Also add two command in package.json's script tag -

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },

So final package.json would be -

{
  "name": "jobplace",
  "version": "1.0.0",
  "description": "A Job posting platform made by WordPress",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^22.5.0"
  }
}

Great, now create new file - webpack.config.js to add React and ReactDOM as external dependency.

const defaults = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaults,
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
}; 

Step 3: Plugin Main file and Template file

Now create our template file for loading react component in templates/app.php.

<div id="jobplace">
    <h2>Loading...</h2>
</div> 

Now create main plugin file job-place.php at

What have done here -

1) Add Plugin structure comment -

<?php
/**
 * Plugin Name:       Job Place
 * Description:       A Job posting platform made by WordPress.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Maniruzzaman Akash
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       jobplace
 */

2) Then add an Admin Menu by calling admin_menu hook

Inside jobplace_init_menu() function, register a Menu for WordPress sidebar loading

and jobplace_admin_page() callback to load the template.

add_action( 'admin_menu', 'jobplace_init_menu' );

/**
 * Init Admin Menu.
 *
 * @return void
 */
function jobplace_init_menu() {
    add_menu_page( __( 'Job Place', 'jobplace'), __( 'Job Place', 'jobplace'), 'manage_options', 'jobplace', 'jobplace_admin_page', 'dashicons-admin-post', '2.1' );
}

/**
 * Init Admin Page.
 *
 * @return void
 */
function jobplace_admin_page() {
    require_once plugin_dir_path( __FILE__ ) . 'templates/app.php';
}

Then we need to enqueue our scripts to load react stuff.

Run the command -

npm start

This will actually run wp-scripts and generate build/index.js and some other files.

Then enqueue those scripts -

add_action( 'admin_enqueue_scripts', 'jobplace_admin_enqueue_scripts' );

/**
 * Enqueue scripts and styles.
 *
 * @return void
 */
function jobplace_admin_enqueue_scripts() {
    wp_enqueue_style( 'jobplace-style', plugin_dir_url( __FILE__ ) . 'build/index.css' );
    wp_enqueue_script( 'jobplace-script', plugin_dir_url( __FILE__ ) . 'build/index.js', array( 'wp-element' ), '1.0.0', true );
}

Don't confuse, the files build/index.css and build/index.js will generate when we'll run npm start command

So, Our Final job-place.php file would be -

<?php
/**
 * Plugin Name:       Job Place
 * Description:       A Job posting platform made by WordPress.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Maniruzzaman Akash
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       jobplace
 */

add_action( 'admin_menu', 'jobplace_init_menu' );

/**
 * Init Admin Menu.
 *
 * @return void
 */
function jobplace_init_menu() {
    add_menu_page( __( 'Job Place', 'jobplace'), __( 'Job Place', 'jobplace'), 'manage_options', 'jobplace', 'jobplace_admin_page', 'dashicons-admin-post', '2.1' );
}

/**
 * Init Admin Page.
 *
 * @return void
 */
function jobplace_admin_page() {
    require_once plugin_dir_path( __FILE__ ) . 'templates/app.php';
}

add_action( 'admin_enqueue_scripts', 'jobplace_admin_enqueue_scripts' );

/**
 * Enqueue scripts and styles.
 *
 * @return void
 */
function jobplace_admin_enqueue_scripts() {
    wp_enqueue_style( 'jobplace-style', plugin_dir_url( __FILE__ ) . 'build/index.css' );
    wp_enqueue_script( 'jobplace-script', plugin_dir_url( __FILE__ ) . 'build/index.js', array( 'wp-element' ), '1.0.0', true );
}

Step 4: Add React Specific files

Create a file index.js inside /src folder - src/index.js.

import App from "./App";
import { render } from '@wordpress/element';

/**
 * Import the stylesheet for the plugin.
 */
import './style/main.scss';

// Render the App component into the DOM
render(<App />, document.getElementById('jobplace'));

Also add our main.scss file inside src/style/main.scss -

#jobplace {
    .app-title {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 1em;
    }
} 

And App component - inside src/App.js -

import React from 'react';

const App = () => {
    return (
        <div>
            <h2 className='app-title'>Job Place App</h2>
            <hr />
        </div>
     );
}

export default App; 

And finally add another testing Dashboard component inside src/components/Dashboard.jsx -

import React from 'react'

const Dashboard = () => {
    return (
        <div className='dashboard'>
            <div className="card">
                <h3>Dashboard</h3>
                <p>
                    Edit Dashboard component at <code>src/components/Dashboard.jsx</code>
                </p>
            </div>
        </div>
     );
}

export default Dashboard;

And also Add this component in App.js -

import React from 'react';
import Dashboard from './components/Dashboard';

const App = () => {
    return (
        <div>
            <h2 className='app-title'>Job Place App</h2>
            <hr />
            <Dashboard />
        </div>
     );
}

Great and done - Now check if npm start is running or not. If not running, run -

npm start

Step 5: Install and Run plugin

We've done all. Now let's test our new plugin.

Activate the plugin from wordpress plugins menu.

Then check in live -

Our File structure would be like this

That's it. We've made our simple setup plugin for WordPress with React JS.

Live repository for this Version - https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimple

Main plugin repository - https://github.com/ManiruzzamanAkash/wp-react-kit

If still any confusion, please feel free to ask me.