React (también conocido como React.js o ReactJS ) es una biblioteca de JavaScript front-end gratuita y de código abierto [4] [5] para crear interfaces de usuario basadas en componentes de Facebook Inc. Es mantenido por Meta (anteriormente Facebook) y una comunidad de desarrolladores individuales y empresas. [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 ocupa de la interfaz de usuario y de la representación de componentes en el DOM , las aplicaciones 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 vuelve a renderizar aquellas partes de la página que han cambiado, evitando la repetición innecesaria de la representación de elementos DOM sin cambios. Se lanzó por primera vez el 29 de mayo de 2013.
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 renderiza los componentes cuando cambian los datos. Esto contrasta con la programación imperativa . [12]
El código de React está formado por entidades llamadas componentes . [11] : 10–12 Estos componentes son modulares y reutilizables. [11] : 70 Las aplicaciones de React suelen constar de muchas capas de componentes. Los componentes se representan en un elemento raíz en el DOM mediante la biblioteca DOM de React. Al representar un componente, los valores se pasan entre componentes a través de props (abreviatura de "propiedades") . Los valores internos de un componente se denominan su 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. A partir de React v16.8, los componentes de función pueden usar el estado con useStateHook.
El 16 de febrero de 2019, se lanzó al público React 16.8, que introdujo los Hooks de React. [15] Los Hooks son funciones que permiten a los desarrolladores "engancharse" a las características del estado y del ciclo de vida de React desde los componentes de la función. [16] En particular, los Hooks no funcionan dentro de las clases, sino que permiten a los desarrolladores usar más características 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 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 los 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 de servidor React o "RSC" [24] son componentes de función 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 la representación del lado del servidor, los RSC no envían el JavaScript correspondiente al cliente, ya que no se produce ninguna hidratación. Como resultado, no tienen acceso a los ganchos. Sin embargo, pueden ser funciones asincrónicas , lo que les permite realizar directamente operaciones asincrónicas:
función asíncrona MyComponent () { const mensaje = await 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 mediante clases ES6 . Se comportan de la misma manera que los componentes de función, pero en lugar de utilizar Hooks para gestionar eventos de estado y de ciclo de vida, utilizan los métodos de ciclo de vida de la React.Component clase base .
La clase ParentComponent extiende React . Componente { estado = { color : 'verde' }; prestar () { devolver ( < ChildComponent color = { este . estado . color } /> ); }}La introducción de React Hooks con React 16.8 en febrero de 2019 permitió a los desarrolladores administrar los comportamientos del estado y 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 los 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 usar 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 objeto 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 que se muestra en el navegador de manera eficiente. [27] Este proceso se llama reconciliación . Esto permite al programador escribir código como si se renderizara toda la página en cada cambio, mientras que React solo renderiza los componentes que realmente cambian. Esta renderización selectiva proporciona un importante aumento del rendimiento. [28]
Cuando se llama nuevamente 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 la renderización innecesaria de un componente devolviendo falso 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 se desmonte o se desmonte. Esto se usa comúnmente para eliminar dependencias que demandan recursos del componente y que no se eliminarán simplemente con el desmontaje del componente (por ejemplo, eliminar cualquier setInterval()instancia relacionada con el componente o un " eventListener " configurado en el "documento" debido a la presencia del componente).renderes el método de ciclo de vida más importante y el único obligatorio 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] Similar en apariencia 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 utilizando JSX, aunque no tienen que ser así (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 clase App 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 la representación de 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 representación de 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 los usuarios que utilizan conexiones o dispositivos más lentos.
Con SSR, el HTML inicial que se envía al cliente incluye la interfaz de usuario completamente renderizada 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 se descargue y ejecute el código JavaScript antes de renderizar la interfaz de usuario.
React es compatible con SSR, lo que permite a los desarrolladores renderizar 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ñada 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 la elección de las bibliotecas que el desarrollador prefiera para realizar tareas como el acceso a la red o el almacenamiento de datos locales. A medida que la biblioteca madura, han surgido patrones de uso comunes.
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 un almacén , y los cambios en el almacén se propagan de regreso 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 React bajo la arquitectura Flux no debería modificar directamente ninguna propiedad que se le pase, pero se le deberían pasar funciones de devolución de llamada que creen acciones que son enviadas por el despachador para modificar el almacén. 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 un id de usuario, un id de usuario objetivo y el tipo USER_FOLLOWED_ANOTHER_USER. [39] Los almacenes, que pueden considerarse como modelos, pueden modificarse a sí mismos en respuesta a las acciones recibidas del despachador.
Este patrón se expresa a veces 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 un solo almacén, a menudo llamado una única fuente de verdad . [40]
En febrero de 2019, useReducerse introdujo como un gancho de React en la versión 16.8. Proporciona una API que es consistente con Redux, lo que permite a los desarrolladores crear tiendas similares a Redux que son locales para los estados de los componentes. [41]
El estado del proyecto se puede rastrear 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 que la comunidad de React brinde comentarios sobre nuevas características potenciales, API experimentales y mejoras en la 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 renombrarlo posteriormente como "FaxJS". Esta versión inicial está documentada en el repositorio de 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 el News Feed de Facebook en 2011 y luego se integró en Instagram en 2012 [ cita requerida ] . En mayo de 2013, en JSConf US, el proyecto se convirtió oficialmente en código abierto, lo que marcó un punto de inflexión significativo en su adopción y crecimiento. [2]
React Native , que permite el desarrollo nativo de Android , iOS y UWP con React, se anunció en la React Conf de Facebook en febrero de 2015 y se convirtió en código abierto en marzo de 2015.
El 18 de abril de 2017, Facebook anunció React Fiber, un nuevo conjunto de algoritmos internos para renderizar, en oposición al antiguo algoritmo de renderizado de React, Stack. [46] React Fiber se convertiría en la base de cualquier mejora futura y desarrollo de características de la biblioteca React. [47] [ necesita actualización ] La sintaxis real para programar con React no cambia; solo 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 era lento para dibujar animaciones complejas, por ejemplo, tratando de lograrlo todo en un solo fragmento. Fiber divide la animación en segmentos que se pueden distribuir en varios fotogramas. Del mismo modo, 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, React 16.0 se lanzó al público. [50]
El 10 de agosto de 2020, el equipo de React anunció el primer candidato de lanzamiento para React v17.0, notable por ser el primer lanzamiento importante sin cambios importantes en la API de React para desarrolladores. [51]
El 29 de marzo de 2022, se lanzó React 18, que introdujo un nuevo renderizador simultáneo, procesamiento por lotes automático y soporte para renderizado del lado del servidor con Suspense. [52]
La versión pública inicial de React en mayo de 2013 utilizó la licencia Apache 2.0 . En octubre de 2014, React 0.12.00 la reemplazó por la licencia BSD de 3 cláusulas y agregó un archivo de texto PATENTS independiente 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 realice cualquier reclamo (incluso mediante la presentación de cualquier demanda, afirmación u otra acción) alegando (a) infracción directa, indirecta o contributiva o inducción a 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, independientemente de que dicho reclamo esté relacionado o no con el Software, o (iii) por cualquier parte relacionada con el Software; o (b) que cualquier derecho en cualquier reclamo de patente de Facebook es inválido o inaplicable.
Esta cláusula poco convencional provocó cierta controversia y debate en la comunidad de usuarios de React, porque podría interpretarse como que faculta a Facebook a revocar la licencia en muchos escenarios, por ejemplo, si Facebook demanda al licenciatario y lo incita a tomar "otras medidas" publicando la acción en un blog o en otro lugar. Muchos expresaron su preocupación por 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 empresa emergente. [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 documento terminará, automáticamente y sin previo aviso, si usted (o cualquiera de sus subsidiarias, filiales corporativas o agentes) inicia directa o indirectamente, o toma un interés financiero directo en, cualquier Afirmación de Patente: (i) contra Facebook o cualquiera de sus subsidiarias o filiales corporativas, (ii) contra cualquier parte si dicha Afirmación de Patente surge en su totalidad o en parte de cualquier software, tecnología, producto o servicio de Facebook o cualquiera de sus subsidiarias o filiales corporativas, o (iii) contra cualquier parte relacionada con el Software. [...] Una "Afirmación de Patente" es cualquier demanda u otra acción que alegue una infracción directa, indirecta o contributiva o una inducción a infringir cualquier patente, incluida una demanda cruzada o una contrademanda. [56]
La Apache Software Foundation consideró que este acuerdo de licencia era incompatible con sus políticas de licencias, ya que "transfiere el riesgo a los consumidores posteriores 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 sublicenciar como [Licencia Apache 2.0]". [57] En agosto de 2017, Facebook desestimó las preocupaciones de la Apache Foundation y se negó a reconsiderar su licencia. [58] [59] El mes siguiente, WordPress decidió alejar sus proyectos Gutenberg y Calypso de React. [60]
El 23 de septiembre de 2017, Facebook anunció que la semana siguiente volvería a licenciar Flow, Jest, React e Immutable.js bajo una licencia MIT estándar ; la compañía declaró 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 MIT también se ha incorporado a la línea de lanzamiento 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 )