Do I need jQuery when using React?

react
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
21

Sorry for opening up this old thread, but as I’m knee deep in transforming to a React setup (oh man, the amount of rewrites is crazy :)). So I figured just as the OP, that I could remove jQuery as well, I want to have a as clean setup as I can get.

No matter what I try, I can’t seem to get rid of jQuery in “development” mode. It is always loaded to the client. Is this because of some weak dependencies to it somewhere? e.g. the earlier mentioned “webapp”. Will that mean it will only get loaded in development mode and not in production?

I’ve echo’d the dependencies list using the bash command above, no mention of jQuery anywhere. Only weak references to “templating” and “webapp”.

edit: I’ve just tested the production build. jQuery 1.11.2 is still loaded there on the client :frowning:

1 Like
22

I’m with you on that as well.

23

jQuery is not needed. It is already installed in Meteor as default. Are you planning to install jQuery via NPM?

24

I think you’re misunderstanding us. We don’t want jQuery. It adds to build times and network load.

4 Likes
25

I just installed a chrome extension (wappalyzer) that analyses websites and reports on the technologies used to build them. Even though I removed jQuery from Meteor packages, it’s still detecting jQuery as a site dependency. Can it be removed from Meteor altogether?

26

Yes, we have removed jQuery completely from the client bundle. You need to track down all your NPM and Meteor package dependencies to make sure nothing is pulling it in.

27

Thank you for the reply. Any tips on tracking down indirect dependencies?

Edit: I’m familiar with npm list and meteor show.

28

Takes some brute force. Look through the package.js source file for all the Meteor packages you are including for the Package.onUse section for any api.use('jquery', 'client'); calls (also without the client option). Also, check for other dependencies that have known jquery client dependencies like accounts-ui-unstyled. You have to check any and all “suspect” packages and their full dependency chains. Make sure any NPM packages you are including are also not bringing in jQuery. Like I said, brute force.

We don’t use many Meteor or 3rd party Atmosphere packages so it was not that difficult to remove jQuery from the client for us. You are still going to have jQuery in you server bundle as there is a dependency on the server from boilerplate-generator as it has a dependency on spacebars, which eventually pulls in jQuery. I think there is an open Github issue on this and probably someone could remove this server dependency without much effort, but we don’t have the time or the desire. Good luck!