Starting with WordPress 5.0, React is made available as a dependency we can load in our WordPress themes and plugins.

In WordPress, React is abstracted into a library called Element

When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element.  This is a little different from how we would normally make React a dependency in our project.  In WordPress, we will access React via the global window object.

NOTE: Before getting into how this is done, make sure that you have the proper babel and build configurations setup to be able to process the React and JSX code you will write.

Making React a Dependency in a Theme

Making React available in a theme is as easy as adding wp-element as a dependency to our JavaScript files enqueued with the normal wp_enqueue_scripts hook.

add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {

	wp_enqueue_script(
	  'my-theme-frontend',
	  get_stylesheet_directory_uri() . '/js/theme.js',
	  ['wp-element'],
	  time(), // Change this to null for production
	  true
	);

}

Once we do this we will have window.wp.element available in our JavaScript.  This contains the ReactDOM render() function as well as createElement() if you wanted to write React without JSX.

So, we could write something like this in our theme.js file we enqueued above.

const Hello = () => <p>Hello World</p>;
wp.element.render(<Hello />, document.getElementById("content") );

This wouldn’t do much.  It would display Hello World inside of any markup in our theme with an ID of content.  For your theme you will need to make sure you have the correct HTML element selected to render your React code into.

However, you now have React loaded and can write React now just like you would outside of WordPress.

Making React a Dependency in a Plugin

The code we use for making React available in a plugin is quite similar to the theme.  We simply, make wp-element a dependency for our plugin JavaScript.

The code below shows how to make React available on both the frontend and in the admin area for a plugin.

add_action( 'wp_enqueue_scripts', 'my_enqueue_plugin_js' ); // Loads on frontend
add_action( 'admin_enqueue_scripts', 'my_enqueue_plugin_js' ); // Loads in admin area

function my_enqueue_plugin_js() {

	wp_enqueue_script(
	  'my-plugin-frontend',
	  plugin_dir_url( __FILE__ ) . 'js/plugin.js',
	  ['wp-element'],
	  time(), // Change this to null for production
	  true
	);

}

This would allow us to have access to the ReactDOM render() method just like in the theming example.  You can now add very simple or quite complex React code in your plugins.

Here is what that might look like in our plugin.js file enqueued above.

const Hello = () => <p>Hello Plugin React!</p>;
wp.element.render(<Hello />, document.getElementById("my-app") );

Like this previous example, this would not do much.  It would simply find an HTML element with the id my-app and allow you to render into that whatever React you want to write.

Using React in Your WordPress Themes and Plugins

As mentioned, at the beginning of this article, you must have the proper development tools processing your JavaScript if you want to write JSX.

However, once you have that setup, you can easily write simple or advanced React UIs on the frontend of a WordPress site via a theme or plugin or in the admin area with your plugins.