Jquery in React JS

#javascript #react #html #css

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;