Integrate Drupal 8 with React Material-UI

Introduction

As we know Drupal has many cool features. One of them is JSON: API. Through JSON: API we can get a list of API resources.

The purpose of this blog is to show how we can integrate Drupal 8 with React Materialize in three simple steps.

Before creating an API, it is vital to discuss the Drupal backend process.

For this, you'll need the JSON:API module. JSON: API is now part of Drupal core. So we only need to enable it. For more details please refer: JSON: API

Next navigate to admin > content. Click on add content and create articles.

Image source: Photo by Virginia State Parks via Flickr and Pixabay

Step 1 - Create a Drupal API

Step 2 - Use the Materialize component in React

Check https://create-react-app.dev/docs/getting-started/

Step 3 - Next, call Drupal API from React.

App.js

Image.js

Now you can successfully call Drupal API from React.

Next, let's discuss UI creation.

In this blog, we are creating React Materialize Card using Drupal API. For creating card we need card related components and icons.

Let's import these Material-UI components in React files.

App.js

Image.js

Next use these components inside render function of React files.

App.js

Image.js

The cool thing is we have seen how we can call Drupal API from React like any other API and use Material-UI components. With the help of Material-UI, we can include styles without writing CSS in a specific file.

Note: If you use the absolute URL of the localhost then you will get CORS related console error. Make sure that you use a relative URL if you are calling API from the localhost.

One way to resolve CORS error is by adding proxy in package.json.

package.json is used to add dependency packages and versions to your projects. For more details, you can refer - https://docs.npmjs.com/creating-a-package-json-file

I hope this was helpful and interesting! You can view the complete code here: https://github.com/Sumit55/Drupal-and-Materialize-React

Good luck!