Reusable React.js components as TWIG template functions

SlayJay

I was recently selected as a finalist for the Acquia engage awards based on my work on constituent analysis and employee tools in our Drupal 8 corporate site. A BIG part of that was our integration of React.js tools and widgets with Drupal 8.  You can see video of my submission (including examples of the react widgets) here:

https://www.youtube.com/watch?v=-BbRruXPg5c

It's actually a relatively simple process, but it's one of those things where you have to know the exact arcane keywords to figure out, and I think a lot of people would love to have someone walk them through the proccess.

The end result would be creating a simple twig function that takes parameters and returns a react.js widget.  This gives front end designers an easy way to use (and re-use) react.js widgets as part of their design.

Specifically the goals I would expect my audience to walk away with are:

  • Creating a basic module using drupal console
  • Using drupal console to generate a twig function skeleton
  • Altering the twig function skeleton to generate a react widget (with parameters)
  • Use the custom twig function in a twig template (with parameters) to generate a react.js widget on page.

Attendee Experience:
a basic understanding of react.js and drupal 8 module development.

My Experience:
I am currently a senior application developer at West Virginia University Foundation, and have been doing web development for 15 years, drupal development for 7, and have been working in Drupal 8 since alpha.  I have been working with Drupal 8 and React.js integration specifically for 3 years.

 

 

 

 

 

Session Track

Front End

Experience Level

Intermediate

Drupal Version