React & Redux in Drupal 8 the Easy Way

KemaneWright
artis

This session will show a practical approach to progressively decoupling Drupal by using a scaffolding module (https://www.drupal.org/sandbox/kemanewright/3096257) which cuts down on the complexity of setting up and integrating Drupal with React through a custom block or controller.  This will not be a conceptual discussion, but instead, a pragmatic walk-through intended to make progressive decoupling work without creating a maintenance nightmare.

This session will be useful for developers approaching decoupling from either direction, Drupal or React, who may not know much about the opposite technology.  The scaffolding module will lower the barrier for either type of developer to build a decoupled component. We will introduce the module and its setup. Then we will cover the build steps for developing a React app including how Redux (built into the scaffolding module) can help manage data and states within React. We will briefly cover building a view to retrieve data from Drupal and show how to consume the data with the React app.  In the end, we will have a working React app module. The goal of this session is to enable anyone to do the same.

Learning Objectives

Clone a scaffolding module, then install & configure the custom module to build a React block.

Understand the build process for developing a React app within Drupal.

Use Redux in the React app.

Get data out of Drupal into the React app.

Make your own working React block module derived from the scaffolding module.

Target Audience

Backend Drupal developers who have not ventured very far into Decoupling with React

Front-End Drupal developers who want to easily add React to a site.

Prerequisites

Some Drupal site-building. If you've created a custom module, even better.

Comfortable with Javascript.  If you've used any front end framework, it's a bonus.

Track

Development & Coding

Tags

back-end development
decoupled
front-end development
javascript

Experience Level

Intermediate

If no timezone is set on your profile, time is displayed in UTC.
Update your profile's timezone