React (también conocido como React.js o ReactJS ) es una biblioteca de JavaScript frontal gratuita y de código abierto [3] [4] para crear interfaces de usuario basadas en componentes . Lo mantiene Meta (anteriormente Facebook) y una comunidad de desarrolladores y empresas individuales. [5] [6] [7]
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. [8] [9] 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.
El siguiente es un ejemplo rudimentario del uso de React para la web, escrito en JSX y JavaScript.
importar Reaccionar desde 'reaccionar' ; importar ReactDOM desde 'react-dom/client' ; /** Un componente puro que muestra un mensaje */ const Saludo = () => { return ( < div className = "hola-mundo" > < h1 > ¡ Hola mundo ! < /h1> < /div> ); }; /** El componente principal de la aplicación */ const App = () => { return < Saludo /> ; }; /** React se representa en un elemento raíz en la página HTML */ const root = ReactDOM . createRoot ( documento . getElementById ( 'raíz' )); raíz . renderizar ( < Aplicación /> ); basado en el documento HTML a continuación.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < title > React App </ title > </ head > < body > < noscript > Necesitas habilitar JavaScript para ejecutar esta aplicación. </ noscript > < div id = "raíz" >> div > </ body > </ html >La Greetingfunción es un componente de React que muestra "Hola, mundo" .
Cuando se muestra en un navegador web , el resultado será una representación de:
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < title > React App </ title > </ head > < body > < noscript > Necesitas habilitar JavaScript para ejecutar esta aplicación. </ noscript > < div id = "root" > < div class = "hola-mundo" > < h1 > ¡Hola mundo! </ h1 > </ div > </ div > </ body > </ html >React se adhiere al paradigma de programación declarativa . [10] : 76 desarrolladores diseñan vistas para cada estado de una aplicación, y React actualiza y representa componentes cuando cambian los datos. Esto contrasta con la programación imperativa . [11]
El código de React está hecho de entidades llamadas componentes . [10] : 10–12 Estos componentes son modulares y reutilizables. [10] : 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. [12]
Las dos formas principales de declarar componentes en React son a través de componentes de función y componentes de clase. [10] : 118 [13] : 10
importar Reaccionar desde "reaccionar" ; /** Un componente puro que muestra un mensaje con el recuento actual */ const CountDisplay = props => { // El valor del recuento se pasa a este componente como props const { count } = props ; return ( < div > El recuento actual es { count }. < /div>); } /** Un componente que muestra un mensaje que se actualiza cada vez que se hace clic en el botón */ const Counter = () => { // El gancho useState de React se usa aquí para almacenar y actualizar // el número total de veces que el botón se ha hecho clic. const [ cuenta , setCount ] = Reaccionar . utilizar Estado ( 0 ); return ( < div className = "counter" > < CountDisplay count = { count } /> < button onClick = {() => setCount ( count + 1 )} > ¡Agrega uno !< /button> < /div> ); }; Los componentes de la 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.
// Sintaxis de función function Greeter () { return < div > Hola mundo < /div>; } // Expresión de función de flecha const Greeter = () => < div > Hola mundo < /div>; El 16 de febrero de 2019, se lanzó al público React 16.8, que presenta React Hooks. [14] 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. [15] En particular, los Hooks no funcionan dentro de las clases: permiten a los desarrolladores usar más funciones de React sin clases. [dieciséis]
React proporciona varios Hooks integrados como useState, [17] [13] : 37 useContext , [10] : 11 [18] [13] : 12 useReducer , [10] : 92 [18] [13] : 65–66 useMemo [10 ] : 154 [18] [13] : 162 y useEffect. [19] [13] : 93–95 Otros están documentados en la Referencia de API de Hooks. [20] [10] : 62 useState y useEffect, que son los más utilizados, son para controlar el estado [10] : 37 y los efectos secundarios [10] : 61 respectivamente.
Hay dos reglas de Hooks [21] que describen los patrones de código característicos en los que se basan los Hooks:
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, [22] que pueden llamar a otros Hooks.
Los componentes del servidor React o "RSC" [23] 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.
Los React Hooks, como useStatelos de gestión de estado y useEffectefectos secundarios, han proporcionado una forma más ágil y concisa de crear y gestionar aplicaciones de React. Este cambio ha llevado a una mejor legibilidad y reutilización del código, alentando a los desarrolladores a migrar de componentes de clase a componentes funcionales.
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. [24]
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.
Sin embargo, existen bibliotecas populares de terceros que se pueden utilizar para manejar el enrutamiento en aplicaciones React. Una de esas bibliotecas es react-router, que proporciona una solución de enrutamiento integral para aplicaciones React. [25] Le permite definir rutas, administrar la navegación y manejar cambios de URL de una manera compatible con React.
Para usarlo react-router, debe instalarlo como un paquete separado e integrarlo en su aplicación React.
react-router-domusando npm o hilo:npm instala reaccionar-router-domimportar Reaccionar desde 'reaccionar' ; importar { BrowserRouter como enrutador , ruta , conmutador } desde 'react-router-dom' ; importar Inicio desde './components/Home' ; importar Acerca de desde './components/About' ; importar contacto desde './components/Contact' ; function App () { return ( < Enrutador > < Switch > < Ruta ruta exacta = " /" componente = { Inicio } /> < Ruta ruta = " /acerca de" componente = { Acerca de } /> < Ruta ruta = "/contacto " componente = { Contacto } /> < /Conmutador> < /Enrutador> ); } exportar la aplicación predeterminada ; Con esta configuración, cuando el usuario navega a diferentes URL, los componentes correspondientes se representarán en función de las rutas definidas.
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. [26] Este proceso se llama reconciliación . Esto permite al programador escribir código como si la página completa 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. [27]
Cuando se vuelve a llamar a ReactDOM.render[28] 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 corresponde) del DOM vivo deben cambiar. [29]
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 repetición innecesaria de un componente devolviendo falso si no se requiere un renderizado.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 .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 extensión de sintaxis de JavaScript, es una extensión de la sintaxis del lenguaje JavaScript. [30] De apariencia similar a HTML, [10] : 11 JSX proporciona una forma de estructurar la representación de componentes utilizando una sintaxis familiar [10] : 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, [31] y Netflix y PayPal utilizan la carga universal para representar HTML idéntico tanto en el servidor como en el cliente. [32] [33]
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 .
const expresar = requerir ( 'expresar' ); const Reaccionar = requerir ( 'reaccionar' ); const { renderToString } = requerir ( 'react-dom/server' ); aplicación constante = expreso (); aplicación . obtener ( '/' , ( req , res ) => { const html = renderToString ( < MiAplicación /> ); res . enviar ( ` <!tipo de documento html> <html> <cuerpo> <div id="raíz"> ${ html } </div> <script src="/bundle.js"></script> </cuerpo> </html> ` );});aplicación . escuchar ( 3000 , () => { consola . log ( 'Servidor escuchando en el puerto 3000' );});React no intenta proporcionar una biblioteca de aplicaciones completa. Está diseñado específicamente para crear interfaces de usuario [3] 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. [34] 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. [35]
El flujo puede considerarse una variante del patrón del observador . [36]
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. [37] 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 . [38]
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. [39]
Se puede realizar un seguimiento del estado del proyecto a través del foro de discusión del equipo central. [40] Sin embargo, los cambios importantes en React pasan por los problemas del repositorio Future of React y las solicitudes de extracción . [41] [42] 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" [43] 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. [44] React Fiber se convertiría en la base de cualquier mejora futura y desarrollo de funciones de la biblioteca React. [45] [ necesita actualización ] La sintaxis real para programar con React no cambia; sólo ha cambiado la forma en que se ejecuta la sintaxis. [46] 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. [47]
El 26 de septiembre de 2017, se lanzó al público React 16.0. [48]
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. [49]
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. [50]
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: [51]
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. [52]
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: [53]
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. [54]
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 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 otorgar sublicencias como [Licencia Apache 2.0]". [55] En agosto de 2017, Facebook desestimó las preocupaciones de la Fundación Apache y se negó a reconsiderar su licencia. [56] [57] El mes siguiente, WordPress decidió cambiar sus proyectos Gutenberg y Calypso lejos de React. [58]
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". [59]
El 26 de septiembre de 2017 se lanzó React 16.0.0 con la licencia MIT. [60] 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. [61]
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}