Create a React Component for Drupal 8, 9, and 10

Components are the fundamental building blocks of any React application. React uses components to represent different elements in the UI. To show this, we'll build a React widget that can query the REST API to retrieve usage statistics for a project and then display them. We'll create buttons that allow us to toggle between two different projects. In doing so we'll learn about creating components and using props and state in React.

In this tutorial we'll:

  • Define two new React components
  • Learn about using props to pass data to a component
  • Learn about using state, and the useState() hook, to create interactivity

By the end of this tutorial you should have a basic understanding of how to write a React component that uses props and state to display data from a third party API.