¿Debo usar React con jQuery?

Absolutamente no ( con la excepción de quizás usarlo para hacer llamadas ajax ) . No abarrotes tu código React con jQuery.

Ni siquiera usaría jQuery para leer el DOM. Manipular el DOM con jQuery dentro de React es simplemente desagradable … un gran antipatrón para la forma de codificación React.

Codigo de producción

1. Con el estilo / convención React de programación, significa que el desarrollador debe luchar por la simplicidad. Los desarrolladores deberían preferir descomponer el código en componentes simples muy pequeños. Si mantiene sus componentes pequeños, el JS debería ser bastante mínimo en cada componente porque los ha dividido en módulos muy pequeños para que cada módulo tenga menos JS. (nota al margen, primero desarrollo toda mi prueba de código, por lo que para mí TDD, naturalmente, me ayuda mucho a recordar esto, ya que codifico obligándome a modularizar mi código JS a menudo)
2. Las solicitudes de Ajax y la lógica de estado deben estar en componentes separados o módulos separados que sus componentes de presentación. Mantenga esas cosas JS de vainilla si puede … intente mantener jQuery fuera de eso que no sean llamadas ajax. Estoy de acuerdo en que el código xhr es simplemente feo.

Pruebas

1. No lo uses en las pruebas. Debe representar un componente que desee probar en algo como jsdom y usar marcadores (clases css) en su React JSX que le brinde un punto de “inicio” para el componente renderizado en el que comenzar a trabajar (leer valores de elementos DOM representados o lo que sea )
2. Para trabajar con el componente renderizado en las pruebas, use React Test Utils y renderice el componente a algo como JSDOM, luego simplemente use la API web (navegador) usando los selectores css para atravesar el DOM (usando querySelector):

const component = render (),
renderingComponent = find (componente, ‘.ft-company-list’);
renderingComponent [index] .querySelector (‘span’). textContent;

1. O use Enzyme de airbnb (y renderice componentes a jsdom) que pone un buen envoltorio (y una huella mucho más pequeña que usar algo como jQuery ) que se casa con la manipulación DOM de la API web para trabajar con componentes React para que pueda hacer una forma similar a jQuery probar sus componentes de reacción básicamente sin tener que usar querySelector sin procesar de la API web y otras construcciones de API web de nivel inferior. Podría hacer lo anterior, algo así, donde el contenedor es su enzima que envuelve su componente de reacción renderizado, que luego puede usar la API de enzima para trabajar con el DOM en el componente renderizado:

const wrapper = mount ();
esperar (wrapper.find (‘. ft-company-list’). childAt (0) .text) .to.equal (‘algo’);

(Este es un código inventado / pseudo para Enzyme aquí, no lo he ejecutado, por lo que puede que no funcione, pero tienes la idea con Enzyme).

Lo bueno de Enzyme es que está a medio camino entre algo como la API web sin procesar y algo como jQuery. No eres tan “tonto” usando Enzyme porque todavía te enseña a usar la API web, más cerca de cómo es la sintaxis de la API web … en lugar de dejarte completamente desorientado y solo confías en “oh, solo hace esto por mí” , es un completo agujero negro de magia “… que para mí no es bueno confiar como desarrollador en estos días, especialmente a medida que las aplicaciones JS y la web han crecido en complejidad.

Mantenga las cosas tan simples como pueda .

Código de prueba : desea que su código de prueba , la infraestructura de prueba sea lo más simple posible. La introducción de bibliotecas, marcos, etc., donde especialmente en las pruebas, muchas veces podría prescindir (puede prescindir cuando ha mantenido su código de producto muy simple y dividido en muchos módulos pequeños) introduce complejidad en sus pruebas.

Código de prueba y producción : Sí, habrá muchas aplicaciones de middleware que usará con las aplicaciones Node. PERO primero trate de mantenerse alejado de los valores predeterminados para usar marcos o bibliotecas cada vez que necesite poder hacer algo que no haya hecho antes (no sea feliz el marco, el middleware o la biblioteca). ¡Mire y vea lo que podría hacer primero con su cerebro, o primero mire para ver qué bibliotecas ya usa que podría aprovechar! Sin usar un marco de trabajo o biblioteca cada vez que necesite algo, tal vez también aprenda algunas cosas que de otra manera no habría aprendido.

Por favor, por favor, no lo hagas. He escrito múltiples aplicaciones de producción a gran escala en React y no he encontrado ningún caso de uso en el que realmente necesitara jQuery.

En primer lugar, es una gran biblioteca. Si cree que necesita jQuery para esa característica “crítica” o Ajax, es flojo, está equivocado o no ha buscado lo suficiente en otras posibles soluciones.

El riesgo de una paliza DOM solo hace que no valga la pena. Reaccionar y la velocidad que trae se debe a la “dom virtual”. Aunque Facebook está tratando de alejarse de ese término, siento que expresa el concepto bastante bien. Cuando una biblioteca como jQuery manipula el DOM, no se alinea con el “DOM virtual” de Reacts, lo que hace que React pierda el rastro de lo que está sucediendo. Luego comenzará a vomitar y vomitar errores de identificación de datos.

Tldr:

No lo hagas Hay otras formas, lo prometo. Ajax solicita? Usa axios o busca. UI bibliotecas? Busca cualquiera de los múltiples React específicos o crea el tuyo propio. ¿Inserción de nuevos elementos DOM, cambio de datos, etc.? Bueno, para eso fue construido React. 🙂

No … t sin una razón excepcionalmente buena.

El concepto detrás de React es abstraer las costosas manipulaciones del DOM al reducir la cantidad mínima de instrucciones necesarias para migrar de un render de aplicación a la siguiente.

En la mayoría de los casos, jQuery es antitético a esto, ya que con frecuencia está creando referencias superfluas y extrañas al DOM y, si realiza cambios en él, esos cambios son desconocidos para la implementación del DOM virtual de React, lo que causará problemas de representación que lo obligarán a tomar precauciones especiales o realizar una reconciliación manual.

Así que quédate con AJAX, ¿verdad?

Cielos, no! No hay ninguna razón para importar todo jQuery solo para AJAX: hay muchas otras bibliotecas que pueden obtener exactamente lo que necesita sin la hinchazón. Superagent es lo primero que viene a la mente, seguido de cerca por Axios si prefiere las promesas. Usar jQuery exclusivamente para AJAX sería como usar un ataque nuclear táctico para deshacerse de la congestión en la carretera: efectivo, pero tenga en cuenta su experiencia de usuario.

Pero … ¿qué pasa con ?

Afortunadamente, React tiene un ecosistema masivo que significa que la mayoría de las cosas importantes que se hicieron usando la manipulación directa de DOM se han adaptado al estilo diferente de DOM de React. Desafortunadamente, la integración no es del 100%, y a veces las integraciones existentes no son tan buenas.

Como dije antes, la manipulación manual de DOM es algo así como un antipatrón cuando se realiza junto con React, pero no es imposible. Si maneja su estado de aplicación con mucho cuidado y presta especial atención al ciclo de vida de los componentes de React, puede utilizar fragmentos de código existentes de las bibliotecas de manipulación DOM (como jQuery o D3) junto con React.

Dicho esto, esos componentes particulares carecen de las ventajas aportadas por React.

¿Alguna pregunta? ¡No dudes en contactarme en los comentarios!

Cuando trabaje en ract y jquery, debe saber que reaccionar no funciona directamente en DOM, funciona en DOM virtual. Cuando realice cambios en DOM utilizando jquery, React DOM seguirá siendo el mismo que el anterior. así que después de cualquier render desde ese componente, volverá al estado anterior. Los cambios de Jquery no permanecerán en DOM.
Otra cosa es que Jquery es una gran biblioteca de manipulación de DOM, y reaccionar también es otra lib. No es bueno usar varias bibliotecas a la vez, ya que aumentará el tiempo de carga y podría afectar el rendimiento de la aplicación.

La mayoría de las respuestas son iguales y correctas aquí.

Quiero agregar aquí mis pensamientos también

> La actualización directa del Modelo de objetos de documento (DOM) es ineficiente y lenta. La ayuda del DOM virtual de React para eliminar esa ineficiencia, pero usar jQuery hará lo mismo nuevamente actualizando el DOM directamente. El verdadero propósito de React se ignora si usamos jQuery.

Estoy de acuerdo con la mayoría de las respuestas anteriores que indican que no. Sin embargo, Foundation es una excelente biblioteca de animación CSS / JS, que es mucho más fácil de implementar con Jquery como dependencia para seleccionar / manipular elementos DOM.

He usado React / Foundation / Jquery bien juntos en esta instancia específica. Aparte de eso, tengo que estar de acuerdo con el resto, ya que agregar jQuery a una aplicación React es redundante y probablemente confundiría a los buenos codificadores React que podrían leer / contribuir a su código.

No. La Biblioteca JQuery es excelente para la manipulación de dom, pero eso ya está sucediendo con el dom virtual en la biblioteca de reacción.

Dicho esto … Lo he visto hecho, pero para elementos estáticos y sin estado.

_SI

Depende de las tareas del proyecto. Si desea manipular con nodos DOM generados por React a través de jQuery, no puede hacerlo.
Pero si necesita conectar un control deslizante jQuery (de la gran cantidad de opciones), entonces React le brinda la oportunidad de hacerlo de forma segura.

Casi lo único para lo que deberías usar jQuery en una aplicación React es usar Ajax.

jQuery Ajax es una forma asincrónica de realizar solicitudes HTTP que le permite utilizar el despacho de Redux o el setState de sus componentes como devolución de llamada.

Por ejemplo, si desea utilizar un componente en su aplicación para realizar una solicitud POST a la API de su aplicación, puede escribir:

Para la manipulación DOM, quédate con React.

jQuery proporciona formas más fáciles de manipular dom. La mayoría de las características de jQuery ahora están disponibles en los motores JavaScript nativos del navegador. React utiliza una forma eficiente y más rápida de construir su dom usando JavaScript. Cuando construye componentes React, define cómo manipular dom para cualquier cambio de estado o evento externo. Creo que no deberías mezclarlos a ambos

Si necesita jQuery cuando usa React, probablemente esté usando React de forma incorrecta. jQuery es una biblioteca de manipulación DOM y el punto principal de usar React es abstraer la manipulación DOM lejos de ti.