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 in Web Development by gaurav
• 17,400 points
12 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.

answered Jun 22 by rajatha
• 7,040 points

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 in Web Development by rajatha
• 7,040 points
21 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 in Web Development by gaurav
• 17,400 points
28 views
0 votes
0 answers
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 in Web Development by gaurav
• 17,400 points
6 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,740 points
350 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 6 days ago in Web Development by rajatha
• 7,040 points
8 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,500 points
306 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,740 points
8,814 views
0 votes
1 answer

how to use substr() function in jquery?

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

answered Jun 27 in Web Development by rajatha
• 7,040 points
12 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 in Web Development by rajatha
• 7,040 points
19 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP