If you’re wondering how to use @wordpress/element in WordPress, you’re in the right place. WordPress already ships with its own React abstraction, @wordpress/element, which lets you build powerful React-based themes and plugins without installing React or ReactDOM separately. In this guide, we’ll walk through a complete setup using Webpack and Babel to create a lightweight React frontend that’s fully compatible with WordPress.
When building React features, developers often install React via npm — but that can cause version conflicts. Instead, learning how to use @wordpress/element in WordPress ensures your code stays lightweight, compatible, and aligned with WordPress core.
Installing React and ReactDOM as npm dependencies makes your project heavier and can even cause version conflicts with the React that WordPress already ships.
But here’s the good news: WordPress already includes React under the hood via its own wrapper library called @wordpress/element.
By using @wordpress/element, you can:
✅ Reduce dependencies
✅ Prevent React conflicts
✅ Ensure compatibility with Gutenberg and the WordPress ecosystem
In this guide, we’ll build a simple React-powered frontend inside a WordPress theme using @wordpress/element, Webpack, and Babel — without installing React separately.
🧠 What Is @wordpress/element and How to Use It in WordPress?
Normally, you’d install React like this:
npm install react react-dom
But in WordPress development, that’s unnecessary (and risky).
Instead, you use @wordpress/element, which is just a WordPress abstraction layer around React and ReactDOM. It uses the core React instance already bundled with WordPress.
| Feature | react + react-dom (npm) | @wordpress/element |
|---|---|---|
| Redundant React installs | ✅ Risk | ❌ Avoided |
| Native to WP | ❌ | ✅ Yes |
| Optimized for Gutenberg | ❌ | ✅ Yes |
| Plugin/theme friendly | 😬 | ✅ Compatible |
📁 Folder Structure for Using @wordpress/element in WordPress
Here’s what our WordPress theme will look like:
/my-theme/ ├── assets/ │ └── js/ │ └── index.js ├── dist/ │ └── bundle.js ├── functions.php ├── header.php ├── footer.php ├── package.json └── webpack.config.js
🧰 Step 1: Install Packages to Use @wordpress/element in WordPress
No need for React or ReactDOM. Just install @wordpress/element and build tools.
npm init -y npm install @wordpress/element npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
📦 Step 2: Babel Configuration
Create a .babelrc file in your theme root:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
This allows us to use modern JavaScript (ES6+) and JSX.
⚙️ Step 3: Webpack Config
Create webpack.config.js:
const path = require('path');
module.exports = {
entry: './assets/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
mode: 'development'
};
👉 The externals section is key — it tells Webpack not to bundle React or ReactDOM, because WordPress will load them via @wordpress/element.
✍️ Step 4: Usage in React
🧠 Note: The /** @jsx createElement */ pragma tells Babel to use WordPress’ createElement instead of React’s.
/** @jsx createElement */
import { createElement, render } from '@wordpress/element';
const App = () => (
<div>
<h2>Hello from @wordpress/element + JSX 🚀</h2>
</div>
);
window.addEventListener('DOMContentLoaded', () => {
const root = document.getElementById('react-root');
if (root) {
render(<App />, root);
}
});
🔨 Step 5: Build the App
Add this to your package.json :
"scripts": {
"build": "webpack"
}
Run:
npm run build
Your compiled app will appear in dist/bundle.js.
🎯 Step 6: Enqueue Script in WordPress
In functions.php:
function my_theme_enqueue_assets() {
// Load WP's React wrapper
wp_enqueue_script( 'wp-element' );
// Load your compiled app
wp_enqueue_script(
'my-react-app',
get_template_directory_uri() . '/dist/bundle.js',
array('wp-element'),
filemtime(get_template_directory() . '/dist/bundle.js'),
true
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');
This ensures WordPress loads its own React first, then your bundle.
🧩 Step 7: Add a React Root
In your header.php (or anywhere you want the app to appear):
<div id="react-root"></div>
Now your React app will render inside that div.
✅ Done! You’ve Learned How to Use @wordpress/element in WordPress 🎉
When you refresh your WordPress site, you should see:
Hello from @wordpress/element + JSX 🚀
🧠 Bonus: Using Hooks in WordPress React
Yes, you can use hooks like useState and useEffect — straight from @wordpress/element:
/** @jsx createElement */
import { createElement, render, useState } from '@wordpress/element';
const App = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
window.addEventListener('DOMContentLoaded', () => {
const root = document.getElementById('react-root');
if (root) {
render(<App />, root);
}
});
🔐 Why Use @wordpress/element?
- 🚫 No duplicate React installations
- ✅ Native to WordPress core
- ⚡ Smaller bundles
- 🧩 Compatible with Gutenberg and custom blocks
Now you know exactly how to use @wordpress/element in WordPress to build React-powered apps inside themes and plugins. This approach keeps your bundles small, avoids dependency issues, and ensures compatibility with Gutenberg.
It’s simply the cleanest way to build React features inside WordPress themes or plugins.
👉 That’s it! You’ve just built a React frontend inside WordPress without React NPM dependencies.
👉 Submit your request now and let’s start building your dream eCommerce store.
📧 Have questions before you start? Visit our Contact Page
🌐 Browse our full range of services at codersgrow.com
🛍️ Check out our Store for ready-to-use solutions
📖 Explore our Blogs for insights, tips, and industry updates