It was a quiet evening when I first asked myself—can I bring the power of React into the WordPress admin (plugin Dashboard)? I’d built plugins before. Functional, reliable—but the UI always felt stuck in time.. I wanted something faster, more dynamic, and more intuitive. That’s when I decided to bridge the gap between WordPress and React. I want to document the process here for future reference. If you’re exploring modern WordPress development, this might be useful to you too. Let’s dive in.
Prerequisites => Before we begin, make sure you have:
- Node.js and npm installed
- A local WordPress development site
- A code editor (VS Code recommended)
Step-by-Step Guide
Step 1: Install WordPress Scripts
Open your terminal in the plugin root directory and run:
npm install @wordpress/scripts @wordpress/icons path webpack-remove-empty-scripts --save-dev
This installs the official WordPress build tools for modern JavaScript development.
Step 2: Configure package.json
Add the following to your package.json file under "scripts":
"scripts": {
"build": "wp-scripts build",
"check-engines": "wp-scripts check-engines",
"check-licenses": "wp-scripts check-licenses",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"lint:md:docs": "wp-scripts lint-md-docs",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start",
"test:e2e": "wp-scripts test-e2e",
"test:unit": "wp-scripts test-unit-js"
}These scripts will help you build, lint, test, and package your plugin efficiently.
Step 3: Create Your React Entry Point
Inside your plugin folder, create: bash
src/menu-page/index.jsThis is where your React component will live.
There’s one more step you’ll need to take to get the build process working with your plugin: setting up your plugin’s Webpack configuration file. For this tutorial, you’ll only need this for building editor/plugin-dashboard scripts.
Open your plugin’s webpack.config.js file and add the following code:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
const path = require( 'path' );
module.exports = {
...defaultConfig,
...{
entry: {
...defaultConfig.entry(),
'js/menu-page': path.resolve( process.cwd(), 'src/menu-page', 'index.js' )
},
plugins: [
// Include WP's plugin config.
...defaultConfig.plugins,
// Removes the empty `.js` files generated by webpack but
// sets it after WP has generated its `*.asset.php` file.
new RemoveEmptyScriptsPlugin( {
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
} )
]
}
};Step 4: Write Your React Component
In src/menu-page/index.js, add:
import React from 'react';
import ReactDOM from 'react-dom/client';
const container = document.getElementById('render-root');
const root = ReactDOM.createRoot(container);
root.render(<h1>Welcome to My Plugin Dashboard</h1>);
//This simple component will render inside your WordPress admin page.Step 5: Start the Build Process
Run: terminal
npm start
//This will generate a build directory containing your compiled React code.Step 6: Hook Into WordPress Admin
In your plugin’s main PHP file, add: php
function your_plugin_menu() {
add_menu_page(
'Your Plugin Settings',
'Your Plugin',
'manage_options',
'your-plugin-settings',
'your_plugin_page'
);
}
function your_plugin_page() {
$mfile = include(plugin_dir_path(__FILE__) . 'build/js/menu-page/index.asset.php');
wp_enqueue_script(
'your-scripts',
plugin_dir_url(__FILE__) . 'build/js/menu-page/index.js',
$mfile['dependencies'],
$mfile['version'],
true
);
echo '<div id="render-root"></div>';
}
add_action('admin_menu', 'your_plugin_menu');
//This registers your admin menu and loads the React app inside it.Step 7: View the Output
Navigate to your plugin’s admin menu page. You should see: html
Welcome to My Plugin Dashboard // rendered beautifully inside WordPress.🎉Congratulations!
You’ve successfully embedded a React component into your WordPress admin page. This opens the door to building faster, more interactive plugin interfaces using modern JavaScript.
If you run into any issues or want to take this further—like adding hooks, REST API calls, or custom components—drop a comment or reach out. Let’s build something meaningful together