Integrating React with Drupal

A few weeks ago I hosted a webinar about integrating React with Drupal as a part of the Aten at Home Webinar Series. Here’s a quick recap of what we covered, and a recording of the session. Thanks to everyone who participated!

Jump to the video.

Background Concepts

React vs Other Javascript Frameworks
While the webinar focuses on React, the concepts apply to other Javascript Libraries or Frameworks as well.

Progressive Decoupled vs Fully Decoupled
This webinar focuses on embedding apps within specific regions of a webpage, rather than building entire websites as stand-alone React apps.
Related reading: When to Consider Decoupled Drupal

JS Component vs Other Methods
There are a number of ways to integrate Javascript with Drupal. This webinar focuses on JS Component, a new developer-focused module for easily embedding Javascript applications within Drupal-rendered pages.

What We Covered

• For Progressively Decoupled Drupal 8 sites, I recommend using the JS Component module. You can find documentation and examples on the module page.
• Once the module is installed there is no user interface. You use JS Component by adding a .js_component.yml file to your custom module or theme. You can also use JS Component in a custom module by including a boilerplate .info.yml file and .js_component.yml file to define your individual JS components.
• The .js_component.yml file leverages the libraries directive and works very similarly to attaching libraries in Drupal. However, JS Component allows you to define/create a single or multiple Javascript components and with those components you define the JS and CSS dependencies.
• Once you create a JS component you’ll be able to add your React app as a block and manage it the same way you would other Drupal blocks: with Layout Builder, from the Manage blocks page, as a paragraph using the Block Field module, or with code in a twig template file.
• In the .js_component.yml file you can define the root_id and mount your React/JS app to a unique ID on the page. This means you can add multiple React/JS apps to the same page without worrying how they all will mount to the same ID.
• Also within the .js_component.yml file you can add custom settings that will be available to the React/JS app via the window settings object. These custom setting values are fields available when adding the block to the page. For example you could add a select field that changes the theme for a React app.

Watch the Recording Online

Q&A

How can I configure JS Component to load externally hosted JS files?
Since the JS Component module is using the Libraries directive it works the same where you can use external libraries/files. Here’s a link in the Drupal docs that covers this.

How is JS Component different from the Drupal Libraries API?
JS Component uses the libraries directive and adds additional functionality. For example, creating a JS Component exposes your app as a block, making it easier to place your app anywhere on your site using existing Drupal layout tools (Layout Builder, Manage Blocks screen, etc.). Also it gives you the ability to to add custom settings that can be passed down to your app. Finally it also creates a consistent and organized way to add React/JS apps.

Does each component have its own namespace in drupalSettings? that is - if you had 2 blocks they could each have their own react_title for example
Yes, each component is name spaced using their component id.

Is there a postbuild for windows?
I don’t develop using Windows, but I would assume you could use the Linux subsystem and it should work.

What’s the future of the JS Component?
The primary goal for JS Component is to make it incredibly easy to embed Javascript applications within the context of Drupal-rendered pages. As Drupal becomes even more flexible with tools like Layout Builder and support for RESTful applications, look for even more powerful data providers in JS Component to integrate Drupal with your embedded Javascript applications.

Have you experienced any challenges using the JS Component module?
Since the data in the window object is not immediately available to the React/JS app, you need to create a function that waits for the data to be ready before you can rely on using it.

Resources

Here’s a link to an example code repo: https://github.com/AtenDesignGroup/js_component_examples

More Questions?

We’d love to address your questions in the comments section below.