Getting Started: React in Drupal 8
Well, today I will show you exactly how you can add React to any Drupal site, as well as provide you a module with all the boilerplate code required to get you up and running with React as quickly as possible.
Before getting started, we need to understand decoupling. Decoupling is the idea of separating content management from content presentation. In a traditional or coupled Drupal site, Drupal is responsible for both content management and content presentation. I won’t bore you with long drawn out explanations, just know there are two common approaches to decoupling Drupal.
Content Management: Drupal
Content Presentation: Any Front-End Framework (Angular, React, etc.)
Content Management: Drupal
Content Presentation: Drupal + Any Front-End Framework (Angular, React, etc.)
More often than not, you don’t need a full headless implementation, but just one or two highly interactive elements on a few pages of your website. This is Progressive decoupling where React is used as part of what a user sees on the page. In this case, Drupal’s standard theme layer is responsible for outputting the primary user experience, and React is used to enhance it.
Progressively Decoupling Drupal
Before we install the React module and start writing any code, we need to configure Drupal to send data to the React app via an API (application programming interface), we can very easily do this with the Views and RESTful Web Services modules included in Drupal core.
Login to your Drupal site
- Navigate to Manage > Extend
- Enable the following modules:
- Navigate to Manage > Structure > Views
- Create a new view as a REST Export and provide an endpoint for your React app to access:
In this example, we’re creating an event list. However, you can use any data from Drupal you’d like (content types, paragraph types, users, taxonomy, etc.).
I like to prefix all my endpoints with “api” to avoid any conflicting path names
- In your newly created View under Format > Settings select JSON
- Then add and configure all the fields you want to export
To make sure everything is working, navigate back to the homepage of your Drupal site and add your API path to the end of the URL- in my case it is http://mysite.local/api/events. You should see a JSON object containing key/value pairs of your field names and their respective content.
That’s it! Now we can add React.
Install the React Module
Setting up a standalone React app is a quick and easy process using the “create-react-app” script. However, it’s not that simple when using React within a Drupal module. Luckily for you, I have already created a sandbox React/Redux Boilerplate module so you can skip all the setup and get started writing your own React code right away.
To install the module, visit https://www.drupal.org/sandbox/kemanewright/3096257 and follow the detailed instructions on the project page to get started.
Using the React Module
This module works great in any scenario where you want a few highly interactive elements on a few pages on your site, because it’s using the Drupal block system you can place it anywhere on any content type you need. Maybe you’re building an appointment or event scheduler and need a calendar and posts feed that updates in real time, this is a perfect scenario for React.
Further Module Documentation
This session from Texas Camp covers everything you need from Drupal to React/Redux basics, with a more thorough example of this module in action utilizing POST and DELETE requests as well.
Whether you’re a Drupal developer with little React knowledge or a React developer with little Drupal knowledge, you can get up and running with this module in a matter of minutes. I recommend you give progressive decoupling a try and spice up the user experience of your next site.