Hello Everyone today i am going to show you how to use Jquery in React JS.

JQuery -
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Installing JQuery

npm install jquery

Importing Jquery in React

import React, {useEffect} from 'react'
import $ from 'jquery' //importing jquery
window.jquery = window.$ = $ //loader js

HTML Part -

<button id='btn1' className='btn btn-dark btn-lg'>Fade</button>
<p className="jumbotron bg-dark text-light text-center" id="txt"> 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
book. 
</p>

JQuery Part -

useEffect(() => {
 if($){
    $('#btn1').click(e=>{
       $('#txt').fadeToggle();
    })
  }
},[$])

We have used the fadeToggle effect of jqeury on our paragraph with the help of button we have created.
(useEffect is different topic i had already cover it in one of my blog post)

Full Code -

import React, {useEffect} from 'react'
import $ from 'jquery' //importing jquery
window.jquery = window.$ = $ //loader js

function App(){

useEffect(() => {
 if($){
    $('#btn1').click(e=>{
       $('#txt').fadeToggle();
    })
  }
},[$])

return (
    <div>
    <button id='btn1' className='btn btn-dark btn-lg'>Fade</button>
    <p className="jumbotron bg-dark text-light text-center" id="txt"> 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
        an unknown printer took a galley of type and scrambled it to make a type specimen 
        book. 
    </p>


    </div>
)
}
export default App;

NOTE - I have used bootstrap also you can add bootstrap either through CDN or through npm!!

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT COMMENT SECTION.