Noviembre, 2016

Ttulo:Framework React.js
Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla, Jose Maria Gomes Peralta
Fecha: 22/11/2016

Cdigo de estudiante: 201313525 201501110 201312314.

Carrera: Ingeniera de Sistemas

Asignatura: Matemtica Discreta
Grupo:A
Docente: Roger Arroyo
Periodo Acadmico: 4to Semestre

Subsede: Santa Cruz - Bolivia

Copyright (2016) por (Jonathan Cabero Padilla, Javier Pasabare Ticlla). Todos los derechos reservados.

Resumen

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

Lo ms importante que debemos saber de ReactJS es que se trata de una librera para
desarrollar interfaces de usuario. No estamos hablando de un framework donde viene todo
incluido como AngularJS, Durandal o Ember, sino ms bien de algo similar a KnockoutJS, al
menos en cuanto a alcance.
Los que nos permitir ReactJS es desarrollar el interfaz de usuario de una aplicacin web, la
V en un patrn MVC o MVVM, pero esto no incluye cosas como routing, acceso a servicios rest,
inyeccin de dependencias, sistema de mdulos, etc. Tampoco nos impone muchas restricciones
sobre la forma de usarla, por lo que podemos mezclarla con otras libreras para conseguir el resto
de funcionalidades.
Es bastante frecuente ver ReactJS usado en combinacin con otras libreras. Hay quien ha
integrado AngularJS y ReactJS (por motivos que ya veremos ms adelante), y siempre se ve
soluciones basadas en ReactJS y Backbone, una mezcla muy interesante, ya que Backbone
aporta todo lo que le falta a ReactJS y no tiene un sistema de vistas propio.

Palabras clave:Librera, Interfaz, Framework, Restricciones, Sincronizar.

Abstract
The most important thing to know is that ReactJS is a library for developing user interfaces.
We are not talking about a framework where everything comes included as AngularJS, Durandal
or Ember, but rather something similar to KnockoutJS, at least in terms of scope.
ReactJS which will allow us to develop the user interface of a web application, the V in MVC
or MVVM pattern, but this does not include things like routing, access to rest services,
dependency injection, system modules, etc. Nor imposes many restrictions on how to use it, so
we can mix it with other libraries for other features.
It is quite common to see ReactJS used in combination with other libraries. Some have
integrated AngularJS and ReactJS (for reasons we'll see later), and always based on ReactJS and
Backbone, a very interesting mix solutions is, as Backbone provides everything lacks ReactJS
and has no system own views.

Key words:Library , Interface Framework, Restrictions , Sync.

Tabla de Contenido
Resumen..........................................................................................................................................1
Asignatura: Matemtica Discreta
Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

Palabras clave:..........................................................................................................................1
Abstract............................................................................................................................................1
Tabla de Contenido..........................................................................................................................2
Captulo I: Introduccin...................................................................................................................3
Captulo II: Marco Terico..............................................................................................................3
1.

Cmo funciona React?........................................................................................................3

2.

Cmo funciona el DOM virtual?........................................................................................4

3.

React y el estado de las vistas...............................................................................................4

4.

Modificando el estado de un componente (props vs state)...................................................5

5.

Reaccionar ante el cambio....................................................................................................5

6.

Comunicacin entre componentes........................................................................................5

7.

Componentes reusables........................................................................................................6

Captulo III: Conclusiones...............................................................................................................6

Captulo IV: Bibliografas y Referencias.........................................................................................6
Captulo V: Anexos..........................................................................................................................7
1.

Modificando el estado de un componente (props vs state)...................................................7

2.

Comunicacin entre componentes........................................................................................8

EVALUACIN DEL DOCENTE...................................................................................................9

Captulo I: Introduccin

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

Los frameworks ofrecen una funcionalidad definida, auto contenida, construidos usando
patrones de diseo, y su caracterstica principal es su alta cohesin y bajo acoplamiento. Para
acceder a esa funcionalidad, se construyen piezas, objetos, llamados objetos calientes, que
vinculan las necesidades del sistema con la funcionalidad que este presta.
Esta funcionalidad, est constituida por objetos llamados fros, que sufren poco o ningn
cambio en la vida del frameworks, permitiendo la portabilidad entre distintos sistemas.
Frameworks conocidos que se pueden mencionar por ejemplo son GWT (Google Web Toolkit)
desarrollado por Google, Microsoft.NET desarrollado por Microsoft o React JS desarrollado por
Facebook.
Y en Facebook, del cual es el tema que hablaremos, desarrollaron uno de los mejores
Framework, llamado React, es una biblioteca escrita en JavaScript, fue desarrollada para facilitar
la creacin de componentes interactivos, reutilizables, para interfaces de usuario. Se utiliza en
Facebook para la produccin de componentes, e Instagram est escrito enteramente en React.
Uno de sus puntos ms destacados, es que no slo se utiliza en el lado del cliente, sino que
tambin se puede representar en el servidor, y trabajar juntos.

Captulo II: Marco Terico

1. Cmo funciona React?

React.js est construido en torno a hacer funciones, que toman las actualizaciones de estado
de la pgina y que se traduzcan en una representacin virtual de la pgina resultante. Siempre
que React es informado de un cambio de estado, vuelve a ejecutar esas funciones para determinar
una nueva representacin virtual de la pgina, a continuacin, se traduce automticamente ese
resultado en los cambios del DOM necesarios para reflejar la nueva presentacin de la pgina.
A primera vista, esto suena como que fuera ms lento que el enfoque JavaScript habitual de
actualizacin de cada elemento, segn sea necesario. Detrs de escena, sin embargo, React.js
hace justamente eso: tiene un algoritmo muy eficiente para determinar las diferencias entre la
representacin virtual de la pgina actual y la nueva. A partir de esas diferencias, hace el
conjunto mnimo de cambios necesarios en el DOM.
Pues utiliza un concepto llamado el DOM virtual que hace selectivamente sub-rboles de los
nodos sobre la base de cambios de estado, desarrollando esto, con la menor cantidad de
manipulacin DOM posible, con el fin de mantener los componentes actualizados, estructurando
sus datos.

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

2. Cmo funciona el DOM virtual?

Imagina que tienes un objeto que es un modelo en torno a una persona. Tienes todas las
propiedades relevantes de una persona que podra tener, y refleja el estado actual de la persona.
Esto es bsicamente lo que React hace con el DOM.
Ahora piensa, si tomamos ese objeto y le hacemos algunos cambios. Se ha aadido un bigote,
unos bceps y otros cambios. En React, cuando aplicamos estos cambios, dos cosas ocurren:
- En primer lugar, React ejecuta un algoritmo de "diffing", que identifica lo que ha cambiado.
- El segundo paso es la reconciliacin, donde se actualiza el DOM con los resultados de diff.
La que hace React, ante estos cambios, en lugar de tomar a la persona real y reconstruirla
desde cero, slo cambiara la cara y los brazos. Esto significa que si usted tena el texto en una
entrada y un actualizacin se llev a cabo, siempre y cuando nodo padre de la entrada no estaba
programado para la actualizacin, el texto se quedara sin ser cambiado.

3. React y el estado de las vistas

Una de las principales ventajas es que las vistas de React tengan el mnimo estado posible,
esto se puede entender de manera muy sencilla, un componente de tipo checkbox, solo tiene dos
estados, activo e inactivo. Es importante aclarar que el nico estado que ha de almacenar la vista
es el estado de UI, como el del ejemplo anterior. Las vistas que necesiten estados ms complejos
han de componerse a su vez de subvistas, y ser este componente el encargado de iniciar el
estado de las vistas. A partir de ah son las propias vistas las encargadas de cambiar su estado de
manera que el estado se puede considerar privado.
Otra caracterstica interesante de React es que una vez se modifica el estado del componente,
vuelve a renderizarlo de 0 con ese nuevo estado en un DOM a parte que han denominado DOM
virtual, a partir de ah usan un algoritmo diff para ver las diferencias con el DOM real, y genera
los cambios mnimos necesarios para modificar el DOM real al estado deseado. Esto no incurre
en una gran penalizacin de uso de memoria o rendimiento como sucede en otros frameworks
que usan otras tcnicas como dirtychecking o el cambio entero del DOM. Esto nos facilita
mucho la vida ya que nosotros solo tenemos que saber pintar la vista en los diferentes estados y
no tenemos que preocuparnos por la transicin entre dichos estados y todos los fallos que eso
puede provocar.

4. Modificando el estado de un componente (props vs state)

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

Los componentes tambin tienen un atributo state que recoge el estado de dicho componente,
son los propios componentes los que suelen generar el estado inicial a partir de las propiedades
que se le han pasado, y actualizarlo segn se vayan produciendo los distintos eventos que admita.
La manera de actualizar dicho estado es mediante el mtodo setState(objectnextState[,
functioncallback]), este mtodo mergea el estado antiguo con el nuevo estado que le pasamos por
parmetro y una vez realizado re-renderiza el componente.
La principal diferencia entre las propiedades y el estado es que las propiedades son
inmutables, no cambiarn en el ciclo de vida del componente, en cambio el estado si puede
cambiar en funcin de eventos del usuario por ejemplo. Es importante entender que el estado ha
de ser usado nicamente para representar estado de la interfaz.

5. Reaccionar ante el cambio

Hasta ahora hemos visto como renderizar componentes a partir de un estado inicial y de una
serie de datos originales, pero las aplicaciones necesitan responder ante eventos producidos por
el usuario, clicks, escritura en cajas de texto.. etc.

6. Comunicacin entre componentes

El siguiente paso lgico es el comunicar el cambio a otros componentes, la idea es que el

cambio siempre se propague haca arriba(padre) y nunca hacia los lados(hermanos), dejando en
las manos del padre la posibilidad de propagar o no el evento haca abajo.

7. Componentes reusables

Otra de las ideas que busca React es que los componentes sean lo ms genricos posibles de
manera que puedan ser reusables, permitindonos componer vistas ms complicadas a partir de
vistas ms sencillas. Podemos ver pginas cmo React Componentes en las que podemos ver
componentes realizados por otras personas, que nos ayudarn con distintas abstracciones a la
hora de modelar nuestros propios componentes.

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

Captulo III: Conclusiones

Como hemos podido comprobar React es un cambio bastante grande en cuanto a cmo
entender las aplicaciones cliente (SPA), pero parece un gran paso en el buen camino. Quizs al
principio se pueda hacer raro por la sintaxis, pero rpidamente vemos que es un mero tema
cosmtico y que de verdad mejora sin aumentar la complejidad o la curva de aprendizaje.
Hablando de curva de aprendizaje, React tiene una curva de aprendizaje muy corta, en un par
de das puedes estar ya modificando cdigo React o creando el tuyo propio, debido a que no hay
que tener una idea global de la aplicacin si no de lo componente que estamos modificando y los
componentes adyacentes.
Es as como React, est tomando un gran auge, llegando a ser ms usado.

Captulo IV: Bibliografas y Referencias

Devcode (Cmo funciona un React.js?) URL: devcode.la/blog/como-funciona-reactjs/

Daniel Diaz Suarez, desarrollador Web y Experto en Android en Autentia (Introduccion a
React.js)
URL: adictosaltrabajo.com/tutoriales/introduccion-react/
Jordisan (Qu es un Framework?) URL: jordisan.net/blog/2006/que-es-un-framework/
Wikipedia (Framework) URL: es.wikipedia.org/wiki/Framework

Captulo V: Anexos

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

1. Modificando el estado de un componente (props vs state)

Se los llama props(propiedades), de manera que para acceder a dichos atributos podemos acceder
de la siguiente manera:

varHelloUser= React.createClass({
render: function(){
return( Hello {this.props.name} )
}
});

React.render(
<HelloUser name="Daniel"/>,
document.getElementById('container')
)

2. Comunicacin entre componentes

varHelloNameInput = React.createClass({

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

handleChange: function (event) {

var value = event.target.value;
this.props.onUserInput(value);
},
render: function () {
return<input type="text" value={this.props.name} onChange={this.handleChange} />;
}
});

varHelloNameDisplay = React.createClass({
render: function () {
var name = this.props.name ? this.props.name : '';
vartextToShow = 'Hello ' + name;
return {textToShow};
}
});

varHelloName = React.createClass({
getInitialState: function () {
return {name:''}
},
onUserInput: function (value) {
this.setState({name:value});
},
render:function(){
return(
<HelloNameDisplay name={this.state.name}/>

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema

Ttulo: Framework React.js

Autor: Jonathan Cabero Padilla, Javier Pasabare Ticlla.
_____________________________________________________________________________________________

<HelloNameInput name={this.state.name} onUserInput={this.onUserInput}/>

)
}
});

React.render(
<HelloName/>,
document.getElementById('container')
);

EVALUACIN DEL DOCENTE

CRITERIO DE EVALUACIN
1
2
3
4
5
6
7
8
9

PUNTAJE

Entrega adecuada en plazo y medio.

Cumplimiento de la estructura del trabajo.
Uso de bibliografa adecuada.
Coherencia del documento.
Profundidad del anlisis.
Redaccin y ortografa adecuados.
Uso de grficos e ilustraciones.
Creatividad y originalidad del trabajo.
Aporte humano, social y comunitario.

CALIFICACIN

10
10
10
10
15
10
10
15
10

Calificacin Final: /100

Asignatura: Matemtica Discreta

Carrera: Ingeniera de Sistema