What are the best practices associated with loading/inserting and running React components from an external service in an existing React application via AJAX.
I have a main React app and want to load various React components (from external services) via AJAX. How could this be done?
Is this feasible at all? If not what is the way to go about it?
Can this work with webpack?
Consider using this library by @thejameskyle https://github.com/thejameskyle/react-loadable It acts as a lazy loader for your react components including remote ones
You can use: https://github.com/faceyspacey/react-universal-component and load the component code as a string (which is what I assume you're doing if you're talking about retrieving it over "ajax"), evaluate it, and return it from the asyncComponent function as a promise, or pass it to a callback passed to the function. It's like React Loadable, but doesn't need to work strictly with async imports. Check the docs.
Micro apps fit this niche perfectly. The concept is to bundle your component as a standalone bundle and then load it into your application on demand from a url. There are several approaches you can take to accomplish this. There is a higher-order component that does this for you. All that is needed is to import the hoc and then pass it a json config that identifies the micro app you want to lazy load into your application.
<MicroApp
config={{
View: {
Name: 'redbox-demo',
Scope: 'beekeeper',
Version: 'latest'
}
}}
/>
Using the configuration above will load this movie browsing micro app directly into your host application.
You can find further reading on how it works and source code here.