How to Combine React with Drupal

For the uninitiated, React.js, or simply React is an open-source JavaScript library used for creating user interfaces. Over time, it has gained massive popularity due to its incredible performance and efficiency. Interestingly, Facebook is behind the development and management of React. Coming to Drupal, it is a cutting-edge content management system (CMS) that is widely used for website and application development. It is also open-source and is world-renowned for its remarkable flexibility, scalability, and customization capabilities. Due to the massive appeal of the CMS, there are a lot of Drupal development companies today. 

At times, developers just want to bring the two marvelous technologies together to render a quick and smooth frontend based on React.js and a sophisticated backend based on Drupal. This blog talks in detail about various methods for bringing React with Drupal. First, let’s explore headless Drupal against embedded React.

Headless Drupal Against Embedded React

When you start traversing the path of combining React with Drupal, the first choice you are required to make is between a headless Drupal approach and adding a React app to your Drupal site. If you follow the headless Drupal approach, Drupal serves as the backend and React serves as the only user interface. In case you follow the other approach, the Drupal templating engine will render your React app. 

Headless Drupal and React Frontend

In this particular case, Drupal acts as a backend for a React-based front-end application. Both systems are independent of each other and communicate through HTTP. If you wonder how to decide if this approach is the best for you, the following points can help you make an informed decision.

This approach will be ideal for you if you aspire to:

●    Build a captivating Progressive mobile app for mobile users.

●    Develop a single-page app that leverages Drupal for data storage

●    Make an easy-to-use access point to a subset of a large system based on Drupal. For instance, if you have a team of local agents visiting local stores and sending screenshots of merchandise displays, they may just need an easy-to-use interface instead of having to deal with the complexities associated with the entire Drupal system. 

●    Create a smaller website that leverages the data of a big website. 

Developing a Headless Drupal App

If you have opted for creating a headless Drupal app, you’ll also have to create a separate React application that leverages HTTPS requests to communicate with the backend. With such an arrangement, React is only concerned with being able to use the exposed API and doesn’t bother about the backend at all. 

Facebook’s incredible boilerplate React project can act as a beacon for you and help you start.

While the React app is running, you have to generate endpoints in Drupal that can serve as data sources for the React application. You’ll be glad to know that Drupal 8 is power-packed with a full REST API. You can find the respective documentation on the Drupal REST API documentation page. You have to particularly look for the REST UI module as it empowers you to generate configurable and clean endpoints for various entities. 

In case you wish to leverage GraphQL, you can tap into the unfathomable potential of the GraphQL module and create GraphQL endpoints. 

Now, after discussing the development of a headless Drupal application, it is time for us to delve into building a React app embedded in Drupal.

Creating a React App Embedded in Drupal

There is no need for a full headless Drupal execution when you only need one or two highly interactive elements on some pages of your business website. This is because it might be a very complicated process involving many steps. Under such circumstances, it is better to opt for the alternative approach that involves using React.js for the development of an embedded component in a page Drupal serves. This empowers you to leverage the potential of Drupal everywhere including rendering of fields, views, and registration. 

Are you curious to learn the process for embedding a React app in Drupal? If the answer is yes, without further ado, let’s discuss it.

Embedding a React App in Drupal- the Cutting-Edge CMS

To begin with, you have to add the React library to your valuable business website. The process is similar to how you would add any JS library to your site. Remember that there are a number of ways of adding a JS library. You can choose a preferred way depending on whether you require the script on all pages or it forms a part of a module or theme. You can consult the following documentation for further details:

1.https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module

2.https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

You can also try a quick method that is appropriate for testing purposes. It involves adding script tags to html.html.twig in your respective template. 

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

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

And implement the following for your script with the application.

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

It is imperative to note that embedded apps come with a limitation - you cannot use any other language except JavaScript. JSX, Typescript, and others can be used with a headless app but not with an embedded application. The primary reason why it is so is that in a complete react app, Babel or Webpack performs the task of transpilation of TypeScript or JSX into JavaScript (JS). 

Expert tip: In order to leverage JSX, it is crucial for you to employ Webpack to compile the JS file and add it to Drupal. According to experts, a good approach would be to utilize the create-react-app repo to begin and then simply copy the JS file obtained after transpilation and embed that. If you execute this process, there will be no need for you to embed the react.js file separately as it will directly get bundled during transpilation. As it is quite complicated to do the setup for an auto refresh to work and for the file to get copied to Drupal, we are skipping it.

Continuing with what we were discussing earlier, the thing you have to do first is to generate an HTML tag in your markup and create a space for your React application to live. Depending on your preferences, it can be a custom controller on an independent route or a div rendered in a block. 

<div id="myreactapp" />

Create your app in myractapp.js

ReactDOM.render( 
React.createElement(MyApp, {title: 'Hello World!'}),   
document.getElementById('myreactapp'); 
);

Once you are done with the above process, your Drupal page will have a React app embedded in it. You can effortlessly receive data for it by leveraging a REST API. This is similar to how you would get the data in the case of the Headless example. Besides, you can also use the DrupalSettings global for the initial data set.

function Welcome(props) {  
if(props.isfront == true) { 
return <h2> Welcome on front page<h2>
} 
else{ 
return <h2> Welcome on another page </h2>
} 
ReactDOM.render( 
React.createElement(Welcome, {isfront: drupalSetting.path.isFront}),

document.getElementById('myreactapp'); 
);

Now it’s time to provide you with the final expert tip - Whenever you aspire to save changes to any Drupal data, you’ll need to generate an endpoint and push the changes there.

So, has this blog made combining React with Drupal a piece of cake for you? We hope the answer is yes and it’s time for us to wrap up what we have discussed by far.

Let’s Wrap Up

React is an incredible open-source JavaScript library that assists in the development of user interfaces. Drupal is a top-notch content management system designed for application and website development. If you are a developer, you may be required to combine React with Drupal for some projects. The above-mentioned processes can make it effortless for you. If you face any challenges while executing them, you can contact LN Webworks- a reliable Drupal company. Our proficient team of developers is adept at combining React with Drupal. So, reach out to us whenever you need any assistance.