Drupal React


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.

React is a JavaScript library that makes it easy to create interactive user interfaces. Drupal is a content management system with a powerful web services API. There are a couple of different ways that React and Drupal can be used together. This series of tutorials explores some of those options, and the related concepts and terminology. React is a JavaScript library that makes it easy to create interactive user interfaces. Drupal is a content management system with a powerful web services API. React and Drupal can work together in a couple of different ways. This series of tutorials explores some of those options, and the related concepts and terminology.


Drupal Reactphp

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!

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


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.


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

More Questions?

Drupal react

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 Reactjs

Drupal React

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.

Drupal React

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.