Clone a scaffolding module, then install & configure the custom module to build a React block. Understand the build process for developing a React app within Drupal. Use Redux in the React app. Get data out of Drupal into the React app. Make your own working React block module derived from the scaffolding module. Speaker(s): jodyYou don't have to go fully headless to integrate React into your site. You can use it for a page, a section, a content type, or a page compon.
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.
Watch the Recording Online
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.
Make people awesome
A motivated, committed and efficient team: at Happy Coding, the human being is more than a resource, it's a set of relationships and interactions that we build together.
We pay particular attention to the well-being of our employees and provide them a fulfilling, stimulating and rewarding working environment: training, flexible working hours, participation in events, team-building, soft skills development...
Get the ball rolling
The understanding and success of your project depends on our reactivity, our proximity and the methods applied to facilitate interactions.
Drupal React Block
This is why we focus above all on the human relationship with our customers to precisely identify your needs to best meet them.
Drupal React Theme
We also assist them on blocked projects, by clarifying strategic points and providing systemic solutions.
Deliver value continuously
Development is a continuous process of improvement and adaptation to meet the real needs of end-users.
In this perspective, and iteratively, we regularly deliver high value-added functionalities at different key moments of the project to ensure that the product meets your expectations.
The long-term safety and maintainability of your project is ensured by compliance with good practices and quality controls.