How to Use @wordpress/element in React

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