I need to be able to dynamically include react components into my project, because I want to setup a plugin system and not every user has the same plugins/components enabled. Also they are/might get too big to submit all of them to every user. I tried to find out how to do that, but it seems that React might not support that use-case.
TLDR: How do I load React components from server when needed? Do I have to switch to Angular because react has no templateUrl equivalent?
React components are defined in JavaScript files, so you can load components in just as you’d load in any other JavaScript file. If you’re not using any sort of module mechanism like RequireJS, that might be as simple as injecting a script tag into the document. If you’re using something like RequireJS, you would just tell the loader that you want an extra module loaded.
Related
I'm using create-react-app-typescript to create a react application. What I'm trying to do is to build the application, then include the resulting js and CSS files into another application (which is a very old application that doesn't know anything about React or any new JavaScript features)
My problem: I want to be able to pass information to my React application; for example, I want to specify an array to be used to display information, but the issue is that as soon as I add a <script> tag to React's js file, it will try to create the application under the target div element.
Not sure if it's a good idea, but I try to avoid ejecting my React application as much as possible so that I wouldn't need to maintain everything myself.
One solution that I thought of was to create an item in localStorage and then read it from my React app, and this somehow solves the issue, but is this a good way to do it?
And then there's another issue: I want to be able to pass a callback from the external application to be called from my React app to cause something to happen in my external application, and this cannot be done using localStorage
Any help or tip is deeply appreciated,
Thank you
You don't have to eject the project at all. One possible solution (maybe not the best) is just to change your index.js to expose your application. Thus instead of directly "rendering" the app do something like following
// needed imports
window.startFromOutside = function(element, callback) {
ReactDOM.render(<ReactApp cb={callback} />, element)
}
That way you can bootstrap your react application from outside passing any properties you want.
I made some SPA using vuejs-templates/webpack and that's ok. But now I am developing a website, almost everything is static, so there's no need to be a SPA. I already made the pure html/css layout.
Now I will make some pages with forms and dynamic content, I would like to use vue components inside these pages.
Tell me which of this ideas is the best or give me a better option:
Multiple entries in webpack: I don't know very well how to do it, but I guess I can create a webpack project by scratch and render multiple entries that I include in the pages I want.
Use browserify: I didn't want to do this, but sounds like a good option... I could use vueify to render *.vue components
Use Nuxt: I never tried, but seems a good option too, I could make a "SPA" with SSR.
Tell me if you have another idea.
Thank you
Don't rule out just referencing Vue as a script file. No bundle, no compilation step. You lose single file components, but you can get something very like them by using js template literals. If your needs are simple and you don't want to impact on the rest of the site, this could be a fine solution.
My team developed a django website with lot of pages that working completely without javascript or may be with the little jquery manipulation. We want try to use a react library to speed up our pages and add page navigation without full page reloading (we choose react because we implemented some SPA website with react and we like it). Also our pages should working with disable js.
I want to start with one page with 5 forms on it. If any form is submit then page is reloaded, data populated in fields is lost and it work slowly. I think to implementing sending data on ajax and change some html after server answer.
Every react tutorial is saying to write jsx components with html markup inside, convert it with babel to pure js and adding on page dynamically on page load. Or if you want to render pages on server you need to use standalone node server. But I already has a powerfull django template engine to render templates on server side, also I need to render templates with specific django things like multilanguage content, user variables etc.
Can I fully render page with django on server side and after loading say to react, that specific div it's a component with initial state and existing html markup? Or may be you can tell me another solution, without fully rewriting my website. Thanks.
Well, kind of. Every react app starts by specifying a root HTML element to render from. If you want to only render a portion of your website with react, just specify an element that covers the section that you want. Something like this:
ReactDOM.render(<MyMainComponent />, document.getElementById('myReactSection'));
However, in doing so, any existing HTML in there will be overwritten (https://facebook.github.io/react/docs/react-dom.html#render). So you'll need React to re-render the html that was already in there.
Also, you don't NEED babel to write react code, it's just very useful (in conjunction with webpack) to generate a single javascript bundle file to send over to the client that was originally written using the awesome new ES6 syntax (https://babeljs.io/learn-es2015/)
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
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.
Background
I have a javascript library that runs on a customers website. This library is a mixture of standard components (error handling, message passing, etc), and per-customer based custom components (specific dom handling routines).
Problem
I am breaking DRY. For each customer, I have the same code duplicated. Since I violate DRY, I am stuck with all the pitfalls: e.g. if I need to make a change to a common component, I have to replicate that change across multiple files.
Desired Solution
I'd like to separate out all the functionality into components, and selectively choose (via build script) the components that get added into the library.
This would be somewhat similar to how Bootstrap allows you to mix and match javascript plugin functionality
Example: CustomerA's library, needs the Base Component, the Comment Component, and a custom handler to parse Google Analytics.
CustomerB's library, needs the Base Component, and a custom handler for their shopping cart experience.
I think I can do this with RequireJS, but is there a more industry standard way to build customized javascript libraries?
I came across Browserify, which allows you to use Nodejs module system to create reusable components, in addition to using NPM node modules.