¿Cuáles son las mejores prácticas asociadas con la carga/inserción y ejecución de componentes React desde un servicio externo en una aplicación React existente a través de AJAX?
Tengo una aplicación principal de React y quiero cargar varios componentes de React (de servicios externos) a través de AJAX. ¿Como se puede hacer esto?
¿Es esto factible en absoluto? Si no, ¿cuál es la manera de hacerlo?
¿Puede esto funcionar con webpack?
Considere usar esta biblioteca de @thejameskyle https://github.com/thejameskyle/react-loadable Actúa como un cargador diferido para sus componentes de reacción, incluidos los remotos
Puede usar: https://github.com/faceyspacey/react-universal-component y cargar el código del componente como una cadena (que es lo que supongo que está haciendo si está hablando de recuperarlo a través de "ajax") , evalúelo y devuélvalo desde la función asyncComponent como una promesa, o páselo a una devolución de llamada pasada a la función. Es como React Loadable, pero no necesita funcionar estrictamente con importaciones asíncronas. Revisa los documentos.
Las microaplicaciones encajan perfectamente en este nicho. El concepto es agrupar su componente como un paquete independiente y luego cargarlo en su aplicación bajo demanda desde una URL. Hay varios enfoques que puede tomar para lograr esto. Hay un componente de orden superior que hace esto por usted. Todo lo que se necesita es importar el hoc y luego pasarle una configuración json que identifique la microaplicación que desea cargar de forma diferida en su aplicación.
<MicroApp config={{ View: { Name: 'redbox-demo', Scope: 'beekeeper', Version: 'latest' } }} />El uso de la configuración anterior cargará esta microaplicación de exploración de películas directamente en su aplicación host.
Puede encontrar más información sobre cómo funciona y el código fuente aquí.