Diamond sponsors

Using React with Drupal. The Basics.

Profile picture for user mspae
Frontend Developer
Experience level
2 hours (workshop)
3.05 radon
Starts at
Ends at
Industry track
Expertise topics

The frontend ecosystem and especially the React community is very large and confusing to new developers. This workshop aims to provide a gentle introduction to developers used to the traditional Drupal theming approach how they might use React in the wild today.

It will be a very practical step-by-step coding guide with explanations (where needed) how a simple decoupled client can be built from scratch.

Requirements for the workshop (if you want to code yourself)

  • Git
  • NodeJS of at least version 8
  • yarn (npm i yarn -g)

There has been an incredible amount of hype around the idea of “decoupling Drupal”. This workshop does not aim to explain the concept and benefits of decoupling. 

"React" is one of those buzzwords that mean a lot of different things to different people. At its core it is an open source view library. However, when people say "React" they mostly mean a frontend-facing stack of interoperating libraries and patterns. This can be extremely overwhelming for new developers.

This workshop will not be a buzzword-dropping marathon of libraries. Instead it will start from the basics and introduce new concepts on a need-to-know basis. The aim is to build a prototype of a decoupled client (web) application for viewing content served by Drupal.

Even though the priority is on getting a prototype out fast we don’t want to compromise on the technical basics. The app will be built with modern standards-conforming technologies which can be extended upon to build a fully-fledged production-ready app.

What you will learn in this workshop:

  • Core concepts of the React library
  • How to create simple React components
  • How to build a web app with routes (using react-router)
  • How to query Drupal for data using graphql (using graphql, apollo and the wonderful Drupal graphql module)

What you will not learn in this workshop:

  • How to optimise rendering performance in React apps
  • Advanced state management
  • How to implement server side rendering
  • How to write custom server-side logic which is exposed through graphql

Platinum sponsors