Reusable React.js components as TWIG template functions
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.