How to Use Jquery with Reactjs

How to use JQuery with ReactJS

You should try and avoid jQuery in ReactJS. But if you really want to use it, you'd put it in componentDidMount() lifecycle function of the component.

e.g.

class App extends React.Component {
  componentDidMount() {
    // Jquery here $(...)...
  }
  
  // ...
}

Ideally, you'd want to create a reusable Accordion component. For this you could use Jquery, or just use plain javascript + CSS.

class Accordion extends React.Component {
  constructor() {
    super();
    this._handleClick = this._handleClick.bind(this);
  }
  
  componentDidMount() {
    this._handleClick();
  }
  
  _handleClick() {
    const acc = this._acc.children;
    for (let i = 0; i < acc.length; i++) {
      let a = acc[i];
      a.onclick = () => a.classList.toggle("active");
    }
  }
  
  render() {
    return (
      <div 
        ref={a => this._acc = a} 
        onClick={this._handleClick}>
        {this.props.children}
      </div>
    )
  }
}

Then you can use it in any component like so:

class App extends React.Component {
  render() {
    return (
      <div>
        <Accordion>
          <div className="accor">
            <div className="head">Head 1</div>
            <div className="body"></div>
          </div>
        </Accordion>
      </div>
    );
  }
}

Codepen link here: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110

What is the right way to use Jquery in React?

Is this approach correct? Is it the right way?

No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.

jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them. Typically, it selects an existing <div> and sets its text.

The other frameworks don't manipulate the DOM; they generate it from data, and regenerate it whenever this data changes (for instance after an Ajax call).

The problem is, jQuery has no clue about React's presence and actions, and React has no clue about jQuery's presence and actions.

This will necessarily lead to a broken application, full of hacks and workarounds, unmaintainable, not to mention that you have to load two libraries instead of one.

For instance, jQuery will select a <button> and add it a .click() listener; but a split second later, React/Angular/Vue might regenerate the DOM and the button in the process, voiding jQuery's .click(). So you'll ask a question on Stackoverflow, wondering why the heck does your .click() not work. You'll end up adding a dirty setTimeout() hack, in order to delay jQuery's click() handler attachment until after React has regenerated your button. It's straight up your highway to hell.

Solution : use jQuery OR (React/Angular/Vue), not both together.

how can I use Jquery in reactjs

You can init jQuery function after react initial render - just call it from componentDidMount.

Is it a bad practice to use jQuery in ReactJS?

It's a bad practice because React uses a concept called a Virtual DOM instead of a real DOM. And React isn't aware of the changes made outside of this Virtual DOM. When you use jQuery or any other library that manipulates the DOM, React gets confused.

If you want to use jQuery for AJAX purposes, you can just use a library specifically made for AJAX, like Axios or the native Fetch API.

Jquery in React is not defined

Try add jQuery to your project, like

npm i jquery --save

or if you use bower

bower i jquery --save

then

import $ from 'jquery'; 

---

Related Topics