React

React
Información general
Tipo de programa	marco de referencia para aplicaciónes móviles web
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	18.1 ( 26 de abril de 2022)
Enlaces
Sitio web oficial Blog Repositorio de código
[editar datos en Wikidata]

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

React fue creado por Jordan Walke, un ingeniero de software de Facebook, quien liberó 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 en mayo de 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 de 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]​

• 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)

• 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)

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

Virtual DOM

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

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

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 stateful y stateless.

Ciclos de vida

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

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

Ejemplo de un componente escrito con JSX

Hooks

Los Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características de React sin escribir una clase.

Hook de estado (useState)

React mantendrá este estado entre re-renderizados. useState devuelve un par: el valor de estado actual y una función que le permite actualizarlo. Puedes llamar a esta función desde un controlador de eventos o desde otro lugar. Es similar a this.setState en una clase, excepto que no combina el estado antiguo y el nuevo.^[18]​

Ejemplo de implementación:

const [count, setCount] = useState(0);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Hook de efecto (useEffect)

El Hook de efecto, useEffect, agrega la capacidad de realizar efectos secundarios desde un componente de función. Tiene el mismo propósito que componentDidMount,componentDidUpdate y componentWillUnmount en las clases React, pero unificadas en una sola API.^[18]​

Por ejemplo, este componente establece el título del documento después de que React actualiza el DOM:

// Similar a componentDidMount y componentDidUpdate:  
useEffect(() => {    
    // Actualiza el título del documento usando la Browser API    
    document.title = `You clicked ${count} times`;  
});

Cuando llamas a useEffect, le estás diciendo a React que ejecute tu función de “efecto” después de vaciar los cambios en el DOM.

Reglas sobre los Hooks

Los Hooks son funciones de JavaScript, pero imponen dos reglas adicionales:

• Solo llamar Hooks en el nivel superior. No llames Hooks dentro de loops, condiciones o funciones anidadas.

• Solo llamar Hooks desde componentes de función de React. No llames Hooks desde las funciones regulares de JavaScript. (Solo hay otro lugar válido para llamar Hooks: tus propios Hooks personalizados. En un momento aprenderemos sobre estos)

Otros Hooks

Hay algunos Hooks incorporados de uso menos común que pueden resultarte útiles. Por ejemplo, useContext te permite suscribirte al contexto React sin introducir el anidamiento:

function Example() {
  const locale = useContext(LocaleContext);  
  const theme = useContext(ThemeContext);  
  // ...
}

Y useReducer te permite manejar el estado local de componentes complejos con un reducer:

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);  
  // ...

React Native

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.^[19]​

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

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.^[20]​

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.^[21]​

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.^[22]​

El 23 de septiembre de 2017 Facebook anunció que cambió 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.^[23]​ El 17 de febrero de 2018 anunciaron que React Native cambiaba su licencia de uso del BSD de 3 cláusulas a MIT.^[24]​

Colaboraciones

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

• Lista de recursos de React – AwesomeReact
• Lista de aplicaciones con React Native – Aplicaciones React Native
• Tutorial de React en español - Introducción a React

Referencias

1. Walke, Jordan. «FaxJS». Consultado el 11 de julio de 2019. 
2. Papp, Andrea (4 de abril de 2018). «The History of React.js on a Timeline». RisingStack. Consultado el 11 de julio de 2019. 
3. «Pete Hunt at TXJS». 
4. Frederic Lardinois (18 de abril de 2017). «Facebook announces React Fiber, a rewrite of its React library». TechCrunch. Consultado el 19 de abril de 2017. 
5. «React Fiber Architecture». Github. Consultado el 19 de abril de 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. Archivado desde el original el 29 de mayo de 2016. Consultado el 26 de enero de 2016. 
17. Facebook Inc. (27 de junio de 2018). «React» (en inglés). 
18. «Un vistazo a los Hooks – React». es.reactjs.org. Consultado el 22 de mayo de 2022. 
19. Facebook Inc. (30 de septiembre de 2018). «React Native» [Documentación oficial de React Native]. 
20. «React CHANGELOG». Consultado el 8 de octubre de 2018. 
21. «Apache legal». Consultado el 8 de octubre de 2018. 
22. «Explaining React’s license» [Explicando la licencia de React]. Consultado el 8 de octubre de 2018. 
23. «Relicensing React, Jest, Flow, and Immutable.js». Consultado el 9 de octubre de 2018. 
24. «React Native now has MIT Licence». Consultado el 9 de octubre de 2018. 

Véase también

• Portal:Software libre. Contenido relacionado con Software libre.