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...
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.
For a high-level overview, especially in the context as a backend for React applications, check out An Introduction to Drupal for React Developers.
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!
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.
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.
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 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
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?