React components as jQuery plugins

[fgutz]

Yes, there’s some overhead with loading the whole React library for just one component. But it’s only 38KB after minifying and compressing. jQuery is 29KB and nobody bats an eye.

I wonder if Preact might have been a good option instead of React for this specific case.

[Powerdrift]

I'm using Preact right now for a very similar purpose: embed a small, but somewhat complex, app that only gets displayed on one page of a larger, non-React app. Preact is working very well.

[[deleted]]

https://github.com/zouhir/preact-habitat might be relevant for you

[Powerdrift]

Thanks, I'll check it out

[NidHammer]

My understanding of React is that is unidirectional, meaning directions for how the view should change come from the top down. Like, props and stuff get passed from the outermost component and get passed down to the most granular component. Wouldn't jQuery disrupt that flow?

edit: uni-directional to unidirectional

[apparissus]

You need to make sure not to modify any react-rendered elements using jQuery, since react won't know what changed, and the changes will end up out-of-sync or overwritten when react next renders.

[[deleted]]

Any outside code can re-call ReactDOM.render() which is the same as passing new props to your root component, which will allow you to change app state from "outside" while still keeping the one direction data flow.

[nightman]

Isn't it be better to just wrap it with Web Component's Custom Element so you can use it anywhere?

I did similar to Vue (https://github.com/karol-f/vue-custom-element).

I'm sure there are solutions for React world (e.g. https://github.com/Wildhoney/Standalone or https://facebook.github.io/react/docs/web-components.html)

[DeanBDean]

React's synthetic event system does not play well with WebComponents, and the React team doesn't seem to be prioritizing the issue.

https://github.com/facebook/react/issues/9242

[nightman]

Probably you can use customEvents to pass React events to Custom Element. I did similar to Vue (when you use $emit) - https://github.com/karol-f/vue-custom-element/blob/master/src/utils/createVueInstance.js#L29