WordPress Plugin Development with React JS easily (2025)

Maniruzzaman Akash

Posted on

WordPress Plugin Development with React JS easily (3) WordPress Plugin Development with React JS easily (4) WordPress Plugin Development with React JS easily (5) WordPress Plugin Development with React JS easily (6) WordPress Plugin Development with React JS easily (7)

#react #wordpress #wordpressplugin #javascript

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

also run

npm init

install @wordpress/scripts by running -

npm install @wordpress/scripts --save-dev

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" }}

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": {}}

Add webpack.config.js -

const defaults = require('@wordpress/scripts/config/webpack.config');module.exports = { ...defaults, externals: { react: 'React', 'react-dom': 'ReactDOM', },};

Add a template file - templates/app.php

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

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

*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 DOMrender(<App />, document.getElementById('jobplace'));

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; 

*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;

Add style in src/style/main.scss -

Now run -

  1. Activate the plugin
  2. Run the wp-script
npm start

That's it.

See the final demo -

WordPress Plugin Development with React JS easily (8)

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

Subscribe

betpido

betpido

I am building algorithms that will make it possible for computers to see, just like humans already do

  • Education

    University of Cape Coast

  • Work

    software developer

  • Joined

Apr 25 '22

  • Copy link

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

Maniruzzaman Akash

Maniruzzaman Akash

System Designer & Architect.Can develop/architect your system's Frontend with React/Vue and Backend with Laravel/Node JS and WordPress Plugin development.Interested to work with AI too...

  • Email

    manirujjamanakash@gmail.com

  • Location

    Dhaka-1200, Bangladesh

  • Education

    Bachelor of Science at Computer Science and Engineering

  • Work

    Full Stack Web/App Developer at WeDevs Ltd, Bangladesh

  • Joined

Apr 29 '22

  • Copy link

Thank you @betpido.

Smart121879

Smart121879

FullStack engineer

  • Education

    Dalarna University,Bachelor of Computer Science

  • Work

    Freelancer

  • Joined

May 16 '23

  • Copy link

Awesome, that would be helpful

VntValenzuela

VntValenzuela

  • Joined

May 9 '23

  • Copy link

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

kresimir71

kresimir71

  • Joined

May 18 '23

  • Copy link

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

sheikh303

sheikh303

  • Location

    Dhaka, Bangladesh

  • Work

    Software Engineer at tsl.io

  • Joined

Nov 10 '22

  • Copy link

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

Maniruzzaman Akash

Maniruzzaman Akash

System Designer & Architect.Can develop/architect your system's Frontend with React/Vue and Backend with Laravel/Node JS and WordPress Plugin development.Interested to work with AI too...

  • Email

    manirujjamanakash@gmail.com

  • Location

    Dhaka-1200, Bangladesh

  • Education

    Bachelor of Science at Computer Science and Engineering

  • Work

    Full Stack Web/App Developer at WeDevs Ltd, Bangladesh

  • Joined

Jan 5 '23

  • Copy link

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

For further actions, you may consider blocking this person and/or reporting abuse

WordPress Plugin Development with React JS easily (2025)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Delena Feil

Last Updated:

Views: 6112

Rating: 4.4 / 5 (65 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Delena Feil

Birthday: 1998-08-29

Address: 747 Lubowitz Run, Sidmouth, HI 90646-5543

Phone: +99513241752844

Job: Design Supervisor

Hobby: Digital arts, Lacemaking, Air sports, Running, Scouting, Shooting, Puzzles

Introduction: My name is Delena Feil, I am a clean, splendid, calm, fancy, jolly, bright, faithful person who loves writing and wants to share my knowledge and understanding with you.