You don't need to go fully 'headless' to use React for parts of your Drupal site. In this tutorial, we'll use the Drupal 8 JsonAPI module to communicate between a React component and the Drupal framework.  

As a simple example, we'll build a 'Favorite' feature, which allows users to favorite (or bookmark) nodes. This type of feature is typically handled on Drupal sites with Flag module, but let's say (hypothetically...) that you have come down with Drupal-module-itis. You're sick of messing around with modules and trying to customize them to do exactly what you want while also dealing with their bugs and updates. You're going custom today.

Follow along with my Github repo.

Configure a custom Drupal module

First thing's first: data storage. How will we store which nodes a user has favorited? A nice and easy method is to add an entity reference field to the user entity. We can just hide this field on the 'Manage Form Display' and/or 'Manage Display' settings since we'll be creating a custom user interface for favoriting.

When you install the Favorite module in the repo, it will add the field 'field_favorites' for you to the user entity: see the config/install directory.

Next up: define the part of the page that React will replace. Typically, you will replace an HTML element defined by an id with a React component. If this is your first time hearing this, you should do some basic React tutorials. I started with one on Code Academy. 

Read more