Build an Interface to Edit Nodes with React for Drupal 8, 9, and 10

Using React we can do more than just list content. By using the POST, PATCH, and PUT methods of Drupal core's JSON:API web service we can also add, update, and delete, content entities. To demonstrate how this works we'll create a small React application with a form that lets you add, edit, and delete article nodes.

In this tutorial we'll:

  • Learn how to handle user authentication and CSRF tokens in a React application
  • Create a single React component that outputs a form to add or edit content
  • Create a wrapper around the JavaScript fetch API to assist in dealing with requests to Drupal's JSON:API

By the end of this tutorial you should know how to create, edit, and delete content in a Drupal site using a React application.