React es una biblioteca de JavaScript que nació de una colaboración entre Facebook e Instagram y su objetivo es permitir a los desarrolladores crear interfaces de usuario fácil y rápidamente.

React no hace uso, ni suprime al resto de las tecnologías utilizadas dentro de un proyecto, por lo que es fácil probarlo sobre casi cualquier proyecto existente.

¬ŅQu√© es React?

React es una biblioteca de JavaScript para construir interfaces de usuario. React es una biblioteca JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Le permite componer interfaces de usuario complejas a partir de fragmentos de c√≥digo peque√Īos y aislados llamados ‚Äúcomponentes‚ÄĚ.

La Historia de React

React fue creado por Jordan Walke, un ingeniero de software en Facebook, que lanz√≥ un primer prototipo de React llamado ‚ÄúFaxJS‚ÄĚ. Fue influenciado por XHP , una biblioteca de componentes HTML para PHP . Se implement√≥ por primera vez en las Noticias de Facebook en 2011 y luego en Instagram en 2012. Fue de c√≥digo abierto en JSConf US en mayo de 2013.

React Native, que permite el desarrollo nativo de Android , iOS y UWP con React, se anunció en React Conf de Facebook en febrero de 2015 y de código abierto en marzo de 2015.

El 18 de abril de 2017, Facebook anunció React Fiber , un nuevo algoritmo central de la biblioteca React para construir interfaces de usuario. React Fiber se convertiría en la base de cualquier mejora futura y desarrollo de características de la biblioteca React.

El 26 de septiembre de 2017, React 16.0 fue lanzado al p√ļblico. El 16 de febrero de 2019, React 16.8 fue lanzado al p√ļblico. El lanzamiento introdujo React Hooks.

¬ŅPrincipales caracter√≠sticas de React?

Declarativo: React hace que sea sencillo crear interfaces de usuario interactivas. Dise√Īa vistas simples para cada estado de tu aplicaci√≥n, y React actualizar√° y renderizar√° eficientemente los componentes correctos cuando cambien los datos. Las vistas declarativas hacen que el c√≥digo sea m√°s predecible, m√°s sencillo de entender y m√°s f√°cil de depurar. Basado en componentes: Crea componentes encapsulados que administran su propio estado y luego organizalos para crear interfaces de usuario complejas. Dado que la l√≥gica de componentes est√° escrita en JavaScript y no sobre plantillas, puedes manejar f√°cilmente datos enriquecidos a trav√©s de la aplicaci√≥n y mantener el estado fuera del DOM. Aprende solamente una vez, escribe c√≥digo desde cualquier lugar: Puedes desarrollar nuevas funciones en React sin reescribir el c√≥digo existente. React tambi√©n puede renderizarse sobre el servidor a trav√©s de Node JS y permite potenciar tus aplicaciones m√≥viles usando React Native.

¬ŅQu√© es el DOM virtual de React?

El DOM virtual de React, es una característica que se basa en el uso de un Modelo de Objeto de Documento virtual, o DOM virtual. React crea una memoria caché de la estructura de datos sobre una memoria, que se encarga de calcular las diferencias resultantes y luego actualiza el DOM visualizado por el navegador de forma eficiente. Este proceso se llama reconciliación.

Esto permite al programador escribir c√≥digo como si la p√°gina completa se procesara en cada cambio, mientras que las bibliotecas React solo representan subcomponentes que se van actualizando. Esta representaci√≥n selectiva proporciona un gran aumento de rendimiento. Ahorra el esfuerzo de volver a calcular el estilo CSS por completo una y otra vez, as√≠ como todo el dise√Īo de la p√°gina y su procesamiento posterior.

¬ŅQu√© es la arquitectura Flux de React?

Para respaldar el concepto de React de flujo de datos unidireccional (que podría contrastarse con el flujo bidireccional de AngularJS ), la arquitectura Flux representa una alternativa a la arquitectura popular modelo-vista-controlador.

Flux presenta acciones que se envían a través de un despachador central a una tienda , y los cambios en la tienda se propagan de nuevo a la vista. Cuando se usa con React, esta propagación se logra a través de las propiedades del componente.

El flujo puede considerarse una variante del patrón de observación.

Un componente React bajo la arquitectura Flux no debe modificar directamente ning√ļn accesorio que se le pase, sino que debe pasar funciones de devoluci√≥n de llamada que crean acciones que el despachador env√≠a para modificar.

La acci√≥n es un objeto cuya responsabilidad es describir lo que ha sucedido: por ejemplo, una acci√≥n que describe a un usuario ‚Äúsiguiendo‚ÄĚ a otro podr√≠a contener una identificaci√≥n de usuario, una identificaci√≥n de usuario objetivo y el tipo USER_FOLLOWED_ANOTHER_USER.

Este patr√≥n a veces se expresa como ‚Äúlas propiedades fluyen hacia abajo, las acciones fluyen hacia arriba‚ÄĚ. Se han creado muchas implementaciones de Flux desde su inicio, quiz√°s el m√°s conocido es Redux , que cuenta con una sola tienda, a menudo llamada una sola fuente de verdad.

¬ŅQu√© son los React Hooks o ganchos de React?

Los ganchos son funciones que permiten a los desarrolladores ‚Äúengancharse‚ÄĚ a las caracter√≠sticas de estado de reacci√≥n y ciclo de vida de los componentes de la funci√≥n. Hacen que los c√≥digos sean legibles y f√°cilmente comprensibles. Los ganchos no funcionan dentro de las clases: te permiten usar React sin clases.

React proporciona algunos ganchos incorporados como useState, useContext , useReducer y useEffect por nombrar algunos de ellos; todos ellos est√°n establecidos en la Referencia de la API de Hooks. useState y useEffect, son los m√°s utilizados, y sirven para controlar los estados y los efectos secundarios respectivamente sobre los componentes de React.

Primera implementación de React

React ha sido dise√Īado para una adopci√≥n gradual desde el principio, y puede usar la menor cantidad de React que necesite :

¬ŅD√≥nde puedo encontrar la documentaci√≥n oficial de React?

Puede encontrar la documentación de React en el sitio web.

Consulte la página de Inicio para obtener una descripción general rápida.

La documentación oficial de React se divide en varias secciones:

Ventajas de usar React ‚Źę

  • El proceso de actualizaciones est√° optimizado y acelerado.
  • JSX hace que el c√≥digo de componentes / bloques sea legible. Muestra c√≥mo se conectan o combinan los componentes.
  • El enlace de datos de React establece las condiciones para la creaci√≥n de aplicaciones din√°micas.
  • R√°pido renderizado: El uso comprende m√©todos para minimizar el n√ļmero de operaciones DOM que ayuda a optimizar el proceso de actualizaci√≥n y acelerarlo.
  • La gran posibilidad de realizar pruebas: Las herramientas nativas de React se ofrecen para probar, depurar c√≥digo.
  • SEO-friendly. React presenta la experiencia de primera carga mediante la representaci√≥n del lado del servidor y la conexi√≥n de controladores de eventos del lado del usuario:
  • El equipo de Facebook apoya la biblioteca. La comunidad de Facebook puede dar consejos o ejemplos de c√≥digo.
  • Usando la √ļltima versi√≥n de React, la aplicaci√≥n obtiene alta tecnolog√≠a y es adecuada para sistemas de alta carga.

Desventajas de usar React ‚Ź¨

  • Curva de aprendizaje. Al no ser un framework completo, se requiere un conocimiento profundo para la integraci√≥n de la biblioteca gratuita de la interfaz de usuario en el framework MVC.
  • La orientaci√≥n visual es una de las desventajas de ReactJS. Se debe encontrar ‚ÄėModelo‚Äô y ‚ÄėControlador‚Äô para resolver el problema de la ‚ÄėVista‚Äô.
  • No usar un enfoque isomorfo para explotar aplicaciones conduce a problemas de indexaci√≥n en los motores de b√ļsqueda.
  • A muchos desarrolladores no les gusta la documentaci√≥n de JSX React, los manuales son dif√≠ciles de entender para los reci√©n llegados.
  • La biblioteca de React, es bastante grande; por lo que debe ser optimizada e implementada de forma correcta.

Recursos de React

ūüí° Agradecimientos a jlobos la gran mayor√≠a de los enlaces aqu√≠ publicados son acogidos desde el repositorio de Github.ūü§ě

Conocer M√°s Sobre React

Videocursos de React

Videotutoriales de React

Recursos de React Native

Recursos de Flux

Recursos de Redux

Relacionados

Aprender React Native

Recursos de React Native

Comparación entre React Native, Flutter y Xamarin

Revery: Aplicaciones Nativas

React es una de las biblioteca de JavaScript más famosas y utilizadas para construir interfaces de usuario de aplicaciones móviles multiplataforma