Do I need jQuery when using React?

react
1

Is jQuery a necessary package for Meteor to run when I’m using React?

Also, what packages should be added/removed in order to use React?

1 Like
2

Nope, jQuery is not needed. In fact, I’d dare say it’s discouraged using jQuery when using React, because you want React to be fully in charge of the DOM.

If you’re using Meteor 1.2, just meteor add react should suffice!

3

It’s not really needed. You can replace jQuery by using lodash (for utils) and React’s built in ReactDOM.findDOMNote (for selectors).

Here’s one common example on what to expect:

So in jQuery:

<input type="text" id="name" value="Hello" />
$("#name").value

But in React:

<input type="text" ref="name" value="Hello" />
ReactDOM.findDOMNode(this.refs.name).value

However, if you’re using plugins that depend on Javascript just keep it. It won’t interefere with anything. For example, I’m using a QR code reader plugin that needs jQuery:

QrScanner = React.createClass({

  componentDidMount: function() {
    var reader = ReactDOM.findDOMNode(this.refs.qrReader)
    var parent = this;

    $(reader).html5_qrcode(function(data){
      parent.props.onScan(data);
    }, function(error) {
      parent.props.onError(error);
    }, function(videoError) {
      parent.props.onVideoError(videoError);
    });
  },

  render: function() {
    return (
      <div>
        <div ref="qrReader"></div>
      </div>
    );
  }

});
1 Like
4

I’m using a few click handlers to get routing working for meteor-useraccounts:

$('#at-signUp').click((e) => {
  e.preventDefault()
  FlowRouter.go('signUp')
})
$('#at-signIn').click((e) => {
  e.preventDefault()
  FlowRouter.go('signIn')
})
$('#at-forgotPwd').click((e) => {
  e.preventDefault()
  FlowRouter.go('forgotPassword')
})
5

Hmm, why do you need to do those custom handlers? It worked fine for me without them: http://guide.meteor.com/accounts.html#useraccounts-customizing-routes

6

you dont need ReactDom, just call this.refs.somenode.value

4 Likes
7

That’s a great tip, I’ll try it out for sure.

8

I think that my use case is a bit more complex. Using react-intl and material-ui.

const links = [
  // account
  {path: '/signIn', name: 'signIn', page: SignIn, layoutType: MainLayoutNormal},
...
}

links.forEach((link => {
  FlowRouter.route(link.path, {
    name: link.name,
    action() {
      ReactLayout.render(link.layoutType,
        {content() {return React.createElement(link.page, intlData)}
    })}
  })
}))
9

My question is, can I remove the jQuery package altogether?

1 Like
10

I don’t see why not. If you have any packages that depend on it, it won’t truly go away (you’ll still see it listed in .meteor/versions).

11

Is there any jquery-esque way to do animation for React? I was actually really surprised when it was time to fade in my first element in React and I read this :

React fade in an element.

  render: function() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
        <h1>Fading at Initial Mount</h1>
      </ReactCSSTransitionGroup>
    );
  }

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

Jquery fade in an element.

onRender = function(){
  $('div').fadeIn()
}
12

Yeah, I think this library is great: https://www.npmjs.com/package/velocity-react

I know some people who use it and are quite happy with it.

3 Likes
13

Oh wow, thanks for that!! Nice to have a shorter way of using ReactCSSTransitionGroup.

14

I have a lot of “Masking” on my input fields that use JQuery packages, this will all break once I go to react I’m sure. Can I somehow use the existing JQuery packages in React?

15

What do you mean by “masking”?

16

For example like a phone number input. The input will have a ( ) ___ - ____ it’s a mask on the input to guide the user. This is all in JQuery.

17

You could try to keep using jQuery, another option is something like https://github.com/insin/react-maskedinput

2 Likes
18

BTW… 1000000 thanks to MDG for 1.3. Opening us up to the wealth of NPM packages out there has opened so many doors. I know we could’ve done this before 1.3, but I didn’t like the process to get there. Nice to have this out of the box.

1 Like
19

With only Meteor core packages installed, jQuery still remains in my .meteor/versions, as well as Blaze.

I’ve removed these packages though. If I’m using React, do I have to ship with jQuery and Blaze?

20

You get a Blaze dependency on the server from WebApp. This doesn’t ship Blaze to the client, so it doesn’t really matter. I don’t know about jQuery.

Basically, .meteor/versions doesn’t mean that your client-side bundle is actually using it.

1 Like