How to Use React with Drupal

04 December 20187 min

React is one of the most popular JavaScript frameworks among Vue, Ember, Angular, Node, and others. This library was created by Facebook and it allows developing great interfaces that are very useful and neat-looking. And Drupal is one of the most popular CMS’s, which allows you to build different types of websites, from small to complex huge ones.

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 end-points from your headless Drupal. It can also be embedded into 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 Teslaalready 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.

5 Reasons to Use React:

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;
React has a clean code abstraction which, leads to a better code understanding and reading;
React has 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.

Here, we will cover how 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 end-points in Drupal that will be data sources for the React app. Drupal 8 has a built-in full REST API, which makes this CMS a winner among other CMS’s. The documentation on this API is on the Drupal REST API page. The REST UI module allows you to make some new and clean adjustable end-points.

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

Adding 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 Drupal React module, you experience the greatness of components that you get to use, like registration, fields 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:

Save the js file with a proper name.
Determine the library that will combine your js file with your Drupal theme.
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 8 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:

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 end-point and push all the changes there and you’re all good.

Both of these tools - React.js and Drupal 8 - 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.

while(!(succeed=try()));