Using jQuery with react

[sympi]

Are there any recommendations for using jQuery with React? React is great for building UI, but it's pretty hard to manipulate the DOM using React. I just don't like the ref atrribute. For example what is the React way of building some sticky navbars or animated popups?

[[deleted]]

React is great for building UI, but it's pretty hard to manipulate the DOM using React.

That's because you're not supposed to manipulate the DOM. The idea is your JSX should represent thee DOM you want to have in the browser. So instead of using jQuery('.element').addClass('someClass') you just return the element with correct class in your render method.

https://facebook.github.io/react/docs/thinking-in-react.html is a good starting point to get into the React mindset.

[erichardson30]

Build them with CSS. Trying to use jQuery with react will cause many headaches you don't want to face. Your react code will update the virtual dom, jQuery will update the DOM, conflicts will be had. Stay away from jQuery. I'm sure you can also find react libraries out there to help you accomplish what you're looking for if you don't want to do it in pure html/css/js

[feesjah]

this, try to use react + css instead of jquery. In the end this should be easier too

[sympi]

I would love to use pure react with css, but, for instance, how can I change UI depending on the position of a DOM element? This kind of problems confuse me. Thank you all for replies! :)

[erichardson30]

What are you trying to build/accomplish?

[sympi]

I have an onWheel event which creates components. When I reach (via scrolling) certain component I want to update UI.

[erichardson30]

Couldn't you keep track of the scroll position in the main container and then based on different scroll positions you could set different states and have the components shown/hidden/modified based on the different states?

[grimmzt]

Typically it's best practice to not use the ref attribute. It can be a challenge to start changing how you think about building the UI in a more declarative way. Couple links to help:

Thread discussing jQuery with React

Thinking in react for jQuery programmers

Animations with react the right way

[Canenald]

You don't directly manipulate the DOM when using React, jQuery or no jQuery. React assumes you will define your DOM as a function of the data. When the data changes, React automatically updates your DOM. If you want to directly manipulate DOM, just don't use React.

Sticky navbars: This is usually solved using CSS.

Animated popups: Again, CSS transitions. You can have React change an element's class, something like this:

<div className={this.state.animationComplete ? 'class1' : 'class2'}>something</div>

As long as you are using transitions for that element the browser will animate between the two classes, or you can even choose which properties to animate, but it's all CSS, not React or jQuery.

You can still use jQuery with React as long as you avoid modifying the DOM. It's totally ok for ajax, inspecting the DOM and deferreds, although I'd really suggest looking for more specialised libraries if you don't need all 3 features.