How to Use React with Drupal?

For this reason, it allows you to create eye-appealing, interactive and fast interfaces that users will like. Drupal, on the other hand, is a very fast and editable CMS.

In this article, we will talk about two different combinations of these two technologies.

Headless Drupal - Embedded React Comparison

First of all, we can talk about two different options when using React with Drupal. The first one is the option where Drupal is only on the backend side and React creates the entire frontend. In this case, all the structures used for the frontend must be translated into an application with React. As a second option, we can place a React application anywhere in Drupal. We will be detailing these two options in the rest of the article.

Headless Drupal & React Frontend

In this scenario, Drupal is used on the backend side and works independently from its own interface. React creates the entire frontend. The systems are exactly the same. JSON:API or GraphQL communicates via REST.

• You can create a Progressive Web App (PWA) for users on mobile devices.
• You can create a single page application that stores data in Drupal.
• Suppose you have a large CRM system built on Drupal and you have agents who want to manage your local stores. These agencies may need an interface for CRM management that they can use without confusion. In this case, you can use Headless Drupal & React Frontend for an interface just for their needs.
• You can create a smaller website that pulls some data from a large website. For example, you can show only news from certain categories of a large news magazine.

How to Create Headless Drupal?

If you chose Headless Drupal, you need to create a separate React application that communicates with HTTP requests. Since React doesn't care what happens on the backend side, it should be enough for the API to work properly.

Facebook has created a React project to help you get started. (React Starter Project) 

You can communicate Drupal 8 and React to be Headless Drupal using one of the following ways.

1. (Recommended) Be sure to take a look at the JSON:API module. With this module you can create clean endpoints for entities through the interface. Also, this module is included in Drupal 8.7 and above, just activate the module to use it. (JSON:API Document)
2. If you want, there is also a GraphQL module under development that you can use in Drupal connection with React. (GraphQL Modul)

If you want to see a sample Headless Drupal project, don't forget to take a look at ContentaCMS. You can also view the ContentaCMS React version here.

React Application Embedded in Drupal

You don't always need a Headless application. But sometimes you may want highly interactive elements on some pages. In this case, it makes much more sense to create a component like this and use React.js embedded in a page created on the Drupal side.

How to Create a React Application Embedded in Drupal?

Firstly, you should add the React library to your site. (Just like you would add any other js library.) There are ways you can add a js library to your website, depending on whether the script is required on every page, part of a theme or module. You can find the details from the two links below.

1. Add JavaScript to Your Theme or Module
2. Adding Stylesheets (CSS) and JavaScript (JS)

There is a method that is not recommended but can be run for test purposes faster than the above method. You can add the following lines between the head tags in the html.html.twig file.

<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>

You should also add the file of your application just below the code above as below.

<script src="/path/to/my/scripts/benim-react-uygulamam.js"></script>

Then you need to add the html tag to any Drupal page so that your React application can be processed on the interface side.

<div id="benim-react-uygulamam" />

In my-react-application.js file, you need to create your application, you can find an example in the code below.

ReactDOM.render(
React.createElement(MyApp, {title: 'Merhaba Dünya!'}),
  document.getElementById('benim-react-uygulamam');
);

Now you are ready, you have a React application embedded in a Drupal page. However, you can either get data from the REST API like in the Headless Drupal example, or you can use the drupalSettings global variable as your first dataset.

function Welcome(props) {
 if(props.isfront == true) {
return <h2>Anasayfaya hoşgeldiniz<h2>
}
else{
return <h2>Diğer sayfalardan birine hoşgeldiniz</h2>
}
ReactDOM.render(
React.createElement(Welcome, {isfront: drupalSetting.path.isFront}),
    document.getElementById('benim-react-uygulamam');
);

Note that if you want to make changes to any data in Drupal, you still need to use an API and pass the changes there.