Last updated October 22, 2018

React is a JavaScript library that makes it easy to create interactive user interfaces. Drupal is a content management system with a powerful web services API. There are a couple of different ways that React and Drupal can be used together. This series of tutorials explores some of those options, and the related concepts and terminology.

Our goal is to provide you with some baseline information you can use to get started integrating React and Drupal together. After you've completed these tutorials you should be able to better envision how to use these two amazing technologies to solve some of your own issues. Additionally, we hope you'll come away from this with enough knowledge to start exploring further on your own. We link to additional resources liberally, and encourage you to explore beyond the examples we provide, read the linked resource, and dig in. There's no substitute for exploration, and experimenting with real code when it comes to learning these things.

Get an overview of React in our article 8 Things to Know About React for Drupal Devs.

In this series we'll cover:

  • An introduction to the technical side of React, terminology, and information about where to find more resources
  • Learn about using Drupal, and the JSON API module, to turn Drupal into a powerful web services API provider
  • Learn about the use-cases for adding React to a Drupal site
  • Walk through increasingly complex code examples that start with a "Hello World!" application, and end with a fully decoupled application that can list, create, update, and delete content in Drupal
  • Learn about how to authenticate a Drupal user via an API using React
  • Compare through example code and use-cases the differences between integrating React into an existing Drupal theme or module, and creating a stand-alone React application
  • And more...

Why React?

React is an open-source JavaScript library that lets you build interactive front-end interfaces. React has a large ecosystem of packages and tools to extend the base library, as well as an active community of users. And, if you've been following along with either the Drupal community or the front-end developer community over the last few years, you'll likely already know that there's a lot of excitement around React, and for good reason.

Did you know that Drupal is looking to adopt React to create a better user experience for site builders and content creators? While it's not set in stone yet, there's a good chance that in the near future knowing how to use React, and especially how to integrate it with Drupal, will become an important skill for Drupal developers.

For a high-level overview of React check out 8 Things to Know About React for Drupal Devs.

Then dive in and learn more in the React basics tutorial before learning to add React to an existing Drupal theme.

Why Drupal?

Drupal is a powerful content management system that makes it easy to create editorial workflows and interfaces that meet your specific needs.

For a high-level overview, especially in the context as a backend for React applications, check out An Introduction to Drupal for React Developers.

Then dive in and learn more about configuring Drupal to act as a web services API in Configure Drupal to Provide Data via JSON API, and how to Retrieve Data from an API with React.

Goal

Our goal is to introduce you to the fundamental concepts that you'll need to understand when using React and Drupal together. We don't answer every single question you might have (though feel free to let us know about your questions), or cover every possible way of doing things. Rather, we want to give you enough information about how all the moving parts work so that you'll be able to start experimenting and solving real-world problems ASAP.

The applications we build in these examples aren't the prettiest, or most complete. We've chosen to forgo things like adding lots of CSS and animations in order to keep things focused on the fundamental concepts. That said, we encourage you to take the code and improve it with CSS, animations, and better error handling. Then share it with us so we can see what you've come up with!

The tutorials

React Basics: In this tutorial we introduce some of the fundamental concepts of React -- including components, state, and ES6 -- and talk about some of the additional things you'll eventually want to learn as you get further into using React.

Decoupled vs. Progressively Decoupled: In this tutorial we explore the difference between fully decoupled and progressively decoupled applications. We'll explain what they are, and provide links to resources where you can further explore the advantages and disadvantages of both. Throughout this series we'll start by creating a progressively decoupled application where we use React within the context of an existing Drupal theme in order to provide some extra UX features. Eventually our application will read and write data via Drupal's API. As the code base becomes larger and more complex we'll look at how to create a stand-alone React application. Hopefully, going through the process of writing code that uses both of these methods will help you better understand which will work best for your use-case.

Connect React to a Drupal Theme: In this tutorial we'll create a "Hello World" React application and demonstrate how to connect that React JavaScript library, and our custom JavaScript code, to a Drupal theme using asset libraries.

Create a React Component: In this tutorial we'll create two new React components that, combined together, allow us to wrap the existing content of a node in a React application containing a button which can be used to toggle the visibility of the node's content. This is a great example of how you can use React to enhance an existing Drupal theme without having to go fully decoupled.

Configure Drupal to Provide Data via JSON API: In this tutorial we'll look at how to install and configure the JSON API module in order to allow Drupal to provide a web services API that we can interact with via React. This will allow us to retrieve things like a list of nodes from Drupal, and make use of that list in our React code. This can be useful when using React in conjuction with an existing theme, and is required when creating a stand-alone React application.

Retrieve Data from an API with React: In this tutorial we'll look at how JavaScript can be used to make HTTP requests and retrieve data from a web services API. Specifically, we'll talk about using the ES6 native Fetch API and fetch() function. We'll go over the anatomy of a fetch request, and also discuss alternatives and when they might come in handy.

Use React to List Content from Drupal: In this tutorial we update the React application we started earlier to use the JavaScript Fetch API to retrieve a list of nodes from Drupal's API, loop over the items in the list, and display them with React. This is a good example of how you can work with data either from Drupal, or an external API, to provide unique user experiences.

Add, Edit, and Delete Drupal Nodes with React: In this tutorial we lay the groundwork for an application that can not only list, but also create, update, and delete nodes via Drupal's API. This involves different types of HTTP requests and a whole list of new React components. This tutorial also talks a bit about authentication, and how embedding a React script into an existing Drupal page differs from a stand-alone application when it comes to making authenticated requests. This provides the architecture, and sets the stage, for the application we'll build in the next tutorial.

Build an Interface to Edit Nodes with React: In this tutorial we'll combine everything we've learned up to this point in order to create a React application that allows a user to create, read, update, and delete content. This version is still embedded into an existing Drupal page. It might not be super practical, but it does a good job of demonstrating how a React application is structured, as well as more complex API requests.

Create a Fully Decoupled React Application: In this tutorial we change gears and start work on creating a fully decoupled React application.

Start with create-react-app: In this tutorial we'll use create-react-app to scaffold a new fully decoupled React codebase. And optionally learn how to integrate that into a Drupal theme or module.

Make API requests with OAuth: In this tutorial we'll learn how to configure the Simple OAuth Drupal module and use a password grant flow to create authenticated API requests.

Use Fetch and OAuth to Make Authenticated Requests: In this tutorial we'll add a login form to collect a username and password. Then exchange those for an OAuth access token. And finally update existing fetch requests to use the OAuth access token.

Extend React with Google Material UI: In this tutorial we'll use yarn or npm to add third party JavaScript libraries to your project. In this example we'll add the Google Material UI package which contains UX components that can incorporate into our application to give it a more Material UI like feel without having to write much additional code.

Further your understanding

  • Decoupling Explained
  • List some things that you think could be made better on your site by adding some additional interactivity to them.
  • Are there things about your user experience that could be made better by removing the need for a page refresh?

Additional resources