Jsonapi

Progressive decoupling and ES6 support on Drupal 8 are definitely gaining some momentum. After having tested several methods to make use of React within Drupal, I had a look a the React Comments module, that provides a self-contained, standard and developer friendly way to get started with React. It has been derived in a repository to have a kind of boilerplate to run tests on and a demo that loads article nodes from a JSON:API endpoint.

This post focuses on translation issues and various pitfalls that you might encounter while building with React and Drupal: internationalization with and without language fallback, include images with images styles, taxonomy filter, fetch data on the route or the component, sort by weight, deploy in production.

The first post of this series focused on setting up easily a multilingual Drupal and React environment for a museum Audioguide web app. This one describes the steps to achieve a MVP that displays a list and a detail page of Audio contents, so we have the opportunity to cover several basic concepts under React : Components (add from a package repository, inherit, compose, create), Routes (default route and wildcard), Fetch to consume Rest, Localization via React Intl.

The goal of this serie of posts is to achieve quickly a simple museum Audioguide web app based on a React isomorphic boilerplate with a Drupal 8 backend that uses the latest standards. The web app will be fully decoupled by being hosted on another domain than the Drupal one. As a real world case, we want it to be fully multilingual. This is the first post of a serie of 3. This first one focuses on having a Drupal and React setup that meets our requirements. The second one will define a MVP that will just fetch the audioguides list and a detail view (GET operation), the last one will then add extra features like getting user feedback (POST operation).