Geek Answers Handbook

How to use jQuery with ReactJS

I am new to ReactJS. Earlier, I used jQuery to install any animation or function I needed. But now I'm trying to use ReactJS and minimize the use of jQuery.

My case is this:

I am trying to create 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 is:

How can I do this with ReactJS?

+25
source share
4 answers

You should try to avoid jQuery in ReactJS. But if you really want to use it, you would put it in the componentDidMount () component life cycle function.

eg

 class App extends React.Component { componentDidMount() { // Jquery here $(...)... } // ... }

Ideally, you would like to create a reusable Accordion component. You can use jquery for this or just use simple JavaScript + CSS.

 class Accordion extends React.Component { constructor() { super(); this._handleClick = this._handleClick.bind(this); } componentDidMount() { this._handleClick(); } _handleClick() { const acc = this._acc.children; for (let i = 0; i < acc.length; i++) { let a = acc[i]; a.onclick = () => a.classList.toggle("active"); } } render() { return ( <div ref={a => this._acc = a} onClick={this._handleClick}> {this.props.children} </div> ) } }

Then you can use it in any component like this:

 class App extends React.Component { render() { return ( <div> <Accordion> <div className="accor"> <div className="head">Head 1</div> <div className="body"></div> </div> </Accordion> </div> ); } }

Codepen link here: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (I changed this link to https ^)

+27
source

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

Step 1: Go to your project folder where the package.json file is present using the terminal using the 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.

Example:

write below in index.jsx

 import React from 'react'; import ReactDOM from 'react-dom'; import $ from 'jquery'; // react code here $("button").click(function(){ $.get("demo_test.asp", function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); }); // react code here

write below in index.html

 <!DOCTYPE html> <html> <head> <script src="index.jsx"></script> <!-- other scripting files --> </head> <body> <!-- other useful tags --> <div id="div1"> <h2>Let jQuery AJAX Change This Text</h2> </div> <button>Get External Content</button> </body> </html>
+62
source

Step 1:

 npm install jquery

Step 2:

 touch loader.js

Somewhere in the project folder

Step 3:

 //loader.js window.$ = window.jQuery = require('jquery')

Step 4:

Import the bootloader to the root file before importing files requiring jQuery

 //App.js import '<pathToYourLoader>/loader.js'

Step 5:

Now use jQuery anywhere in your code:

 //SomeReact.js class SomeClass extends React.Compontent { ... handleClick = () => { $('.accor > .head').on('click', function(){ $('.accor > .body').slideUp(); $(this).next().slideDown(); }); } ... export default SomeClass
+6
source

I previously ran into a problem when using jquery with React js , so I took the following steps to make it working-

  1. npm install jquery --save

  2. Then import $ from "jquery";

    View here

+3
source

More articles:


All Articles