Cómo usar JQuery con ReactJS

Question 1

Soy nuevo en ReactJS. Anteriormente, usé jQuery para configurar cualquier animación o función que necesitaba. Pero ahora estoy tratando de usar ReactJS y minimizar el uso de jQuery.

Mi caso es:

Estoy tratando de construir un acordeón con 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>

usando JQuery :

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

Mi pregunta:

¿Cómo puedo hacer esto con ReactJS?

Question 2

Debería intentar evitar jQuery en ReactJS. Pero si realmente quiere usarlo, lo pondría en la función de ciclo de vida componentDidMount () del componente.

p.ej

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

  // ...
}

Idealmente, querrá crear un componente de acordeón reutilizable. Para esto, puede usar Jquery, o simplemente usar javascript + CSS simple.

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>
    )
  }
}

Entonces puedes usarlo en cualquier componente así:

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>
    );
  }
}

Enlace de Codepen aquí: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (Cambié este enlace a https ^)

Question 3

Sí, podemos usar jQuery en ReactJs. Aquí te diré cómo podemos usarlo usando npm.

Paso 1: Vaya a la carpeta de su proyecto donde el package.jsonarchivo está presente a través del terminal usando el comando cd.

paso 2: escriba el siguiente comando para instalar jquery usando npm:npm install jquery --save

paso 3: Ahora, importe $desde jquerysu archivo jsx donde necesita usar.

Ejemplo :

escribe lo siguiente en 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

escribe lo siguiente en 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>

Question 4

Paso 1:

npm install jquery

Paso 2:

touch loader.js

En algún lugar de la carpeta de su proyecto

Paso 3:

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

Etapa 4:

Importe el cargador a su archivo raíz antes de importar los archivos que requieren jQuery

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

Paso 5:

Ahora use jQuery en cualquier lugar de su código:

//SomeReact.js
class SomeClass extends React.Compontent {

...

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

...

export default SomeClass

Question 5

Anteriormente, tenía problemas al usar jquery con React js , así que seguí los pasos para que funcionara:

npm install jquery --save
Luego, import $ from "jquery";

Mira aquí

Question 6

Para instalarlo, simplemente ejecute el comando

npm install jquery

o

yarn add jquery

entonces puedes importarlo en tu archivo como

import $ from 'jquery';

Answer 1

84

Soy nuevo en ReactJS. Anteriormente, usé jQuery para configurar cualquier animación o función que necesitaba. Pero ahora estoy tratando de usar ReactJS y minimizar el uso de jQuery.

Mi caso es:

Estoy tratando de construir un acordeón con 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>

usando JQuery :

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

Mi pregunta:

¿Cómo puedo hacer esto con ReactJS?

javascript jquery reactjs ND.Santos
fuente

¿Puede consultar este enlace? Puede ayudarlo a discutir.reactjs.org/t/jquery-with-react/683

Codebrekers

Encontré un tutorial útil aquí en este video - youtu.be/AMMetkCvztg

Prem

4

Por favor, trate de no usar jQueryel interior react...

quirimmo

1

Consulte reactjs.org/docs/integrating-with-other-libraries.html con una explicación de por qué no se recomienda utilizar jQuery dentro de react. De stackoverflow.com/a/46946447/52277

Michael Freidgeim

esto es shatnez! evítelo: D en.wikipedia.org/wiki/Shatnez

Joey Baruch

Answer 2

¿Puede consultar este enlace? Puede ayudarlo a discutir.reactjs.org/t/jquery-with-react/683

Codebrekers

Answer 3

Encontré un tutorial útil aquí en este video - youtu.be/AMMetkCvztg

Prem

Answer 4

4

Por favor, trate de no usar jQueryel interior react...

quirimmo

Answer 5

1

Consulte reactjs.org/docs/integrating-with-other-libraries.html con una explicación de por qué no se recomienda utilizar jQuery dentro de react. De stackoverflow.com/a/46946447/52277

Michael Freidgeim

Answer 6

esto es shatnez! evítelo: D en.wikipedia.org/wiki/Shatnez

Joey Baruch

Answer 7

Debería intentar evitar jQuery en ReactJS. Pero si realmente quiere usarlo, lo pondría en la función de ciclo de vida componentDidMount () del componente.

p.ej

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

  // ...
}

Idealmente, querrá crear un componente de acordeón reutilizable. Para esto, puede usar Jquery, o simplemente usar javascript + CSS simple.

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>
    )
  }
}

Entonces puedes usarlo en cualquier componente así:

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>
    );
  }
}

Enlace de Codepen aquí: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (Cambié este enlace a https ^)

Answer 8

Thx jzm .. Pero todavía necesito información sobre su código. No entiendo muy bien lo que significa. ¿Puede explicarnos acerca de esto: 1. ref = {a => this._acc = a} 2. deje 3. this._acc.children Gracias 4 su ayuda :)

ND.Santos

Answer 9

1

@ ND.Santos Lea esta página: facebook.github.io/react/docs/more-about-refs.html esa es la sintaxis de referencia de devolución de llamada. Entonces, en lugar de ref = "accordion" o lo que sea, usa lo que yo uso y devuelve el nodo. string ref se considera heredado. this._acc = llamando al nodo ref (es decir, creas una especie de variable que hace referencia al nodo, para que puedas llamarlo como quieras). 'niños' son los elementos secundarios que se encuentran dentro <Accordion>. En mi enlace de codepen, puede agregar console.log(this._acc)para ver qué es realmente.

mnsr

Answer 10

Nice @mnsr ¿Puede explicar la razón para usar el método componentDidMount () allí?

Eddie Lam

Answer 11

Sí, podemos usar jQuery en ReactJs. Aquí te diré cómo podemos usarlo usando npm.

Paso 1: Vaya a la carpeta de su proyecto donde el package.jsonarchivo está presente a través del terminal usando el comando cd.

paso 2: escriba el siguiente comando para instalar jquery usando npm:npm install jquery --save

paso 3: Ahora, importe $desde jquerysu archivo jsx donde necesita usar.

Ejemplo :

escribe lo siguiente en 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

escribe lo siguiente en 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>

Answer 12

3

Muy útil para reaccionar js novatos como yo

venugopal

Answer 13

21

Paso 1:

npm install jquery

Paso 2:

touch loader.js

En algún lugar de la carpeta de su proyecto

Paso 3:

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

Etapa 4:

Importe el cargador a su archivo raíz antes de importar los archivos que requieren jQuery

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

Paso 5:

Ahora use jQuery en cualquier lugar de su código:

//SomeReact.js
class SomeClass extends React.Compontent {

...

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

...

export default SomeClass

David Joos
fuente

Intenté esto, pero no pude usar $en ningún componente.

Reema Parakh

De acuerdo, es bastante duro decir algo a tu problema. Puede comprobar los pasos. window.$ = ...asegura que tenga acceso a $cualquier parte de su código si lo ha empaquetado / importado correctamente en la raíz de su proyecto.

David Joos

1

Sí, olvidé importar $en componente. Gracias.

Reema Parakh

1

Podría usar jquery con import $ from 'jquery';"pero no pude depurarlo en webstorm hasta que usé su paso 3,window.$ = window.jQuery = require('jquery')

Kuronashi

Aunque esta es una publicación anterior, me gusta este enfoque en lugar de window. $, Ya que nos da la flexibilidad de usar $. Especialmente para aquellos scripts que necesitamos cargar y necesitamos usar fuera de React.

Helmut Granda

Answer 14

Intenté esto, pero no pude usar $en ningún componente.

Reema Parakh

Answer 15

De acuerdo, es bastante duro decir algo a tu problema. Puede comprobar los pasos. window.$ = ...asegura que tenga acceso a $cualquier parte de su código si lo ha empaquetado / importado correctamente en la raíz de su proyecto.

David Joos

Answer 16

1

Sí, olvidé importar $en componente. Gracias.

Reema Parakh

Answer 17

1

Podría usar jquery con import $ from 'jquery';"pero no pude depurarlo en webstorm hasta que usé su paso 3,window.$ = window.jQuery = require('jquery')

Kuronashi

Answer 18

Aunque esta es una publicación anterior, me gusta este enfoque en lugar de window. $, Ya que nos da la flexibilidad de usar $. Especialmente para aquellos scripts que necesitamos cargar y necesitamos usar fuera de React.

Helmut Granda

Answer 19

Anteriormente, tenía problemas al usar jquery con React js , así que seguí los pasos para que funcionara:

npm install jquery --save
Luego, import $ from "jquery";

Mira aquí

Answer 20

5

Para instalarlo, simplemente ejecute el comando

npm install jquery

o

yarn add jquery

entonces puedes importarlo en tu archivo como

import $ from 'jquery';

Guru Prasad mohapatra
fuente

Obtuve "El motor" nodo "es incompatible con este módulo. ¡Versión esperada" 5. * "!

Altanai

Answer 21

Obtuve "El motor" nodo "es incompatible con este módulo. ¡Versión esperada" 5. * "!

Altanai

Cómo usar JQuery con ReactJS

Respuestas: