Cómo usar JQuery con ReactJS

Si hallas algún problema con tu código o trabajo, recuerda probar siempre en un entorno de testing antes subir el código al proyecto final.

Solución:

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

paso 1: Vaya a la carpeta de su proyecto donde se encuentra el package.json el archivo está presente mediante el uso de la terminal mediante el comando cd.

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

paso 3: Ahora, importa $ desde jquery en su archivo jsx donde necesita usar.

Ejemplo:

escribe lo siguiente en índice.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 índice.html

    
    


    
    

        
Let jQuery AJAX Change This Text
    
    Get External Content

Debería intentar evitar jQuery en ReactJS. Pero si realmente desea usarlo, lo colocaría en la función de ciclo de vida del componente.

p.ej

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

  // ...

Idealmente, le gustaría crear un componente de acordeón reutilizable. Para esto, puede usar Jquery, o simplemente usar 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 (
      
 this._acc = a 
        onClick=this._handleClick>
        this.props.children
      
    )
  

Entonces puedes usarlo en cualquier componente así:

class App extends React.Component 
  render() 
    return (
      

        
          

            
Head 1
            

          
        
      
    );
  

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

Paso 1:

npm install jquery

Paso 2:

touch loader.js 

En algún lugar de la carpeta de tu proyecto

Paso 3:

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

Paso 4:

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

//App.js
import '/loader.js'

Paso 5:

Ahora use jQuery en cualquier parte 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

Sección de Reseñas y Valoraciones

Si conservas alguna duda o capacidad de limar nuestro artículo puedes añadir una interpretación y con gusto lo leeremos.

---

---

Utiliza Nuestro Buscador