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!
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
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.ymlfile to your custom module or theme. You can also use JS Component in a custom module by including a boilerplate
.js_component.ymlfile to define your individual JS components.
- 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.ymlfile 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.ymlfile 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.
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?
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.
Here’s a link to an example code repo: https://github.com/AtenDesignGroup/js_component_examples
We’d love to address your questions in the comments section below.