How to Use React with Drupal

Last updated on January 29, 20247 min
Eduard Grigalashvili
Technical Writer
Oleg Bogut
Drupal Tech Lead

React is one of the most popular JavaScript frameworks among Vue, Ember, Angular, Node, and others. Created by Facebook, this JavaScript library allows one to develop great user interfaces that are very useful and neat-looking. And Drupal is one of the most popular content management systems, which allows you to build different types of websites, from small to complex.

Using React and Drupal together is not a new thing, but it definitely will provide you with a good result. The backend of your website will be based on Drupal and the frontend will be based on React. So the typical Drupal website theme layer will be replaced by React.

You can implement React.js in various ways. It can be an independent application that uses API endpoints from your headless Drupal. It can also be embedded into the Drupal frontend and you can change some parts there.

You may be asking – why React?

It’s way easier to build a frontend part with React than with Drupal theming. React also provides more interesting and useful user experiences that perform better. Instagram, Skype, and Tesla already use React. And, last but not least, you can use other services that are not connected to Drupal with React, which gives you an opportunity to extend the features of your app. As a company that specializes in Drupal development as well as React development services, AnyforSoft would like to show you how to use Drupal and React together for maximum benefit!

Introduction to React and Drupal

Before we explain how to create a React project based on Drupal CMS, let's briefly introduce React and Drupal.

React

React is a JavaScript library used for building user interfaces, particularly for creating dynamic and interactive web applications. Developed and maintained by Facebook, React employs a declarative approach, allowing developers to efficiently describe the UI's state, with components serving as the fundamental building blocks. Its virtual DOM system enhances performance by optimizing updates. React is commonly employed in the development of single-page applications (SPAs) and emphasizes component-based architecture, fostering reusability and modularity in code.

Drupal

Drupal, on the other hand, is a content management system (CMS) geared towards website and application development. Known for its modular architecture, Drupal facilitates the extension of functionality through modules. It excels in content management, offering a user-friendly system for creating, updating, and organizing content. With features like user roles, permissions, and a taxonomy system, Drupal is well-suited for content-driven websites, community platforms, and enterprise solutions. Integrating React with Drupal in a headless or decoupled manner allows developers to leverage the strengths of both technologies for a versatile and robust web development solution.

5 Reasons to Use React for Your Drupal Site

Why use React and Drupal together? Well, we can give you at least five reasons:

  • React has reusable components that are like Lego pieces. You create different small parts of your website such as buttons, boxes, dropdowns, etc., and then you add some bigger components and so on;
  • Another reason to integrate React is that this JavaScript library for building frontend has a clean code abstraction, leading to a better code understanding and reading;
  • By integrating React, you will get access to great developer tools that are very helpful;
  • React is relatively easy to learn and gives you great opportunities to bring your app to another level;
  • React uses a virtual DOM. It makes the application run faster and more smoothly.

In the following paragraphs, we will cover how to use React with Drupal.

5 reasons to use react with drupal

Headless Drupal and React Frontend

The first thing you need to decide is whether you will use a headless Drupal, which is when you use Drupal just for the backend, with React as the frontend application. React will be the only thing that the user of your website will see.

Both systems are independent and separate, but they communicate with the help of HTTP like REST or GraphQL.  

Consider using this option if you want to make:

  • a Progressive Web App (PWA) for mobile device users;
  • a single-page application that stashes all data in Drupal;
  • an access point to your system built on Drupal;
  • a smaller web page that displays selected data from the main website, for example, current issues from some big magazine.

How to Create a Headless Drupal App

When you are using React with Drupal, you need to build an independent React app that connects to the backend via an HTTP request. React just needs to use the exposed API and it doesn’t really care about anything else.

Facebook has a great boilerplate React code to help you get started, which you can find here on Github.

While your React application is on, you have to create some endpoints in Drupal that will be data sources for the React application. Drupal has a built-in full REST API, which makes this CMS a winner among other CMSs. The documentation on this API is on the Drupal REST API page. The REST UI Drupal module allows you to make some new and clean adjustable endpoints.

You can also use GraphQL to develop your website since this module allows you to build GraphQL endpoints.

How to Add React to Drupal

Sometimes, you don’t need the whole React module for your webpage development. It’s easier to get some specific interactive UI elements from React.js that run smoothly. Without React, this process can be a bit long and painful. All the work is already done for you and you just need to use the tools that are out there.

When you use the Drupal React module, you experience the greatness of components that you get to use, like registration, field rendering, views, etc.

How to Add Drupal React.js Module

So the first thing to do is add the React library to your Drupal webpage, in a way you add any other js library (for example, a jQuery library or any other that does all the magic you need). You need to use different approaches if you want to use React on every page of your website or just on a single page.

Here is a step-by-step description of how to embed React.js.

In order to load the React.js module:

  1. Save the JS file with a proper name.
  2. Determine the library that will combine your JS file with your Drupal theme.
  3. Add the library to the webpage via a render element in a preprocess function.

To define a library, you should add a *.libraries.yml extension to the name of your theme folder. For example, if your theme name is “first”, then it should be first.libraries.yml. The important files such as slider codes and different interaction things will be saved there.

Drupal doesn’t apply the library to all pages by default. Just declare the dependency with the extension name, then a slash and the library name, as follows:

  js/slider.js: {}
  dependencies:
    - core/react

If you want to attach a library to all web pages you have, you need to use a global-scripts asset library.

global-scripts:
  version: 1.x
  js:
    js/navmenu.js: {}

You also need to add *info.yml to your theme, e.g., first.info.yml.

Sometimes, you don’t need the library to work on all pages, but you need it to be active when some block is being shown, etc. For this, you need to use a themename_preprocess_hook() function where you change the “themename” to your actual name of the theme and “hook” to the name of the theme hook. For instance, if your hook’s name is "maintenance", then the whole thing will look like this:

function first_preprocess_maintenance(&$variables) {
  $variables['#attached']['library'][] = 'first/slider';
}

You may also want to use a quick method for all of that, but that is not recommended. It will definitely work for testing. Just add this script code to html.html.twig to your template:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

And add your own script as well, e.g.:

<script src="/paht/to/my/scripts/myreactapp.js"></script>

There is one very important thing with all that. The only coding language that you can use is Javascript. You cannot use TypeScript nor CoffeeScript. Yes, they can be helpful for creating the headless app, but not in this case. This is because the finished React app is transpired by the Webpack or a similar module bundler from the TypeScript or CoffeeScript into JavaScript.

If you want to use a coding language like TypeScript or CoffeeScript, you just need to use Webpack and compile the JavaScript file. Then, you can add it to your Drupal. But it’s better to omit this strategy, especially if you are not qualified enough yet.

That’s it. Don’t forget to create the endpoint and push all the changes there and you’re all good.

Both of these tools - React.js and Drupal - are excellent. They are not so difficult to use and they don’t have problems with browsers at this point. In the long run, you will have a great and very satisfying result. Use the form below to contact our manager or click here to schedule a call.

Want to work with us?

Looking for a Drupal team?

Build your product with the industry leader

Talk to us!
Looking for Drupal solutions?