Jquery in React JS

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.

Comments

[Posandu]

Don't use jQuery inside React

[Shubham Tiwari]

I am learning both jQuery and React at the same time so I combined both of them so that i don't have to practice seperately 😂😂

[Posandu]

Practice reactjs separately, It's good than learning jQuery

[Shubham Tiwari]

Okayz

[Shubham Tiwari]

Yeh I am learning just the animation and dom manipulation part and then I will be like "what is jQuery I never heard about it before" 😂😂

[Shubham Tiwari]

Sure sir

[Shubham Tiwari]

Yeah but I have to pass my semester exams so I have to learn jQuery and I mixed it with react because I love react 😂😂

[Shubham Tiwari]

I am practicing jQuery because its a subject in my University course and I have to pass the exams😂😂