A lot of people ask or have a confusion, is it possible to use jQuery with React or is it okay to use both the libraries at a time!
I?ve got a rude answer to that.Don?t use jQuery. In most cases, you won?t need anything from jQuery when you?re properly using React. Well, the fact is ?in most cases? you don?t need. But sometimes when building large scale applications maybe you need to use jQuery plugins or a piece of jQuery functionality. When it?s not possible/very tough to write in React you haven?t got anyway.
Well, as this article is about using jQuery in React component let?s dive into it.
Firstly, you have to import the jQuery library. We also need to import findDOmNode as we?re going to manipulate the dom. And obviously, we are importing React as well.
import React from ‘react’;import { findDOMNode } from ?react-dom?;import $ from ?jquery?;
Let?s think we need some type of slide toggle onClick over an element. Well, we?re proceeding in ES 2015’s way.
We are setting an arrow function ?handleToggle? that will fire when an icon will be clicked. We?re just showing and hiding a div with a reference naming ?toggle? onClick over an icon. We must not use class/id to manipulate dom.
handleToggle = () => { const el = findDOMNode(this.refs.toggle); $(el).slideToggle(); };
We have this part of the information and on click, over the icon, we will show additional information.
<ul className=?profile-info?> <li> <span className=?info-title?>User Name : </span> Shuvo Habib </li> </ul>
Let?s now set the reference naming ?toggle? mentioned earlier, in JSX.
<ul className=?profile-info additional-profile-info-list? ref=?toggle?> <li> <span className=?info-email?>Office Email</span> [email protected] </li></ul>
The div element where we will fire the ?handleToggle? on onClick.
<div className=?ellipsis-click? onClick={this.handleToggle}> <i className=?fa-ellipsis-h?/> </div>
Let review the full code below, how it looks like.
import React from ?react?;import { findDOMNode } from ?react-dom?;import $ from ?jquery?;class FullDesc extends React.Component { constructor() { super(); }handleToggle = () => { const el = findDOMNode(this.refs.toggle); $(el).slideToggle(); };render() { return ( <div className=?long-desc?> <ul className=?profile-info?> <li> <span className=?info-title?>User Name : </span> Shuvo Habib </li> </ul><ul className=?profile-info additional-profile-info-list? ref=?toggle?> <li> <span className=?info-email?>Office Email</span> [email protected] </li> </ul> <div className=?ellipsis-click? onClick={this.handleToggle}> <i className=?fa-ellipsis-h?/> </div> </div> ); }}export default FullDesc;
We are done! This is the way, how we can use jQuery in React component.
Want to learn about Hooks in React JS?
Check the tutorial below.
