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 (9)

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

Thank you @betpido.

Collapse
 
ellenajonnes profile image
elena jones

Hi Sir,
Hope you are doing well,

✅ You said that "Wordpress Plugin Developer (requires test task)..." and we can do it with very high quality and fast, you can check our strong portfolio to make sure.

Three of our designs:
👉 dribbble.com/shots/19179672-BabySa...
👉 dribbble.com/shots/19212366-Xpace-...
👉 dribbble.com/shots/19230780-Panda-...

Also, I want to mention some of notable projects:
👉 annex.finance
👉 clubrare.xyz
👉 safegram.tech
👉 cryptochi.io
👉 gempad.app

🌎 Our Website: definft.digital

🚀 My superior Telegram: t.me/alexclarktg
📧 My superior Email: alex.cllaark@gmail.com

📩 Mind if I send over a few times to quick chat?

Thanks,

  • Elena.
Collapse
 
ellenajonnes profile image
elena jones

Hi Sir,
Hope you are doing well,

✅ You said that "Php & ReactJs (Test Task Required)..." and we can do it with very high quality and fast, you can check our strong portfolio to make sure.

Three of our designs:
👉 dribbble.com/shots/19179672-BabySa...
👉 dribbble.com/shots/19212366-Xpace-...
👉 dribbble.com/shots/19230780-Panda-...

Also, I want to mention some of notable projects:
👉 annex.finance
👉 clubrare.xyz
👉 safegram.tech
👉 cryptochi.io
👉 gempad.app

🌎 Our Website: definft.digital

🚀 My superior Telegram: t.me/alexclarktg
📧 My superior Email: alex.cllaark@gmail.com

📩 Mind if I send over a few times to quick chat?

Thanks,

  • Elena.
Collapse
 
superstar121879 profile image
Smart121879

Awesome, that would be helpful

Collapse
 
sheikh303 profile image
sheikh303

How can i integrate this Dashboard page in a public page?

Collapse
 
maniruzzamanakash profile image
Maniruzzaman Akash

Simple.
Just enqueue the generated script in page specific or for all page.

Collapse
 
vntvalenzuela profile image
VntValenzuela

Thanks, in step 1 where is the plugins directory located?

Collapse
 
kresimir71 profile image
kresimir71

"All WordPress plugins you download and install on your site are stored in /wp-content/plugins/ folder."