Decoupled Drupal with React


Of all the projects to emerge from the JavaScript renaissance, React, a library for rendering data in view components, has seen an explosion in popularity due to its compelling state system, colocation of view templates with view logic, and lack of assumptions about the stack. Created by Facebook to power its web applications, React is an intriguing candidate for use as a lightweight front end paired with decoupled Drupal. The Virtual DOM-based state system and JSX templating language are two of the most influential recent innovations in client-side frameworks.

Though React's most overt power lies in fully decoupled single-page applications, its component-based rendering system also opens the door for other approaches such as progressively decoupled Drupal, in which Drupal renders and serves pages before handing React control over CMS-rendered page components. Moreover, React’s surrounding ecosystem is increasingly extensive, particularly relevant as a GraphQL server for Drupal 8 begins to take shape.

What makes React so interesting for front-end developers as a solution for decoupled Drupal architectures? This session explores why React may be well-positioned for decoupled Drupal from a conceptual and architectural angle before examining integration techniques from a practical standpoint. Here are just a few of the concepts we’ll delve into:

  • Origins, motivations, and comparisons
  • React is a library, not an MVC framework
  • React architecture and components
  • State and the Virtual DOM
  • Rendering and JSX
  • Drawbacks of React
  • Why React for decoupled Drupal?
  • Fully decoupled Drupal with React
  • React and REST in Drupal
  • Working with Drupal data in React
  • Progressively decoupled Drupal with React
  • React and GraphQL in the Drupal ecosystem
  • Epilogue: React within Drupal?

This session is geared toward front-end developers and engineers who are interested in decoupled architectures with Drupal and up-and-coming JavaScript frameworks. No prior knowledge of React is assumed, but strong familiarity with JavaScript will be necessary.

Session Track


Experience Level


Drupal Version

When & Where

Saturday, 20 February, 2016 - 14:45 to 15:45
Hall 21 | Blisstering Solutions