React (también conocido como React.js o ReactJS ) es una biblioteca JavaScript frontal gratuita y de código abierto [4] [5] para crear interfaces de usuario basadas en componentes de Facebook Inc. Lo mantiene Meta (anteriormente Facebook) y una comunidad de desarrolladores y empresas individuales. [6] [7] [8]
React se puede utilizar para desarrollar aplicaciones de una sola página , móviles o renderizadas en servidor con marcos como Next.js. Debido a que React solo se preocupa por la interfaz de usuario y la representación de componentes en el DOM , las aplicaciones de React a menudo dependen de bibliotecas para el enrutamiento y otras funciones del lado del cliente. [9] [10] Una ventaja clave de React es que solo renderiza aquellas partes de la página que han cambiado, evitando la renderización innecesaria de elementos DOM sin cambios.
React se adhiere al paradigma de programación declarativa . [11] : 76 Los desarrolladores diseñan vistas para cada estado de una aplicación, y React actualiza y representa los componentes cuando cambian los datos. Esto contrasta con la programación imperativa . [12]
El código de React está hecho de entidades llamadas componentes . [11] : 10–12 Estos componentes son modulares y reutilizables. [11] : 70 Las aplicaciones de React normalmente constan de muchas capas de componentes. Los componentes se representan en un elemento raíz en el DOM utilizando la biblioteca React DOM. Al renderizar un componente, los valores se pasan entre componentes a través de accesorios (abreviatura de "propiedades") . Los valores internos de un componente se denominan estado. [13]
Las dos formas principales de declarar componentes en React son a través de componentes de función y componentes de clase. [11] : 118 [14] : 10
Los componentes de función se declaran con una función (usando la sintaxis de función de JavaScript o una expresión de función de flecha ) que acepta un único argumento "props" y devuelve JSX. Desde React v16.8 en adelante, los componentes de funciones pueden usar el estado con useStateHook.
El 16 de febrero de 2019, se lanzó al público React 16.8, que presenta React Hooks. [15] Los ganchos son funciones que permiten a los desarrolladores "conectarse" al estado de React y a las características del ciclo de vida de los componentes de la función. [16] En particular, los Hooks no funcionan dentro de las clases: permiten a los desarrolladores usar más funciones de React sin clases. [17]
React proporciona varios ganchos integrados como useState, [18] [14] : 37 useContext , [11] : 11 [19] [14] : 12 useReducer , [11] : 92 [19] [14] : 65–66 useMemo [11 ] : 154 [19] [14] : 162 y useEffect. [20] [14] : 93–95 Otros están documentados en la Referencia de API de Hooks. [21] [11] : 62 useState y useEffect, que son los más utilizados, son para controlar el estado [11] : 37 y los efectos secundarios, [11] : 61 respectivamente.
Hay dos reglas de los ganchos [22] que describen los patrones de código característicos en los que se basan los ganchos:
Aunque estas reglas no se pueden aplicar en tiempo de ejecución, las herramientas de análisis de código, como linters, se pueden configurar para detectar muchos errores durante el desarrollo. Las reglas se aplican tanto al uso de Hooks como a la implementación de Hooks personalizados, [23] que pueden llamar a otros Hooks.
Los componentes del servidor React o "RSC" [24] son componentes funcionales que se ejecutan exclusivamente en el servidor. El concepto se introdujo por primera vez en la charla Obtención de datos con componentes de servidor. Aunque es un concepto similar al de renderizado del lado del servidor, los RSC no envían el JavaScript correspondiente al cliente ya que no se produce hidratación. Como resultado, no tienen acceso a los ganchos. Sin embargo, pueden ser funciones asincrónicas , lo que les permite realizar operaciones asincrónicas directamente:
función asíncrona MiComponente () { mensaje constante = esperar fetchMessageFromDb (); devolver ( <div> Mensaje : { mensaje } </div> );}Actualmente, los componentes del servidor se pueden utilizar más fácilmente con Next.js.
Los componentes de clase se declaran utilizando clases ES6 . Se comportan de la misma manera que los componentes de funciones, pero en lugar de usar Hooks para administrar el estado y los eventos del ciclo de vida, usan los métodos del ciclo de vida en la React.Component clase base .
La clase ParentComponent extiende React . Componente { estado = { color : 'verde' }; prestar () { devolver ( < ChildComponent color = { this . estado . color } /> ); }}La introducción de React Hooks con React 16.8 en febrero de 2019 permitió a los desarrolladores gestionar el estado y los comportamientos del ciclo de vida dentro de los componentes funcionales, reduciendo la dependencia de los componentes de clase.
Esta tendencia se alinea con el movimiento más amplio de la industria hacia la programación funcional y el diseño modular. A medida que React continúa evolucionando, es esencial que los desarrolladores consideren los beneficios de los componentes funcionales y React Hooks al crear nuevas aplicaciones o refactorizar las existentes. [25]
React en sí no viene con soporte integrado para enrutamiento . React es principalmente una biblioteca para crear interfaces de usuario y no incluye una solución de enrutamiento completa lista para usar. Se pueden utilizar bibliotecas de terceros para manejar el enrutamiento en aplicaciones React. [26] Permite al desarrollador definir rutas, administrar la navegación y manejar cambios de URL de una manera compatible con React.
Otra característica notable es el uso de un modelo de objetos de documento virtual , o DOM virtual . React crea un caché de estructura de datos en memoria , calcula las diferencias resultantes y luego actualiza el DOM mostrado en el navegador de manera eficiente. [27] Este proceso se llama reconciliación . Esto permite al programador escribir código como si toda la página se representara en cada cambio, mientras que React solo representa los componentes que realmente cambian. Esta representación selectiva proporciona un importante aumento del rendimiento. [28]
Cuando se vuelve a llamar a ReactDOM.render[29] para el mismo componente y objetivo, React representa el nuevo estado de la interfaz de usuario en el DOM virtual y determina qué partes (si las hay) del DOM vivo deben cambiar. [30]
Los métodos de ciclo de vida para componentes basados en clases utilizan una forma de enlace que permite la ejecución de código en puntos establecidos durante la vida útil de un componente.
ShouldComponentUpdatepermite al desarrollador evitar una nueva renderización innecesaria de un componente devolviendo false si no se requiere una renderización.componentDidMountse llama una vez que el componente se ha "montado" (el componente se ha creado en la interfaz de usuario, a menudo asociándolo con un nodo DOM ). Esto se usa comúnmente para activar la carga de datos desde una fuente remota a través de una API .componentDidUpdatese invoca inmediatamente después de que se produce la actualización. [31]componentWillUnmountse llama inmediatamente antes de que el componente sea derribado o "desmontado". Esto se usa comúnmente para borrar dependencias que exigen recursos del componente y que no se eliminarán simplemente con el desmontaje del componente (por ejemplo, eliminar cualquier setInterval()instancia que esté relacionada con el componente, o un " eventListener " configurado en el "documento" porque de la presencia del componente)renderEs el método de ciclo de vida más importante y el único requerido en cualquier componente. Generalmente se llama cada vez que se actualiza el estado del componente, lo que debería reflejarse en la interfaz de usuario.JSX , o JavaScript XML, es una extensión de la sintaxis del lenguaje JavaScript. [32] De apariencia similar a HTML, [11] : 11 JSX proporciona una forma de estructurar la representación de componentes utilizando una sintaxis familiar [11] : 15 para muchos desarrolladores. Los componentes de React generalmente se escriben usando JSX, aunque no es necesario (los componentes también pueden escribirse en JavaScript puro). JSX es similar a otra sintaxis de extensión creada por Facebook para PHP llamada XHP .
Un ejemplo de código JSX:
La aplicación de clase extiende React . Componente { render () { return ( < div > < p > Encabezado </ p > < p > Contenido </ p > < p > Pie de página </ p > </ div > ); } } La arquitectura básica de React se aplica más allá de representar HTML en el navegador. Por ejemplo, Facebook tiene gráficos dinámicos que se representan en <canvas>etiquetas, [33] y Netflix y PayPal utilizan la carga universal para representar HTML idéntico tanto en el servidor como en el cliente. [34] [35]
La representación del lado del servidor (SSR) se refiere al proceso de representar una aplicación JavaScript del lado del cliente en el servidor, en lugar de en el navegador. Esto puede mejorar el rendimiento de la aplicación, especialmente para usuarios con conexiones o dispositivos más lentos.
Con SSR, el HTML inicial que se envía al cliente incluye la interfaz de usuario completamente representada de la aplicación. Esto permite que el navegador del cliente muestre la interfaz de usuario inmediatamente, en lugar de tener que esperar a que JavaScript se descargue y ejecute antes de representar la interfaz de usuario.
React admite SSR, lo que permite a los desarrolladores representar componentes de React en el servidor y enviar el HTML resultante al cliente. Esto puede resultar útil para mejorar el rendimiento de la aplicación, así como para fines de optimización de motores de búsqueda .
React no intenta proporcionar una biblioteca de aplicaciones completa. Está diseñado específicamente para crear interfaces de usuario [4] y, por lo tanto, no incluye muchas de las herramientas que algunos desarrolladores podrían considerar necesarias para crear una aplicación. Esto permite elegir qué bibliotecas prefiere el desarrollador para realizar tareas como realizar acceso a la red o almacenamiento de datos local. A medida que la biblioteca madura, han surgido patrones comunes de uso.
Para respaldar el concepto de flujo de datos unidireccional de React (que podría contrastarse con el flujo bidireccional de AngularJS ), se desarrolló la arquitectura Flux como una alternativa a la popular arquitectura 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 a la vista. [36] Cuando se usa con React, esta propagación se logra a través de las propiedades del componente. Desde su concepción, Flux ha sido reemplazado por bibliotecas como Redux y MobX. [37]
El flujo puede considerarse una variante del patrón del observador . [38]
Un componente de React bajo la arquitectura Flux no debe modificar directamente ningún accesorio que se le pase, pero se le deben pasar funciones de devolución de llamada que crean acciones que envía el despachador para modificar la tienda. La acción es un objeto cuya responsabilidad es describir lo que ha ocurrido: por ejemplo, una acción que describe a un usuario "siguiendo" a otro puede contener una identificación de usuario, una identificación de usuario objetivo y el tipo USER_FOLLOWED_ANOTHER_USER. [39] Las tiendas, que pueden considerarse modelos, pueden modificarse en respuesta a las acciones recibidas del despachador.
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 la más conocida sea Redux , que presenta una única tienda, a menudo llamada una única fuente de verdad . [40]
En febrero de 2019, useReducerse introdujo como gancho de React en la versión 16.8. Proporciona una API que es coherente con Redux, lo que permite a los desarrolladores crear tiendas similares a Redux que son locales para los estados de los componentes. [41]
Se puede realizar un seguimiento del estado del proyecto a través del foro de discusión del equipo central. [42] Sin embargo, los cambios importantes en React pasan por los problemas del repositorio Future of React y las solicitudes de extracción . [43] [44] Esto permite a la comunidad React proporcionar comentarios sobre nuevas características potenciales, API experimentales y mejoras de sintaxis de JavaScript.
React fue creado por Jordan Walke, un ingeniero de software de Meta , quien inicialmente desarrolló un prototipo llamado "F-Bolt" [45] antes de cambiarle el nombre a "FaxJS". Esta primera versión está documentada en el repositorio GitHub de Jordan Walke. [1] Las influencias para el proyecto incluyeron XHP , una biblioteca de componentes HTML para PHP .
React se implementó por primera vez en la sección de noticias de Facebook en 2011 y posteriormente se integró en Instagram en 2012 [ cita requerida ] . En mayo de 2013, en JSConf US, el proyecto fue oficialmente de código abierto, lo que marcó un importante punto de inflexión en su adopción y crecimiento. [2]
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 fue de código abierto en marzo de 2015.
El 18 de abril de 2017, Facebook anunció React Fiber, un nuevo conjunto de algoritmos internos para renderizado, a diferencia del antiguo algoritmo de renderizado de React, Stack. [46] React Fiber se convertiría en la base de cualquier mejora futura y desarrollo de funciones de la biblioteca React. [47] [ necesita actualización ] La sintaxis real para programar con React no cambia; sólo ha cambiado la forma en que se ejecuta la sintaxis. [48] El antiguo sistema de renderizado de React, Stack, se desarrolló en un momento en el que no se entendía el enfoque del sistema en el cambio dinámico. Stack tardó en dibujar animaciones complejas, por ejemplo, intentando realizarlas todas en una sola parte. Fiber descompone la animación en segmentos que se pueden distribuir en varios fotogramas. Asimismo, la estructura de una página se puede dividir en segmentos que se pueden mantener y actualizar por separado. Las funciones de JavaScript y los objetos DOM virtuales se denominan "fibras" y cada uno se puede operar y actualizar por separado, lo que permite una representación en pantalla más fluida. [49]
El 26 de septiembre de 2017, se lanzó al público React 16.0. [50]
El 10 de agosto de 2020, el equipo de React anunció la primera versión candidata para React v17.0, destacada como la primera versión importante sin cambios importantes en la API orientada al desarrollador de React. [51]
El 29 de marzo de 2022, se lanzó React 18, que introdujo un nuevo renderizador concurrente, procesamiento por lotes automático y soporte para renderizado del lado del servidor con Suspense. [52]
El lanzamiento público inicial de React en mayo de 2013 utilizó la licencia Apache 2.0 . En octubre de 2014, React 0.12.00 reemplazó esto con la licencia BSD de 3 cláusulas y agregó un archivo de texto PATENTES separado que permite el uso de cualquier patente de Facebook relacionada con el software: [53]
La licencia otorgada en virtud del presente terminará, automáticamente y sin previo aviso, para cualquier persona que presente cualquier reclamo (incluso mediante la presentación de cualquier demanda, afirmación u otra acción) alegando (a) infracción o incentivo directo, indirecto o contributivo para infringir cualquier patente: (i ) por Facebook o cualquiera de sus subsidiarias o afiliadas, independientemente de que dicho reclamo esté relacionado o no con el Software, (ii) por cualquier parte si dicho reclamo surge total o parcialmente de cualquier software, producto o servicio de Facebook o cualquiera de sus subsidiarias o afiliadas, ya sea que dicho reclamo esté relacionado o no con el Software, o (iii) por cualquier parte relacionada con el Software; o (b) que cualquier derecho contenido en cualquier reclamo de patente de Facebook es inválido o inaplicable.
Esta cláusula poco convencional causó cierta controversia y debate en la comunidad de usuarios de React, porque podría interpretarse que permite a Facebook revocar la licencia en muchos escenarios, por ejemplo, si Facebook demanda al licenciatario incitándolo a tomar "otra acción" al publicar la acción. en un blog o en otro lugar. Muchos expresaron su preocupación de que Facebook pudiera explotar injustamente la cláusula de rescisión o que la integración de React en un producto pudiera complicar la futura adquisición de una nueva empresa. [54]
Basándose en los comentarios de la comunidad, Facebook actualizó la concesión de patentes en abril de 2015 para que fuera menos ambigua y más permisiva: [55]
La licencia otorgada en virtud del presente terminará, automáticamente y sin previo aviso, si usted (o cualquiera de sus subsidiarias, afiliados corporativos o agentes) inicia directa o indirectamente, o tiene un interés financiero directo en, cualquier Afirmación de Patente: (i) contra Facebook o cualquier de sus subsidiarias o afiliadas corporativas, (ii) contra cualquier parte si dicha Afirmación de Patente surge total o parcialmente de cualquier software, tecnología, producto o servicio de Facebook o cualquiera de sus subsidiarias o afiliadas corporativas, o (iii) contra cualquier parte relacionados con el Software. [...] Una "Afirmación de Patente" es cualquier demanda u otra acción que alegue una infracción o un incentivo directo, indirecto o contributivo para infringir cualquier patente, incluida una contrademanda o una reconvención. [56]
La Apache Software Foundation consideró que este acuerdo de licencia era incompatible con sus políticas de licencia, ya que "transfiere el riesgo a los consumidores finales de nuestro software desequilibrado a favor del licenciante, no del licenciatario, violando así nuestra política legal de Apache de ser un donante universal". " y "no son un subconjunto de los que se encuentran en la [Licencia Apache 2.0] y no se pueden otorgar sublicencias como [Licencia Apache 2.0]". [57] En agosto de 2017, Facebook desestimó las preocupaciones de la Fundación Apache y se negó a reconsiderar su licencia. [58] [59] El mes siguiente, WordPress decidió cambiar sus proyectos Gutenberg y Calypso lejos de React. [60]
El 23 de septiembre de 2017, Facebook anunció que la semana siguiente volvería a otorgar licencias de Flow, Jest, React e Immutable.js bajo una licencia MIT estándar ; La empresa afirmó que React era "la base de un amplio ecosistema de software de código abierto para la web" y que no querían "retrasar el progreso por razones no técnicas". [61]
El 26 de septiembre de 2017, se lanzó React 16.0.0 con la licencia MIT. [62] El cambio de licencia del MIT también se ha trasladado a la línea de versión 15.x con React 15.6.2. [63]
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
{{cite web}}: Falta o está vacío |title=( ayuda )