WordPress Plugin Development with React JS easily (2024)

composer init

npm init

npm install @wordpress/scripts --save-dev

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

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

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

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

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

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

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; 

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;

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

npm start