How (and Why) to Embed React in WordPress and Drupal

You’ll often see React used to build whole web applications (aka a Single Page Application), but React can also be sprinkled on an existing page.

React is excellent at managing state. When there is a distinct, highly interactive, and state-heavy feature, embedding a React app in a CMS template to manage that state can be an efficient approach. Otherwise, we generally lean towards using actual templating languages. Twig is our favorite. It’s built into Drupal and available via Timber for WordPress. 

For features requiring a whole lot more interactivity than a simple modal, menu, or form, and for features that don’t directly affect SEO, React is a great choice.

Let’s get into it. By the end of this article, you should understand the WHAT and the WHY of embedding React into a server-side template.

Embed react in ANY website:

React essentially is javascript manipulating a single HTML element. The process for embedding React is to:

1. Add the element to the page. 
2. Add the script targeting the element to the page.

Generic instructions for adding the script and element to the page can be found in React’s beta docs: Add React to a Website.

Code

"use strict"
function MyReactCounter() {
  const [count, setCount] = React.useState(0);

  return React.createElement(
    "div",
    null,
    React.createElement(
      "button",
      { onClick: () => setCount(count + 1) },
      "Click me! The click count is:  " + count
    )
  );
}
const rootNode = document.getElementById("my-react-app-root");
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(MyReactCounter));

Try it for yourself

If you click the above, you'll see React state in action. This is the simplest implementation. Usually, you'll want to use JSX, which requires preprocessing the script, so the browser knows what to do with it. But the gist of how to embed React is the same: add an element to the page and then target that element with your React script.

The following instructions are specific to WordPress and Drupal – they show best practices for adding scripts to these popular CMSs.

1. Add an element to a template:

<?php echo "<div class='my-react-app-root'></div>";  ?>

2. Add the scripts using wp_enqueue_script:

wp_enqueue_script( ‘react’, “https://unpkg.com/react@18/umd/react.production.min.js”, [], false, true );
wp_enqueue_script( ‘react-dom’, “https://unpkg.com/react-dom@18/umd/react-dom.production.min.js”, [], false, true );
wp_enqueue_script( ‘my-react-app’, “js/my-react-app.js”,[‘react’, ‘react-dom’], false, true );

Take care to only enqueue these scripts on pages with your React app.

1. Add an element to a Twig template. At Savas, we often build Drupal sites using Paragraphs, so my Twig template might look something like this:

In paragraph--my-react-app.html.twig

<div id="my-react-app-root"></div>

2. Register the library as you would any other script in either your custom theme or custom module *.libraries.yml file:

my_react_app:
  version: 1.x
  header: false
  js:
    //unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js: { type: external }
    //unpkg.com/react-dom@18/umd/react-dom.production.min.js: { type: external }
    js/my-react-app.js: {}

3. Attach the library to the paragraph, either via preprocess function, or within Twig:

{{ attach_library('your_module_or_theme/my_react_app') }}

<div id="my-react-app-root"></div>

That covers the very basics! For a real project, you’ll likely want to use a compiler so you can take advantage of JSX, but hopefully this shows you the basics of embedding React in WordPress or Drupal.