How to use JQuery with ReactJS

0 votes

I'm new to ReactJS. Previously I've used jQuery to set any animation or feature that I needed. But now I'm trying to use ReactJS and minimize the use of jQuery.

My Case is:

I'm trying to build an accordion with ReactJS.

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

using JQuery:

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

My Question:

How can I do this with ReactJS?

Jun 22, 2022 in Web Development by gaurav
• 23,260 points
14,750 views

1 answer to this question.

0 votes

Yes, we can use jQuery in ReactJs. Here I will tell how we can use it using npm.

step 1: Go to your project folder where the package.json file is present via using terminal using cd command.

step 2: Write the following command to install jquery using npm : npm install jquery --save

step 3: Now, import $ from jquery into your jsx file where you need to use.

For more information, you can refer to our React Js course today. 

answered Jun 22, 2022 by rajatha
• 7,680 points

edited Dec 15, 2023 by Soumya

Related Questions In Web Development

0 votes
1 answer

How to use Jquery filter?

jQuery | filter() with Examples The filter() method ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
538 views
0 votes
0 answers

How to scroll to top of page with JavaScript/jQuery?

Is there a way to control browser ...READ MORE

Jul 1, 2022 in Web Development by gaurav
• 23,260 points
2,274 views
0 votes
0 answers

How to use colored circles in ASP Dropdownlist ListItems? (without jQuery)

Goal: I would like to have a ...READ MORE

Jul 27, 2022 in Web Development by gaurav
• 23,260 points
363 views
0 votes
0 answers

how to spin and stop wheel has custom position with jquery

this i my code. I am using this ...READ MORE

Jul 27, 2022 in Web Development by gaurav
• 23,260 points
1,655 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,840 points
1,042 views
0 votes
1 answer

Unsure how to turn this jQuery code to React

You can initialize a state for navTrigger whic tell ...READ MORE

answered Aug 5, 2022 in Web Development by rajatha
• 7,680 points
1,130 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,342 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,795 views
0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,274 views
0 votes
1 answer

How to hide a div with jQuery?

We hide the divs by adding a CSS ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
435 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP