Image

Use React to List Content from Drupal for Drupal 8, 9, 10, and 11

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.

Decoupled Headless Drupal