Learn how to embed interactive React components inside SDCs while keeping your theme lightweight, and maintenable.
- Basic understanding of Drupal theming (Twig templates, libraries, *.info.yml)
- Basic understanding of npm and JavaScript build tools.
This session explores how to integrate React components directly inside Drupal's Single Directory Components (SDC) architecture. We'll start by examining the project structure, placing a Vite build system and keeping JSX source files co-located within each SDC folder.
We'll walk through the complete configuration: Vite's auto-discovery using glob patterns, manualChunks for extracting a shared React runtime, and how SDCs declare dependencies via component.yml and libraryOverrides.
Data flow between Drupal and React is covered in depth, passing props from Twig via data-* attributes and leveraging drupalSettings for global configuration.
The session concludes with a hands-on demonstration building two interactive React SDCs from scratch, showing how they integrate with Drupal.
By the end of this session, participants will be able to:
- Understand what Drupal SDC are and how they work.
- Configure a Vite build system that auto-discovers and compiles React components inside SDC folders.
- Implement the data flow from Drupal (Twig/PHP) to React components using props.
- Create production-ready React SDCs that integrate seamlessly with Drupal.
- Apply best practices for organising React code within a Drupal theme structure.
