Decoupled Drupal: React and Drupal Workshop

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.

In this hands-on workshop we’ll 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.

By the end of this workshop you’ll have a better understanding of how to integrate React and Drupal -- either by adding React to an existing Drupal theme or module and creating a progressively decoupled application, or through a fully decoupled application that uses Drupal for the backend and a create-react-app based React front end.

What you’ll learn in this workshop:

  • An introduction to the technical side of React, terminology, and information about where to find more resources
  • Drupal’s JSON API module, and how to work with the REST API it provides
  • The use-cases for adding React to a Drupal site
  • How to read, write, update, and delete Drupal content via React code
  • Ways to authenticate a Drupal user via an API using React
  • Compare the differences between integrating React into an existing Drupal theme or module and creating a stand-alone React application through example code and use-cases

We’ll focus primarily on the intersection between React and Drupal with a goal of giving you the information you need to start integrating your React framework of choice (Gatsby, Next.js, create-react-app, etc.) with Drupal.

Target audience

Developers who want to learn how to integrate React into a Drupal theme, or write stand-alone React applications that interact with Drupal.

Assumptions

  • You already have a basic understanding of Drupal administration and are comfortable with doing things like creating content and users, installing modules, and configuring your application
  • You can run Drupal on a local development environment
  • You already know JavaScript. Knowing React isn’t a requirement to take this workshop, but you’ll likely get more out of it if you’ve at least been through the official Intro to React tutorial.