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 technologies to solve some of your own issues. We hope you'll come away from this with enough knowledge to start exploring further on your own. We link to external 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.
In this series we'll:
- Introduce 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
- Contrast, 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!
- Web Services in Drupal. This series assumes you're comfortable administering Drupal and using the core JSON:API web service.
Did you know that Drupal is looking to adopt React to create a better user experience for site builders and content creators? Knowing how to use React, and how to integrate it with Drupal, may become an important skill for Drupal developers.
For a high-level overview of Drupal, especially 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 and how to Retrieve Data from an API with React.
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 ask us your specific 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 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!
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 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. 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.
Create a React Component: In this tutorial we'll create a new React component that queries the Drupal.org project API to get data about project usage and then displays it in a block. This is a great example of how you can use React to enhance an existing Drupal theme without having to go fully decoupled.
fetch() function. We'll go over the anatomy of a fetch request, and also discuss alternatives and when they might come in handy.
Add, Edit, and Delete Drupal Nodes with React: In this tutorial we lay the groundwork for an application that can list, create, update, and delete nodes via Drupal's API. We'll look at how to make HTTP POST, PUT, and DELETE requests to manipulate data stored in Drupal via React. We'll also discuss how authentication works in this scenario.
Build an Interface to Edit Nodes with React: In this tutorial we'll combine everything we've learned up to this point 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.
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 we'll exchange those for an OAuth access token, and update existing
fetch requests to use the OAuth access token.
The example code for this set of tutorials is at https://github.com/DrupalizeMe/react-and-drupal-examples/. It consists of a Drupal site, a Drupal theme with a React application included in it, and a decoupled React application that works with the Drupal backend. You can use them as a reference while following along, or set up and use your own local development environment.
This tutorial provided an outline of what you can expect to learn in the rest of the tutorials in this series.
Further your understanding
- Decoupling Explained
- List some things on your site that you think could benefit from adding some interactivity to them.
- Are there things about your user experience that would be better without the need for a page refresh?
- React (reactjs.org)
- @reactjs (twitter.com)
- React Native (https://reactnative.dev/)
- Amazing React.js Open Source Tools & Projects of the Year (v.2019)
- 25 Amazing Open Source React.js Projects for the Past Year (v.2018) (medium.mybridge.co)
- Things nobody will tell you about React.js (medium.com)
- Drupal looking to adopt React (dri.es)