DEV Community 👩‍💻👨‍💻

Cover image for WordPress Plugin Development with React JS easily
Maniruzzaman Akash
Maniruzzaman Akash

Posted on

WordPress Plugin Development with React JS easily

Let's describe how to start working in WordPress with React JS.

WordPress plugin development is really a top paying job around the world and with React it's really getting more powerful nowadays.

Let's build a simple wordpress plugin with React JS.

Step 1:

Inside plugins directory, create a folder called - jobplace which is our plugin.

add composer setup by running -

composer init
Enter fullscreen mode Exit fullscreen mode

also run

npm init
Enter fullscreen mode Exit fullscreen mode

install @wordpress/scripts by running -

npm install @wordpress/scripts --save-dev
Enter fullscreen mode Exit fullscreen mode

Add some command in package.json and final 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"
  }
}
Enter fullscreen mode Exit fullscreen mode

And composer.json would be -

{
    "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": {}
}
Enter fullscreen mode Exit fullscreen mode

Add webpack.config.js -

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

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

Add a template file - templates/app.php

<div id="jobplace">
    <h2>Loading...</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

Main Plugin file - job-place.php

<?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 );
}
Enter fullscreen mode Exit fullscreen mode

*Add React stuff - *

In 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'));
Enter fullscreen mode Exit fullscreen mode

src/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>
     );
}

export default App; 
Enter fullscreen mode Exit fullscreen mode

*Add Dashboard Component - 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;
Enter fullscreen mode Exit fullscreen mode

Add style in src/style/main.scss -

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

Now run -

  1. Activate the plugin
  2. Run the wp-script
npm start
Enter fullscreen mode Exit fullscreen mode

That's it.

See the final demo -

Image description

*Full Article and Github Link in more details explanation - *

https://devsenv.com/tutorials/start-wordpress-plugin-development-with-react-js-easily-in-just-few-steps

Top comments (2)

Collapse
betpido profile image
betpido

great. I like how you dived straight into it and also posting pictures during every step.

Collapse
maniruzzamanakash profile image
Maniruzzaman Akash Author

Thank you @betpido.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.