Use React to List Content from Drupal for Drupal 8, Drupal 9

Last updated April 21, 2020

In order for our React code to list content from Drupal we'll need to enable the Drupal core JSON:API module, and then use fetch() in our React component to retrieve the desired data. This technique works for both React code embedded in a Drupal theme or module, and React code that is part of a fully decoupled application. We'll discuss the differences between those styles as well.

In this tutorial we'll:

  • Use fetch() to bring data from Drupal into React
  • Parse the data using ES6 array functions to find just the bits of data we need
  • Combine multiple React components together to render a list of articles retrieved from Drupal

By the end of this tutorial, you should have a better understanding of how data from a Drupal API gets incorporated into a React application.