4 ms·

When you moved to Angular and later to React did you have any jQuery heavy libraries? I'm using stuff like slickgrid[0], jquery-ui datepicker, json-editor[1] a

When you moved to Angular and later to React did you have any jQuery heavy libraries? I'm using stuff like slickgrid[0], jquery-ui datepicker, json-editor[1] and wonder how I will drive these components from something like Angular or React? doh, quickly googled for the github links below and saw there now a slickgrid-es6[2] fork which I have not tried. But my question still stand: how do you drive jquery libs from newer frameworks? [0]: https://github.com/6pac/SlickGrid/wiki https://github.com/6pac/SlickGrid/wiki [1]: https://github.com/json-editor/json-editor https://github.com/json-editor/json-editor [2]: https://github.com/DimitarChristoff/slickgrid-es6 https://github.com/DimitarChristoff/slickgrid-es6

conradfr 8y ago
I have encapsulated jQuery (including Bootstrap) plugins in AngularJS, React and Vue in the past. They all allow you to access a DOM node somehow. Maybe it's frowned upon but I don't really like to use those (usually partial) Bootstrap re-implementation, especially in non-SPAs where you already have jQuery and/or Bootstrap. Of course it's becoming less and less necessary.
always_good 8y ago
You can access the raw DOM node from a React component. On component mount/unmount, you can apply a jQuery library to the DOM node and optionally clean it up. It's the same way you can wrap a <canvas> node with a React component and otherwise do all your draws outside of React (like for a game). This way the node is still integrated into your React app but React does nothing more than create/remove it.
johnthedebs 8y ago
Other users have already commented, but basically you can wrap jQuery libraries in React components and do a bit of extra work in the lifecycle methods (componentDidMount, componentWillUnmount, etc.) to manage the jQuery bits. Once you've wrapped it in a component, you can more or less drop that component anywhere in your view hierarchy and not have to think about the fact that it's using jQuery under the hood. This highlights one of my favorite things about React and similar frameworks, which is that it's the closest thing to actual, useful encapsulation of components I've seen in a frontend framework. It's not perfect, but it's much better than everything I used before it.

conradfr 8y ago

I have encapsulated jQuery (including Bootstrap) plugins in AngularJS, React and Vue in the past. They all allow you to access a DOM node somehow. Maybe it's frowned upon but I don't really like to use those (usually partial) Bootstrap re-implementation, especially in non-SPAs where you already have jQuery and/or Bootstrap. Of course it's becoming less and less necessary.

always_good 8y ago

You can access the raw DOM node from a React component. On component mount/unmount, you can apply a jQuery library to the DOM node and optionally clean it up. It's the same way you can wrap a <canvas> node with a React component and otherwise do all your draws outside of React (like for a game). This way the node is still integrated into your React app but React does nothing more than create/remove it.

johnthedebs 8y ago

Other users have already commented, but basically you can wrap jQuery libraries in React components and do a bit of extra work in the lifecycle methods (componentDidMount, componentWillUnmount, etc.) to manage the jQuery bits. Once you've wrapped it in a component, you can more or less drop that component anywhere in your view hierarchy and not have to think about the fact that it's using jQuery under the hood. This highlights one of my favorite things about React and similar frameworks, which is that it's the closest thing to actual, useful encapsulation of components I've seen in a frontend framework. It's not perfect, but it's much better than everything I used before it.