Multiframework Recipes: React dentro de Salesforce, explicado estilo Feynman
Salesforce siempre te obligó a usar su propio framework de UI: LWC (Lightning Web Components). Ahora abrió la puerta para que traigas React — y pronto otros frameworks — directamente dentro del org. Las Multiframework Recipes son el recetario oficial de Trailhead Apps. Aquí lo explico como si tuvieras 12 años, y luego lo aterrizo en las clouds reales donde esto cambia el juego.
Qué es exactamente
Es una colección de ejemplos mínimos — recetas — que muestran cómo hacer tareas comunes en Salesforce usando React: leer datos, escribirlos, manejar errores, enrutar páginas, llamar APIs, estilizar, integrar con sistemas externos. Todo el código vive en el repo público trailheadapps/multiframework-recipes.
Las recetas incluidas cubren los bloques más comunes:
- hello — el "hola mundo" del bundle.
- read-data — lectura vía GraphQL UIAPI.
- modify-data — escritura sobre objetos del org.
- salesforce-apis — invocar APIs nativas de Salesforce.
- routing — navegación dentro del bundle.
- error-handling — fallos sin pintarse de rojo en producción.
- styling — convivir con el theming del org.
- integration — hablar con sistemas externos.
Cómo funciona por dentro
Escribes una app de React + Vite + TypeScript, la compilas en un paquete llamado UI Bundle, y la subes a Salesforce. Dentro del org, la app habla con los datos usando GraphQL UIAPI o REST.
El flujo, en cinco pasos:
- Escribes React.
- Vite compila.
- Sale un UI Bundle.
- Deploy al org.
- La app consume datos de Salesforce.
Los comandos clave para arrancar:
sf plugins install @salesforce/plugin-ui-bundle-dev
npm install && npm run build
sf project deploy start \
--source-dir force-app/main/react-recipes/uiBundles/reactRecipesPor qué importa
Para devs frontend: no hace falta aprender LWC desde cero. Lo que ya sabes — React, hooks, librerías de npm — corre dentro del org seguro de Salesforce.
Para devs Salesforce: se abre el ecosistema completo de React: componentes ricos, animaciones, state management moderno, testing con Vitest o Playwright.
Para el negocio: contratar talento React es órdenes de magnitud más fácil que contratar LWC. Más velocidad de entrega, menos cuello de botella.
Casos de uso en el stack real
Conectándolo con las clouds que veo todos los días en proyectos:
Data Cloud
El problema: tienes perfiles unificados gigantes y la UI estándar no siempre los muestra como tu equipo los necesita.
La receta: un "Customer 360 Viewer" en React que pida segmentos, calcule scores y visualice en tiempo real con Recharts o D3. La receta salesforce-apis es la puerta a Data Cloud APIs.
B2C Commerce
El problema: el panel del merchant necesita herramientas rápidas — editor de catálogo, previews de promos, dashboards de conversión.
La receta: modify-data + routing para armar un mini-admin interno que escriba en objetos custom sincronizados con B2C, reutilizando componentes React ya probados (tablas virtualizadas, drag-and-drop).
Service Cloud
El problema: los agentes pierden tiempo saltando entre pestañas. Necesitan una consola unificada con widgets a medida.
La receta: componentes React embebidos en el record page del Case. read-data (GraphQL) trae el historial, error-handling evita roturas en cara del cliente, integration habla con sistemas externos (telefonía, KB).
Agentforce
El problema: quieres UI para que humanos supervisen, aprueben o corrijan acciones del agente AI.
La receta: dashboard React que muestre traces del agente, acciones pendientes de aprobación y un chat de override. salesforce-apis invoca Agent Actions; modify-data guarda el feedback que después re-entrena al agente.
Marketing Cloud (SFMC)
El problema: los marketers necesitan previews de journeys, simuladores de audiencia, constructores visuales — y SFMC clásico se siente viejo.
La receta: integration hace fetch a las REST APIs de SFMC (Journey Builder, Content Builder). La UI moderna en React vive dentro de Core (Sales/Service) y deja a los marketers disparar y monitorear sends sin salir del org.
Cuándo usarlo, y cuándo no
Úsalo si: necesitas UI custom compleja, tu equipo ya sabe React, quieres librerías modernas de npm, estás en Scratch Org o Sandbox.
NO lo uses si: lo que necesitas lo resuelve LWC en cuatro líneas, estás en Developer Edition o Trailhead Playground (aún no soportado), o tu org no usa en_US como idioma default — hay un bug conocido por ahí.
Estado actual
Beta. Solo React por ahora. Más frameworks vienen. Solo Scratch Orgs y Sandboxes. Node v22 o superior. El fix del idioma en_US ya está en el commit afbb80e del proyecto.