How to use jQuery plugins in React, Riot 2.0

Question

I have a jQuery heavy app I'm in the middle of that has many jQuery plugins and I want to restructure the app, so I'm looking at different frameworks like Angular, React, Riot 2.0, etc.

I like React and Riot, but I can't figure out how I'd make your typical jQuery app (unmetered access to the DOM) into this new world of virtual DOM, etc.

Some of these components are complex and I wouldn't want to rewrite them all into the "VDOM way" and create another nightmare.

Does anyone have an answer to this? Maybe jQuery plugin heavy apps aren't suited, or is there a way to split/combine the UI using both, or maybe a React/Riot like framework that would play well with jQuery?

Answer 1

To access the DOM with jQuery inside a Riot 2.0 custom tag, you can use the mount event and this.root like this:

<my-custom-tag>
  <h3>Riot.JS Custom tag + jQuery plugin</h3>
  <p>My paragraph</p>
  <script>
    this.on('mount', function() {
      var $node = $(this.root);
      $node.find('p').html('updated by jQuery!');
    });
  </script>
</my-custom-tag>

I am not sure it is the "best practice" but it works with Riot 2.0.10 (Feb 19, 2015).

If the custom tag contains form or input elements, it's simpler, you can access them by their name property, you don't need the mount event:

<my-custom-form>
  <input name="email" type="text">
  <script>
    $(this.email).val('[email protected]');
  </script>
</my-custom-form>

Answer 2

Riot 2.0 was released just 4 days ago so there are obviously no extensions yet.

But it's a good candidate to transform jQuery- based apps to the "modern world" with using custom tags or "components" in React community.

Custom tags lets you build reusable pieces of client side code with a less need for jQuery selectors and manipulation methods. And HTML and JS is less scattered on the file system.

And Riot 2.0 is designed to play well together with jQuery. You can freely use jQuery plugins together with custom tags so you can transform your app iteratively - one tag at the time if you like.