¿Vale la pena React.js?

Hola,

ReactJS es una biblioteca de JavaScript para crear interfaces de usuario, creada por los mejores ingenieros de Facebook. Hace que su interfaz sea realmente cómoda, lo que lo hace realmente único como una biblioteca del lado del cliente. El objetivo central de React.JS es desarrollar front-end de manera eficiente y reutilizar los complementos declarativos. Eso es lo que hace que React sea más eficiente en el encuadre. Se trata de crear componentes reutilizables. Sin embargo, a diferencia de los frameworks, que se crean con el objetivo de poner en funcionamiento aplicaciones completas rápidamente, lo único que puede hacer con React es crear componentes. Como la funcionalidad principal de React.js, los componentes facilitan la reutilización del código, las pruebas y la separación de las preocupaciones. Las siguientes características lo hacen popular, lo que produce un buen rendimiento

1. Enlace de datos unidireccional: aclara el flujo de datos cuando se realizan cambios.

2. Trabajamos completamente en ReactJS con componentes en lugar de con modelos, vistas y controladores, y los componentes son el futuro del desarrollo web.

3. ReactJS Virtual DOM se encarga de administrar modelos de objetos de documentos.

4. React utiliza una sintaxis especial llamada JSX que facilita la escritura de JavaScript.

5. ReactJS es extremadamente eficiente y es amigable con SEO.

Atentamente,

Ramya, [correo electrónico protegido] Curso – Entrenamiento en línea ReactJS en Hyderabad

Hola,

Te contaré sobre ReactJS y luego podrás decidir por ti mismo si vale la pena o no.

React es una biblioteca basada en componentes que se utiliza para desarrollar interfaces de usuario (UI) interactivas. Actualmente es una de las bibliotecas front-end JavaScript más populares que tiene una base sólida y una gran comunidad que lo respalda.

En ReactJS, todo es un componente. Considere una casa de lego como una aplicación completa. Luego compare cada uno de los bloques de lego con un componente que actúa como un bloque de construcción. Estos bloques / componentes se integran entre sí para crear una aplicación más grande y dinámica.

La mayor ventaja de usar componentes es que puede cambiar cualquier componente en cualquier momento sin afectar el resto de las aplicaciones. Esta característica es más efectiva cuando se implementa con aplicaciones más grandes y en tiempo real donde los datos cambian con frecuencia. Cada vez que se agregan o actualizan datos, ReactJS actualiza automáticamente el componente específico cuyo estado realmente ha cambiado. Esto salva al navegador de la tarea de volver a cargar toda la aplicación para reflejar los cambios.

Características de ReactJS:

1. JSX: JSX significa JavaScript XML. Es una sintaxis similar a XML / HTML utilizada por React. Extiende el ECMAScript para que el texto similar a XML / HTML pueda coexistir junto con el código de reacción de JavaScript. Esta sintaxis es utilizada por los preprocesadores como Babel para transformar HTML como texto encontrado en archivos JavaScript en objetos JavaScript estándar. Con JSX, podemos ir un paso más allá al incrustar nuevamente el código HTML dentro del JavaScript. Esto hace que los códigos HTML sean fáciles de entender y aumenta el rendimiento de JavaScript al tiempo que hace que nuestra aplicación sea robusta.
2. DOM virtual : al igual que un DOM real, el DOM virtual también es un árbol de nodos que enumera los elementos y sus atributos y contenido como Objetos y sus propiedades. La función de procesamiento de React crea un árbol de nodos a partir de los componentes de reacción. Luego, actualiza este árbol en respuesta a las mutaciones en el modelo de datos causadas por varias acciones realizadas por el usuario o por el sistema.
3. Capacidad de prueba : las vistas de reacción se pueden usar como funciones del estado (el estado es un objeto que determina cómo se representará y se comportará el componente). Por lo tanto, podemos manipular fácilmente el estado de los componentes que pasamos a la vista ReactJS y observar la salida y las acciones, eventos, funciones activadas, etc. Esto hace que las aplicaciones React sean bastante fáciles de probar y depurar.
4. Representación del lado del servidor (SSR): la representación del lado del servidor le permite renderizar previamente el estado inicial de sus componentes de reacción solo en el lado del servidor. Con SSR, la respuesta del servidor al navegador se convierte solo en el HTML de la página que ahora está lista para ser renderizada. Por lo tanto, el navegador ahora puede comenzar a renderizar sin tener que esperar a que se cargue y ejecute todo el JavaScript. Como resultado, la página web se carga más rápido. Aquí el usuario podrá ver la página web a pesar de que React sigue descargando el JavaScript, creando el DOM virtual, vinculando eventos, etc. en el back-end.
5. Enlace de datos unidireccional : a diferencia de otros marcos, ReactJS sigue el flujo de datos unidireccional o el enlace de datos unidireccional. La principal ventaja del enlace de datos unidireccional es que, a lo largo de la aplicación, los datos fluyen en una sola dirección, lo que le brinda un mejor control sobre ellos. Debido a esto, el estado de la aplicación está contenido en almacenes específicos y, como resultado, el resto de los componentes permanece débilmente acoplado. Esto hace que nuestra aplicación sea más flexible, lo que lleva a una mayor eficiencia.
6. Simplicidad: el uso de archivos JSX hace que la aplicación sea realmente simple y
   fácil de codificar y entender. Aunque podemos usar JavaScript simple aquí, usar JSX es más fácil. El enfoque basado en componentes de React junto con distintos métodos de ciclo de vida también hacen que sea fácil de aprender.
7. Curva de aprendizaje: la curva de aprendizaje de React es bastante baja en comparación con otros marcos. Cualquiera que tenga conocimientos básicos de programación puede aprender fácilmente React. Por lo tanto, si tiene conocimientos previos en HTML y JavaScript, puede tenerlo en sus manos muy rápidamente.

Espero que tengas tu respuesta ahora. En caso de que quiera aprender a reaccionar, puede consultar este video tutorial en ReactJS.

Conocía Angular antes de comenzar a desarrollar con React, y mis experiencias principales se pueden describir comparando los dos marcos / bibliotecas:

• Debido a que todo en React se basa en componentes, son súper fáciles de reutilizar en otras aplicaciones sin problemas.
• La parte Native de React facilita la creación de código que se puede usar principalmente en iOS y Android (React Native es la razón principal por la que comencé a aprender React). No importa lo que diga la gente; Las aplicaciones híbridas no son las mismas que las nativas.
• React está más enfocado en JS y necesitas tener una mejor comprensión de JS que desarrollarlo en Angular. Esto no es necesariamente algo malo, pero es más difícil comenzar con React que con Angular.
• La documentación para React está en desarrollo, pero aún no está cerca de Angular.
• El flujo de datos y los estados pueden ser una molestia en React. Redux es un buen marco, pero después de venir de Angular, que no es solo una biblioteca de interfaz como React, era algo a lo que necesitaba acostumbrarme.

La última oración introduce más o menos mi conclusión, que es:

React es una biblioteca de interfaz y Angular es un marco (que también se encarga del flujo de datos y el estado). Además, no puede usar las bibliotecas CSS y JS normales (como Bootstrap) con React para facilitarle la vida.

Debido a esto, continuaré usando Angular para desarrollo web y React Native para aplicaciones iOS y Android. Honestamente, no veo la necesidad de comenzar a usar React para el desarrollo web cuando hay tantos marcos excelentes ya desarrollados para “HTML y CSS normales” que no se pueden utilizar con React.

Si desea que responda, puede usar columnas de rutina de carga. Son bastante buenos para eso. Pero si desea hacerlo a través de reaccionar, use puede usar la representación del lado del servidor. La representación del lado del servidor resolverá el problema de rendimiento, ya que se representa antes de que se monte el componente. Y no necesita dependencias para calcular el ancho de altura de un elemento.

use el método element.getBoundingClientRect () para obtener la altura, el ancho o la posición.

Para que responda, cambie su ancho de altura en el cambio de tamaño de la ventana.

Y finalmente, ni siquiera dudes reacciona el rendimiento. Casi aprendí todos los marcos del lado del cliente y nadie puede igualar la reacción, la simplicidad y el rendimiento. Si su rendimiento va mal, está haciendo algo mal en los métodos de ciclo de vida de los componentes. Míralos una vez más. Para un mejor rendimiento, use el ciclo de vida debeComponentUpdate, evitará la representación innecesaria de componentes cada vez.

El DOM se representa, solo usa un DOM virtual para la optimización. Si realmente necesita acceder a los elementos DOM reales, eche un vistazo al uso de referencias.

Sin embargo, no creo que este sea tu problema. Primero debe crear su diseño básico utilizando HTML / CSS estático solo para que su posicionamiento / diseño funcione antes de comenzar a agregar reaccionar (en proyectos más grandes, alguien que no sea el desarrollador reaccionar hace esto, y también establecerán la apariencia del aplicación final en esta etapa). Solo después de esto deberías comenzar a pensar en reaccionar.

Hay formas de crear un posicionamiento preciso, incluso si no sabe cuántos elementos habrá en una página dinámica, y este puede ser su verdadero problema (¡y no tiene nada que ver con reaccionar, ya que es un problema común independientemente del marco!) .

Con respecto a la animación, descubrirá que no puede animar el tamaño si no lo sabe al principio … y lo que es peor, altura: auto o ancho: auto no animar (¡un viaje común de realización para cualquier desarrollador front-end! ) Debería poder hacer lo que quiera con un contenedor wrap div sin desbordamiento, o getBoundingClientRect () si necesita ser hardcore. Nuevamente, hacer que todo funcione fuera de React (con HTML / CSS puro y quizás un botón para iniciar un controlador de animación JS) es su primer paso.

Reaccionar es bastante rápido. No he visto su rendimiento como un problema, especialmente en comparación con los marcos de la competencia. El único problema real con react es que no se trata de un sistema completo (solo se trata de la vista y no de controladores o comunicaciones del lado de datos / servidor). Tomar las decisiones equivocadas sobre qué usar con React puede afectar la velocidad, aunque no puede equivocarse mucho con Redux y una buena comprensión de JS (las funciones puras y la inmutabilidad son los elementos imprescindibles).

Si todavía quiere más rápido, eche un vistazo a preact.js: alternativa de Reacción rápida de 3kb con la misma API ES6. Componentes y DOM virtual.

Absolutamente sí. Seguro que hay una curva de aprendizaje, y seguro que hay un montón de código ‘envoltorio’ a tener en cuenta, pero una vez que te acostumbras, React y Redux son increíbles. Mucho más limpio y conceptualmente más simple que Angular. Y mucho más poderoso que JS + jQuery de vainilla. Elimina por completo la necesidad de hacer cualquier tipo de manipulación DOM.