Last updated February 21, 2020

React really starts to shine when you've got data to display. By adding an onComponentMount() lifecycle method to a React component, and then using fetch() to retrieve data from Drupal's API, and finally passing the retrieved data as props to child components, we can create a dynamic list of articles.

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 can be incorporated into a React application.