WordPress | Beginner-friendly WordPress plugin development using React JS

WordPress | Beginner-friendly WordPress plugin development using React JS

Setup of an npm project using cmd

npm init

Install the WordPress official package of scripts.

npm install @wordpress/scripts --save-dev

Change in package json

{
  "name": "tools",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^26.9.0"
  }
}

Create a file called webpack.config.js.

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

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

Create a template and create the file name app.php (Path: templates/app.php).

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

Create a project folder file with the name as project : tools.php

<?php

/**
 * The plugin bootstrap file
 *
 * Tools plugin
 *
 * @link              https://github.com/bhargavraviya
 * @since             0.0.1
 * @package           tools
 *
 * @wordpress-plugin
 * Plugin Name:       Tools
 * Plugin URI:        https://github.com/bhargavraviya
 * Description:       Tools
 * Version:           0.0.1
 * Author:            Bhargav Raviya
 * Author URI:        https://github.com/bhargavraviya
 * License:           GPL-3.0+
 * License URI:       http://www.gnu.org/licenses/gpl-3.0.txt
 * Text Domain:       tools
 * Domain Path:       /languages
 */

if (!defined('ABSPATH')) {
    die("can't access");
}

 add_action( 'admin_menu', 'raviya_init_menu' );

 
/**
 * Init Admin Menu.
 *
 * @return void
 */
function raviya_init_menu() {
    add_menu_page( __( 'Raviya', 'raviya'), __( 'Raviya', 'raviya'), 'manage_options', 'raviya', 'raviya_admin_page', 'dashicons-admin-post', '2.1' );
}

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

add_action( 'admin_enqueue_scripts', 'raviya_admin_enqueue_scripts' );

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

Create a src folder and create a file index.js (Path: 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('raviya'));

Create an App.js in the src folder (PAth: src/App.js).

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

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

export default App;

Create a components folder and create a file Dashboard.jsx (Path: 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;

Also create a style folder (Path src/style/main.scss).

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

Now active package go to plugin selection and run command line

npm start

Sponsor @bhargavraviya on GitHub Sponsors

Patreon