React with JQuery

Question

I am rebuilding a project from JQuery、Bootstrap... to React and have some concept need to clarify.

A sample with JQuery: I have an element which has a click function called ShowTarget and the function will use JQuery toggle.

 function ShowTarget() {
        $('#target').toggle("blind", 500);
    }

I know how to use React click event to show or hide the #target element but now I need the ("blind", 500) transaction effect.

In this case, implement the transaction effect with CSS by myself or bind React with JQuery, which one is better?

And I see the ReactTransitionGroup in React official site, maybe this one?

score 2 · Accepted Answer · edited May 23 '17 at 11:51

You can use a 'ref' to get access to the actual DOM node as explained here, then just call the jQuery function required.

let HelloComponent = React.createClass({
    clickHandler(){
    $(this.refs.h1).toggle("blind", 500);
  },
    render(){
    return (
        <div>
        <h1 ref='h1'>Hello, world!</h1>
        <button onClick={this.clickHandler}>Fade</button>
      </div>
    ) 

  }
})


ReactDOM.render(
  <HelloComponent/>,
  document.getElementById('container')
);

https://jsfiddle.net/p757cbxp/

I've done similar with Bootstrap's Modal however its not recommended as you are changing the DOM without React's knowledge, but sometimes you just need existing code to work! This explains more about what is and isn't allowed in regards to DOM maniuplation without React's knowledge.

Codepunkt · Answer 2 · 2016-03-16T11:40:00.907

2

I don't mean to be rude, but i would not recommend to use jQuery with React. At all.

Add a className value to your JSX element on click and animate it with a CSS transition or animation. How you add that className is up to you - you could store the clicked state in a flux store and then apply/remove the correspondent className based on it.

Edited 16/03/2016:

Some good tips were given in the comments. You can go about this in a multitude of ways. The outlined way is the most simple one in terms of standard web technologies. Certainly, there are a lot of abstractions that can simplify things. I would recommend those only after you know how the basic principles work.

To do the actual animation, you can write the transition/animation yourself or use libraries such as animate.css.

React-based solutions like ReactTransitionGroup or ReactCSSTransitionGroup or the excellent react-motion for spring-based animations are also a good choice. I just think one should grasp the basic concepts and start with them before using higher-level abstractions.

edited Mar 16 '16 at 11:40

answered Mar 15 '16 at 08:49

Codepunkt

532
4
15

Thank you. I know using JQ in React in not recommend but in this case if I do not use the transaction effect which has been implemented by JQ then I need to implement it by myself. – MichaelMao Mar 15 '16 at 09:19
I would not use jQuery for the purpose of animating elements. Use libraries like [animate.css](https://daneden.github.io/animate.css/) to do so. – Codepunkt Mar 15 '16 at 12:54
This is a good advise. I saw the `ReactTransitionGroup` in React offiical website, how about this? – MichaelMao Mar 16 '16 at 02:07
I agree. Try hard not to use jQuery with React. Btw [animate.css](https://daneden.github.io/animate.css/) seems [cool](https://jsfiddle.net/p757cbxp/1/). – tgrrr Mar 17 '16 at 06:37

React with JQuery

2 Answers2