React

De Wikipedia, la enciclopedia libre
Ir a la navegación Ir a la búsqueda
React
React.svg
Información general
Tipo de programa biblioteca de JavaScript
Autor Jordan Walke
Desarrollador Facebook, and community.
Modelo de desarrollo Código abierto
Lanzamiento inicial 29 de mayo de 2013
Licencia Licencia MIT
Información técnica
Programado en JavaScript
Plataformas admitidas Multiplataforma
Versiones
Última versión estable 16.8.6 ( 27 de marzo de 2019)
Enlaces

React (también llamada React.js o ReactJS) es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre. En el proyecto hay más de mil desarrolladores libres.

React intenta ayudar a los desarrolladores a construir aplicaciones que usan datos que cambian todo el tiempo. Su objetivo es ser sencillo, declarativo y fácil de combinar. React sólo maneja la interfaz de usuario en una aplicación; React es la Vista en un contexto en el que se use el patrón MVC (Modelo-Vista-Controlador) o MVVM (Modelo-vista-modelo de vista). También puede ser utilizado con las extensiones de React-based que se encargan de las partes no-UI (que no forman parte de la interfaz de usuario) de una aplicación web.

Según el servicio de análisis JavaScript (en inglés "JavaScript analytics service"), Libscore, React actualmente está siendo utilizado en las páginas principales de Imgur, Bleacher Informe, Feedly, Airbnb, SeatGeek, HelloSign, entre otras.

Historia[editar]

React fue creado por Jordan Walke, un ingeniero de software de Facebook, quien libero un primer prototipo de React llamado "FaxJS".[1][2]

Este fue influenciado por XHP de HTML una librería de componentes para PHP. Este fue usado por primera vez en el Feed de Noticias de Facebook en 2011 y después en Instagram en 2012.[3]

Se volvió código abierto en la JSConf US in May 2013.[2]

React Native, permitió el desarrollo nativo para Android, iOS y UWP con React, esto fue anunciado por Facebook en la React Conf en Febrero de 2015 y se volvió codigó abierto en Marzo 2015.

El 18 de Abril de 2017, Facebook anuncio React Fiber, un nuevo conjunto de algoritmos internos para la renderización, esto es opuesto al viejo algoritmos de renderizado de React.[4]

React Fiber se convertiría en la base de cualquier mejora futura y desarrollo de funciones de la biblioteca React.[5]​ La sintaxis actual para la programación con React no ha cambiado; solo ha cambiado la forma en que se ejecuta la sintaxis.[6]​ El viejo sistema de renderizado de React, Stack, se desarrolló en un momento en que no se entendía el enfoque del sistema en el cambio dinámico. Stack fue 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. Asimismo, la estructura de una página se puede dividir en segmentos que se pueden mantenerse y actualizar por separado. Las funciones de JavaScript y el objeto del DOM virtual son llamados "fibers" y cada uno se puede operar y actualizar por separado, lo que permite una representación en pantalla más suave.[7]

Antecedentes e inicios (2010- 2013) [8][editar]

  • 2010: Facebook introduce XHP a su stack PHP como código abierto.
  • 2011: Walke crea un prototipo para ReactJS.
  • Abril, 2012: Facebook adquiere Instagram, Pete Hunt desarrolló React para hacerlo de código abierto.
  • Mayo 2013: Facebook lanza React como un código abierto.
  • Junio, 2013: React está disponible en JSFiddle.
  • Julio, 2013: React y JSX están disponibles en Ruby on Rails
  • Agosto, 2013: React y JSX están disponibles en aplicaciones de Python

Expansión y popularidad (2014- 2016)[editar]

  • Inicios de 2014: Conferencias ReactJS world tour, enfocadas en construir una comunidad y convertir a los 'haters' en aliados.
  • Enero, 2014: React Developer Tools es agregado como una extensión para Google Chrome.
  • Abril 7-9, 2014: React London 2014, una conferencia de 3 días sobre construir aplicaciones responsivas.
  • Enero 2015: Netflix anuncia que usará React para su desarrollo de interfaz de usuario.[9]
  • Inicios de 2015: Airbnb usa React.
  • Enero 28-29, 2015: Se publica la primera versión de React Native
  • Marzo 2015: React Native es público y de libre acceso para iOS, y está disponible en Github.
  • Septiembre 2015: La primera versión de React Native para Android es publicada.
  • Febrero 22-23, 2016: React.js Conf 2016 en San Francisco.
  • Junio 2-3, 2016: ReactEurope 2016.
  • Julio 11, 2016: Se publica el sistema de Códigos de Error para React.[10]

Mejora continua (2017- Actualidad)[editar]

El 26 de Septiembre de 2017, React 16.0 fue lanzado al público.[11]

El 16 de Febrero de 2019, React 16.8 fue lanzada al público.[12]​ Este lanzamiento introdujo los React Hooks.[13]

El 10 de Febrero de 2020, El equipo de React anuncio la primera candidata a lanzamiento de React v17.0, notable como el primer lanzamiento importante sin cambios importantes en la API de React orientada al desarrollador.[14]

Características[editar]

Virtual DOM[editar]

React mantiene un virtual DOM propio, en lugar de confiar solamente en el DOM del navegador. Esto deja a la biblioteca determinar qué partes del DOM han cambiado comparando contenidos entre la versión nueva y la almacenada en el virtual DOM, y utilizando el resultado para determinar cómo actualizar eficientemente el DOM del navegador.[15][16]​ Propiedades (props) de react.

Las propiedades[editar]

Las propiedades (también conocidas como 'props') pueden definirse como los atributos de configuración para dicho componente. Éstas son recibidas desde un nivel superior, normalmente al realizar la instancia del componente y por definición son inmutables.

El Estado[editar]

El estado de un componente se define como una representación del mismo en un momento concreto, es decir, una instantánea del propio componente. Existen dos tipos de componentes con y sin estado, denominados statefull y stateless.

Ciclos de vida[editar]

El ciclo de vida es una serie de estados por los cuales pasan los componentes statefull a lo largo de su existencia. Se pueden clasificar en tres etapas de montaje o inicialización, actualización y destrucción. Dichas etapas tienen correspondencia en diversos métodos.

  • shouldComponentUpdate permite al desarrollador prevenir el re-renderizado innecesario de un componente, devolviendo falso si no es necesario.
  • componentDidMount es llamado una vez que el componente es "montado" (el componente ha sido creado en la interfaz de usuario, usualmente asociándolo con el nodo del DOM). Esto es comúnmente usado para provocar la carga de datos desde una fuente remota a través de una API.
  • componentWillUnmount es llamado inmediatamente antes de que el componente es "desmontado". Es comúnmente usado para limpiar la demanda de dependencias del componente que no será simplemente removido con el desmontaje del componente.
  • render es el método más importante de los ciclos de vida y el único requerido en cualquier componente. Es usualmente llamado cada vez que el estado del componente es actualizado, reflejando los cambios en la interfaz de usuario.

JSX[editar]

React utiliza una sintaxis parecida a HTML, llamada JSX. No es necesaria para utilizar React, sin embargo, hace el código más legible, y escribirlo es una experiencia similar a HTML. [17]

Ejemplo de un componente escrito con JSX
Ejemplo de un componente escrito con JSX

React Native[editar]

React Native es un framework que permite construir aplicaciones móviles utilizando solamente JavaScript y React. Utiliza el mismo diseño que React.js, permitiendo usar elementos de interfaz de usuario móvil. No es para construir una ‘aplicación móvil web’, una ‘aplicación de HTML5’ o una ‘aplicación híbrida’, sino una aplicación móvil real que es indistinguible de otra aplicación construida en un lenguaje nativo. React Native utiliza los mismos bloques fundamentales de interfaz de usuario que las aplicaciones normales de iOS y Android. [18]

A pesar de que React.js y React Native usen la misma estructura de código, no sirven para lo mismo. React.js es utilizado para hacer páginas web y trabaja con elementos del virtual DOM, mientras que por el otro lado React Native utiliza elementos nativos de interfaz de usuario de Android y iOS para crear aplicaciones para ambas plataformas.

Controversia de la licencia[editar]

React al ser publicado en mayo de 2013 utilizaba la licencia de software libre de Apache license 2.0. Con la actualización de React 0.12.0, la anterior licencia fue cambiada por la licencia BSD de 3 cláusulas junto con un texto del uso de las patentes.[19]

Este cambio provocó controversia en la comunidad de React y en la comunidad de código abierto en general, específicamente por las cláusulas en las que permitía a Facebook remover el derecho de uso de la licencia del usuario bajo condiciones que consideran que no ponen como prioridad a la comunidad. Esto provocó que la Apache Software Foundation incluyera la licencia de Facebook en la lista de licencias que no pueden ser utilizadas con productos Apache.[20]

Por su parte, Facebook redactó una publicación en la que explicaba el motivo del uso de sus licencias. En el documento se menciona que el motivo principal es evitar demandas malintencionadas que puedan costarles tiempo y dinero a la compañía.[21]

El 23 de septiembre de 2017 Facebook anunció que cambio la licencia de uso del React.js de BSD de 3 cláusulas a la licencia MIT la cual es una licencia más permisiva en cuanto a su uso, en el anuncio Facebook mencionó que el objetivo de React es crear un ecosistema de software de código abierto, y no desean retroceder los avances sin ningún motivo aparente.[22]​ El 17 de febrero de 2018 anunciaron que React Native cambiaba su licencia de uso del BSD de 3 cláusulas a MIT.[23]

Colaboraciones[editar]

React al ser una biblioteca de código abierto, puede ser modificado por cualquier persona. Esto permite que cualquier usuario con conocimientos sea capaz de sugerir cambios o mejoras a la librería. Sin embargo, en un principio todas estas modificaciones no eran fáciles de encontrar puesto que estas se encontraban dispersas por diversas páginas, por lo que Facebook decidió crear un repositorio en GitHub. De esta forma podría facilitar la organización de la comunidad y los desarrolladores de React y almacenar las modificaciones hechas tanto por la comunidad como por el grupo de desarrollo de Facebook.

Enlaces externos[editar]

Referencias[editar]

  1. Walke, Jordan. «FaxJS». Consultado el 11 July 2019. 
  2. a b Papp, Andrea (4 April 2018). «The History of React.js on a Timeline». RisingStack. Consultado el 11 July 2019. 
  3. «Pete Hunt at TXJS». 
  4. Frederic Lardinois (18 April 2017). «Facebook announces React Fiber, a rewrite of its React library». TechCrunch. Consultado el 19 April 2017. 
  5. «React Fiber Architecture». Github. Consultado el 19 April 2017. 
  6. «Facebook announces React Fiber, a rewrite of its React framework». TechCrunch. Consultado el 19 de octubre de 2018. 
  7. «GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React Fiber». github.com. Consultado el 19 de octubre de 2018. 
  8. Andrea Papp (4 de abril de 2018). «The history of React.js on a timeline» [La historia de React.js en una línea de tiempo]. Consultado el 11 de septiembre de 2018. 
  9. Jordanna Kwok (28 de enero de 2015). «Netflix Likes React». Consultado el 8 de octubre de 2018. 
  10. Keyan Zhang (11 de julio de 2016). «Introducing React's Error Code System» (en inglés). Consultado el 8 de octubre de 2018. 
  11. «React v16.0». react.js. 26 de septiembre de 2017. Consultado el 20 de mayo de 2019. 
  12. «React v16.8». react.js. 16 de febrero de 2019. Consultado el 20 de mayo de 2019. 
  13. «Introducing Hooks». react.js. Consultado el 20 de mayo de 2019. 
  14. url=https://reactjs.org/blog/2020/08/10/react-v17-rc.html
  15. «An Introduction to React.js». Instrument. 2015. Archivado desde el original el 27 de febrero de 2015. Consultado el 26 de enero de 2016. 
  16. «Working With the Browser». React. Consultado el 26 de enero de 2016. 
  17. Facebook Inc. (27 de junio de 2018). «React» (en inglés). 
  18. Facebook Inc. (30 de septiembre de 2018). «React Native» [Documentación oficial de React Native]. 
  19. «React CHANGELOG». Consultado el 8 de octubre de 2018. 
  20. «Apache legal». Consultado el 8 de octubre de 2018. 
  21. «Explaining React’s license» [Explicando la licencia de React]. Consultado el 8 de octubre de 2018. 
  22. «Relicensing React, Jest, Flow, and Immutable.js». Consultado el 9 de octubre de 2018. 
  23. «React Native now has MIT Licence». Consultado el 9 de octubre de 2018. 

Véase también[editar]