Tengo una aplicación React (pequeña) (vainilla create-react-app), que me gustaría que apareciera en un modal (bootstrap o similar) en otro sitio. ¿Existe una biblioteca que simplificará este proceso?
Específicamente, el caso de uso completo es que si mi archivo Javascript está cargado (y solo un archivo javascript), insertará una llamada a la acción del tipo "Click Me", y cuando haga clic en mi componente de la aplicación, se cargará en un nuevo modal. También necesitará que el CSS (para la aplicación) se incluya de alguna forma.
Creo que todo esto (excluyendo la llamada a la acción que es bastante simple) se podría hacer durante la transpilación de Babel/Webpack, pero no puedo encontrar nada listo para usar que parezca hacer esto.
Esta funcionalidad está integrada en ReactDOM.render . Simplemente agregue una identificación a su elemento.
Por ejemplo:
<!-- index.html --> <script src="url/to/react/build/asset" as="script" /> <div id="button-and-modal"></div>Luego, para representar su aplicación de reacción dentro del div:
// index.js import { render } from 'react-dom'; import App from './App' function renderReact() { const element = document.getElementById('button-and-modal'); render(<App/>, element) } document.addEventListener('DOMContentLoaded', renderReact);Entonces su aplicación de reacción se vería así:
const App = () => ( <div> <Button/> <Modal/> </div> ) También puede codificar el botón y el modal fuera de la aplicación de reacción y solo tener el contenido modal representado por reacción. Si desea hacer eso, siga las mismas instrucciones pero agregue el javascript para el botón + modal dentro de la función renderReact .
Puede usar, por ejemplo, https://direflow.io/ para crear su aplicación de reacción como un componente web que puede representar en cualquier lugar de cualquier sitio.
Usando su proyecto actual puede hacer
direflow create cd <project-name> npm instally luego copie toda su aplicación en la carpeta en direflow-components para que su árbol de proyecto se vea así:
/public /src /direflow-components /<project-name> // leave here only index.ts from example and copy all your project files here index.ts component-exports.ts index.ts react-app-env.d.ts .eslintrc ...Si es necesario, puede cambiar
... component: App, configuration: { tagname: 'example-component', }, ...a su componente que desea representar y el nombre de etiqueta mediante el cual se podrá acceder a la aplicación. Después de todo lo que acabas de hacer
npm run build copie direflowBundle.js de la carpeta de compilación a su sitio web y renderice su aplicación en algún sitio web así:
<body> <script src="./direflowBundle.js"></script> <awesome-component></awesome-component> </body>Siento que trato este problema en cada trabajo de Front End. Definitivamente no es fácil, pero he encontrado varias maneras de hacerlo. Probé la idea de agrupación que sugeriste, pero esa fue la que más me costó. La forma más fácil, en mi opinión, sin muchas molestias es alojar su aplicación de reacción en una página web en blanco y luego cargarla en un iframe donde la necesite.
En mi último trabajo, queríamos migrar nuestro sitio web de Shopify para reaccionar, pero con la forma en que se configuró la arquitectura de Shopify en ese momento, nos resultó difícil alojar una aplicación de reacción renderizada del lado del servidor. Así que construimos las páginas web usando Next.js y luego las implementamos en Vercel. Luego insertamos esto como un iframe en el sitio web de Shopify. Funcionó maravillosamente.