Get React components from the server with ajax

Question

Is there a standard way to get React components dynamically from the server in order to render them at the client from already rendered components on demand? In other words, an already rendered component would return the ajax-received component when it will be re-rendered from the render() method.

With RequireJS and I think Browserify (using an extra package), scripts could be requested asynchronously. Currently I use webpack to transpile ES6 with Babelify.

My use case is that I want to create some sort of wysiwyg editor, and in theory there will be a repository of react-widgets that I would like to run on demand in an iFrame.

Thanks

Answer 1

If you are using webpack already you could look into the require.ensure functionality.

See: https://webpack.github.io/docs/code-splitting.html

This creates split points in your code without you having to do all the heavy lifting footwork.

I have a similar use case to yours and was able to use require.ensure successfully.

There are a few other tutorials/resources available:

• http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/
• http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack/
• https://www.youtube.com/watch?v=gvG8dSPCNno

---

Also, if you are building a wyisiwig editor you should check out draft-js. https://facebook.github.io/draft-js/

Super cool and extensible, built right on top of React by the Facebook team.