| Understand when to translate JSX 1:1 vs restructure |
Overview |
Use this when you have an existing React/JSX design system and need to build equivalent Drupal SDC components. This applies whether the React source uses Tailwind, DaisyUI, Radix UI, shadcn/ui, MUI, or any other component library. |
Convert conditional rendering (&&, ternary, ??) |
Conditional Rendering |
Use this when converting JSX conditional expressions to Twig. React uses JavaScript expressions inside JSX; Twig uses {% if %} tags and filters. |
Convert .map(), .filter(), .slice() loops |
Loops & Iteration |
Use this when converting JavaScript array methods (.map(), .filter(), .reduce(), .slice()) to Twig {% for %} loops and filters. |
| Map React props to Twig variables and component.yml |
Props to Twig Variables |
Use this when mapping React component props to SDC component.yml properties and Twig template variables. This is the core translation step for every component. |
| Convert children/slots to Twig blocks |
Children & Slots |
Use this when converting React's children, named props that accept JSX, render props, or compound component patterns into Twig blocks and SDC slots. |
| Handle onClick, onChange, event handlers |
Event Handlers |
Use this when converting React event handlers (onClick, onChange, onSubmit, etc.) to Drupal's server-rendered architecture. React events have NO direct Twig equivalent. |
| Translate component composition patterns |
Component Composition |
Use this when converting React patterns for combining components -- nesting, polymorphic elements, higher-order components, context providers, and compound component APIs. |
| Convert className, CSS Modules, Tailwind, CVA |
Styling Translation |
Use this when converting React styling patterns -- className, CSS Modules, Tailwind utilities, cn()/clsx(), cva() (class-variance-authority), inline styles -- to Twig and SDC equivalents. |
| Turn a TypeScript interface into component.yml |
TypeScript to Component.yml |
Use this when you have a TypeScript interface or Props type definition and need to produce a complete SDC component.yml schema. This is a step-by-step workflow for the most common translation task. |
Convert <img>, Next.js <Image>, <picture> and SVG |
Image Handling |
When converting React image components (<img>, Next.js <Image>, <picture> / srcset, CSS background-image, inline SVG) to Drupal Twig equivalents using managed media, image styles, and the Drupal file/media entity system. |
Convert links, React Router and Next.js <Link> |
Link Handling |
When converting React link and routing patterns (<a href>, React Router <Link>, Next.js <Link>, onClick navigation, dynamic routes) to Drupal Twig equivalents using path(), url(), link(), and link field formatters. |