Usando jQuery en React correctamente

1. ¿Puedes usar jQuery en React?
2. La forma correcta de usar jQuery en React
3. ¿Deberías usar jQuery en React?

jQuery es una de las bibliotecas más conocidas utilizadas por los desarrolladores de JavaScript.

La biblioteca proporciona una manera fácil de realizar manipulación y animación de DOM, por nombrar algunos. Debido a su popularidad, muchos desarrolladores web están familiarizados con él y prefieren usar jQuery cuando pueden.

React es otra biblioteca popular desarrollada por Facebook. En los últimos años, se ganó el título de marco JavaScript más utilizado.

Podría decirse que es más moderno y tiene más funciones que jQuery. Si bien puede usar ambas bibliotecas en una sola aplicación, existen reglas para usar jQuery dentro de las aplicaciones React.

¿Puedes usar jQuery en React?

Es posible usar jQuery en una aplicación React, siempre que lo use correctamente y elija su ubicación con cuidado. Del mismo modo, puede incrustar React en jQuery.

¿Cuáles son las limitaciones de jQuery en React?

La principal limitación de usar jQuery en React es que jQuery actualiza manualmente el DOM. Por otro lado, React tiene su sistema para realizar cambios en el DOM.

Determina internamente cuándo se debe volver a renderizar una aplicación o componente de React. También determina qué partes de la interfaz de usuario deben actualizarse.

Por lo tanto, cuando usa jQuery para manipular el DOM, React se confunde. Por eso, en circunstancias normales, se considera una mala práctica usar jQuery en React, pero hay excepciones.

La forma correcta de usar jQuery en React

Primero, debe instalar la biblioteca jQuery y luego importarla, así:

import $ from 'jquery';

Como ya mencionamos, jQuery y React son dos bibliotecas relacionadas con la manipulación de DOM. Para asegurarnos de que jQuery no interfiera con React, debemos crear un componente que React nunca actualice.

¿Cómo podemos hacer esto? Como sabrá, los componentes de React se vuelven a renderizar cuando cambian su state o props. Así que tenemos que construir un componente que no tenga ningún state o props.

Veamos un ejemplo:

class App extends Component {
  componentDidMount(){
        $("p").hide()
  }
  render() {
    return <div>
              <p>Hi! Try edit me</p>
           </div>;
  }
}

Para asegurarnos de que React nunca actualice el DOM para el componente App, no iniciamos ningún estado ni usamos ningún valor prop. Nuestra declaración de retorno consiste en el envoltorio estático y los elementos de párrafo.

De esta manera, podemos despejar el camino para que el complemento jQuery manipule el DOM y oculte todos los elementos del párrafo directamente.

Otra buena forma de seleccionar elementos DOM directamente es usar una ref.

¿Deberías usar jQuery en React?

React tiene características integradas que te permiten manipular el DOM en la mayoría de los casos. Trabajar dentro del marco de los componentes de React le permite controlar el comportamiento y la apariencia de su aplicación.

Si está seguro de que necesita usar jQuery y mantenerse dentro de las limitaciones establecidas anteriormente, puede hacerlo. Sin embargo, jQuery tiene un conjunto limitado de aplicaciones dentro de React.